for 循环 和 Array 数组对象

博客地址:https://ainyi.com/12

 

for 循环 和 Array 数组对象方法

 for for-in for-of forEach效率比较

- 四种循环,遍历长度为 1000000 的数组叠加,得到的时间差:

 

for 3
for-in 250
for-of 7
forEach 44

- 效率速度:for > for-of > forEach > for-in

- for循环本身比较稳定,是for循环的i是Number类型,开销较小
- for-of 循环的是val,且只能循环数组,不能循环对象
- forEach 不支持 return 和 break,一定会把所有数据遍历完毕
- for-in 需要穷举对象的所有属性,包括自定义的添加的属性也会遍历,for...in的key是String类型,有转换过程,开销比较大
 1 // 面试: for, forEach, for-in, for-of(es6)
 2 
 3 let arr = [1,2,3,4,5];
 4 arr.b = '100'; // 自定义私有属性
 5 
 6 
 7 
 8 // for循环 速度最快
 9 for (let i = 0; len = arr.length, i < len; i++) { // 编程式
10 console.log("for循环"+arr[i]);
11 }
12 
13 
14 
15 // forEach 不支持return和break,无论如何都会遍历完,
16 arr.forEach(function(item){
17 console.log("forEach循环"+item);
18 });
19 
20 
21 
22 // for-in 遍历的是 key 值,且 key 会变成字符串类型,包括数组的私有属性也会打印输出
23 for(let key in arr){
24 console.log("for in循环"+key);
25 console.log(typeof key);
26 }
27 
28 
29 
30 // for-of 遍历的是值 val,只能遍历数组 (不能遍历对象)
31 for(let val of arr){
32 console.log("for of循环"+val);
33 }
34 
35 
36 // Object.keys 将对象的 key 作为新的数组,这样 for-of 循环的就是原数组的 key 值
37 let obj = {school:'haida',age:20};
38 // 变成 ['school','age']
39 for(let val of Object.keys(obj)){
40 console.log(obj[val]);
41 }

 

 JavaScript Array 数组对象方法

- 不改变原数组:concat、every、filter、find、includes、indexOf、isArray、join、lastIndexOf、map、reduce、slice、some、toString、valueOf
- 改变原数组:pop、push、reverse、shift、sort、splice、unshift

 重点难点解析

- filter、map、find、includes、some、every、reduce、slice
- 数组变异:pop、shift、splice、unshift
  1 // filter 过滤:可用于删除数组元素
  2 // 不改变原数组,过滤后返回新数组
  3 // 回调函数的返回值:若 true:表示这一项放到新数组中
  4 let newArr = [1,2,3,4,5].filter(item => item>2 && item <5);
  5 //数组元素>2且<5的元素返回true,就会放到新数组
  6 console.log("新数组:"+newArr);
  7 
  8 
  9 
 10 
 11 // map 映射,将原有的数组映射成一个新数组 [1,2,3],用于更新数组元素
 12 // 不改变原数组,返回新数组
 13 // 回调函数中返回什么这一项就是什么
 14 // 若要拼接 <li>1</li><li>2</li><li>3</li>
 15 let arr2 = [1,2,3].map(item => `<li>${item}</li>`);
 16 // join方法用于把数组中的所有元素放入一个字符串。每个元素通过指定的分隔符进行分隔。
 17 // 这里使用''空字符分割
 18 console.log(arr2.join(''));
 19 
 20 
 21 // 若只要 name 的 val 值,不要 key 值
 22 let arrJson = [{'name':'krry'},{'name':'lily'},{'name':'xiaoyue'},{'name':'krry'}];
 23 let newArrJson = arrJson.map( val => val.name);
 24 console.log(`newArrJson:${newArrJson}`);
 25 
 26 
 27 
 28 
 29 // find:返回找到的那一项
 30 // 不改变原数组
 31 // 找到后停止循环,找不到返回的是 undefined
 32 let arrFind = [1,2,3,4,55,555];
 33 let result = arrFind.find((item,index) => {
 34 return item.toString().indexOf(5) > -1;// 找数组元素中有5的第一项
 35 });
 36 console.log(result); // 输出 55
 37 
 38 
 39 
 40 
 41 // includes 数组中是否包含某个元素,返回 true or false
 42 let arr3 = [1,2,3,4,55,555];
 43 console.log(arr3.includes(5));
 44 
 45 
 46 
 47 
 48 // some:如果有一个元素满足条件,则表达式返回 true, 剩余的元素不会再执行检测。
 49 // 如果没有满足条件的元素,则返回 false
 50 let arrSF = [1,2,3,4,555];
 51 let result = arrSF.some((item,index)=>{
 52 return item > 3;
 53 });
 54 console.log(result); // 输出true
 55 
 56 
 57 
 58 
 59 // every:如果有一个元素不满足,则表达式返回 false,剩余的元素不会再进行检测。
 60 // 如果所有元素都满足条件,则返回 true
 61 let arrSE = [1,2,3,4,555];
 62 let result = arrSE.every((item,index)=>{
 63 return item > 3;
 64 });
 65 console.log(result); // 输出 false
 66 
 67 
 68 
 69 
 70 // reduce 收敛函数, 4个参数 返回的是叠加后的结果
 71 // 不改变原数组
 72 // 回调函数返回的结果:
 73 // prev:数组的第一项,next是数组的第二项(下一项)
 74 // 当前 return 的值是下一次的 prev
 75 let sum = [1,2,3,4,5].reduce((prev,next,index,item)=>{
 76 // console.log(arguments);
 77 // 1 2
 78 // 3 3
 79 // 6 4
 80 // 10 5
 81 console.log(prev,next);
 82 return prev+next; // 返回值会作为下一次的 prev
 83 });
 84 console.log(sum);
 85 
 86 
 87 // reduce 可以默认指定第一轮的 prev,那么 next 将会是数组第一项(下一项)
 88 // 例子:算出总金额:
 89 let sum2 = [{price:30,count:2},{price:30,count:3},{price:30,count:4}];
 90 let allSum = sum2.reduce((prev,next)=>{
 91 // 0+60
 92 // 60+90
 93 // 150+120
 94 console.log(prev,next);
 95 return prev+next.price*next.count;
 96 },0); // 默认指定第一次的 prev 为 0
 97 console.log(allSum);
 98 
 99 
100 // 利用reduce把二维数组变成一维数组
101 let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce((prev,next)=>{
102 return prev.concat(next); // 拼接数组
103 });
104 console.log(flat);
105 
106 
107 
108 
109 // slice 从已有的数组中返回选定的元素
110 // 不改变原数组
111 let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
112 let citrus = fruits.slice(1,3);
113 console.log(citrus); // 输出 Orange,Lemon
114 
115 
116 
117 
118 // pop 用于删除数组的最后一个元素并返回删除的元素
119 // 改变原数组
120 let fur = ["Banana", "Orange", "Apple", "Mango"];
121 fur.pop();
122 console.log(fur); // 输出 Banana,Orange,Apple
123 
124 
125 
126 
127 // shift 用于把数组的第一个元素从其中删除,并返回第一个元素的值
128 // 改变原数组
129 let fts = ["Banana", "Orange", "Apple", "Mango"];
130 fts.shift();
131 console.log(fts);// 输出 Orange,Apple,Mango
132 
133 
134 
135 
136 // unshift 向数组的开头添加一个或更多元素,并返回新的长度
137 // 改变原数组
138 let fse = ["Banana", "Orange", "Apple", "Mango"];
139 fse.unshift("Lemon","Pineapple");
140 console.log(fse); // 输出 Lemon,Pineapple,Banana,Orange,Apple,Mango
141 
142 
143 
144 
145 // splice 用于插入、删除或替换数组的元素
146 // 改变原数组
147 let myArrs = ["Banana", "Orange", "Apple", "Mango"];
148 myArrs.splice(2,1); // 从数组下标为 2 开始删除,删除 1 个元素
149 console.log(myArrs); // 输出 Banana,Orange,Mango

 

 额外谈一下arguments

 1 // arguments 是一个对应于传递给函数的参数的类数组对象
 2 // 此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。
 3 // 例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:
 4 // arguments[0]
 5 // arguments[1]
 6 // arguments[2]
 7 let xx = sumAll(1, 123, 500, 115, 44, 88);
 8  
 9 function sumAll() {
10 let i, sum = 0;
11 for (i = 0; i < arguments.length; i++) {
12 sum += arguments[i];
13 }
14 console.log(sum); // 返回总和 871
15 }

 

 for 效率测试代码

 1 let arr = new Array();
 2 for(let i = 0, len = 1000000;i < len; i++){
 3 arr.push(i);
 4 }
 5  
 6 function foradd(my_arr){
 7 let sum = 0;
 8 for(let i = 0; i < my_arr.length; i++){
 9 sum += my_arr[i];
10 }
11 }
12  
13 function forinadd(my_arr){
14 let sum = 0;
15 for(let key in my_arr){
16 sum += my_arr[key];
17 }
18 }
19  
20 function forofadd(my_arr){
21 let sum = 0;
22 for(let val of my_arr){
23 sum += val;
24 }
25 }
26 
27 
28 function forEachadd(my_arr){
29 let sum = 0;
30 my_arr.forEach(val => {
31 sum += val;
32 });
33 }
34  
35 function timeTest(func,my_arr,str) {
36 var start_time = null;
37 var end_time = null;
38 start_time = new Date().getTime();
39 func(my_arr);
40 end_time = new Date().getTime();
41 console.log(str,(end_time - start_time).toString());
42 }
43  
44 timeTest(foradd,arr,'for');
45 timeTest(forinadd,arr,'for-in');
46 timeTest(forofadd,arr,'for-of');
47 timeTest(forEachadd,arr,'forEach');

 

博客地址:https://ainyi.com/12

转载于:https://www.cnblogs.com/ainyi/p/9203374.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA---java的编译工具【转】

转自&#xff1a;http://baike.baidu.com/link?urlsEpS0rItaB9BiO3i-qCdGSYiTIVPSJfBTjSXXngtN2hBhGl1j36CYQORKrbpqMHqjvu3MOfkgVzpMqr8To2l2q IDEA 全称 IntelliJ IDEA&#xff0c;是java语言开发的集成环境&#xff0c;IntelliJ在业界被公认为最好的java开发工具之一&#…

OC中文件读取类(NSFileHandle)介绍和常用使用方法

NSFileHandle 1.NSFileManager类主要对于文件的操作(删除&#xff0c;修改&#xff0c;移动&#xff0c;赋值等等) //判断是否有 tagetPath 文件路径&#xff0c;没有就创建NSFileManager *fileManage [NSFileManager defaultManager];BOOL success [fileManage createFileAt…

java filereader读文件_Java FileReader读文件

import java.io.*;class FileReaderDemo{public static void main(String[] args) throws IOException{//创建一个文件读取流对象&#xff0c;和指定名称的文件相关联。//要保证该文件是已经存在的&#xff0c;如果不存在&#xff0c;会发生异常FileNotFoundExceptionFileReade…

struts2拦截器

struts拦截器 图&#xff1a; 1、拦截器是什么&#xff1f; 分离关注&#xff1a; 完成一个功能&#xff0c;可以写在一个类中&#xff0c;然后一个类中4个步骤&#xff0c;实现该类完成。 我们可以将4个步骤写在4个类中&#xff0c;然后每一个类完成一部分功能&#xff0c;然后…

Springboot-Jpa多数据库配置-2.0+版本

pom.xml增加: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId></dependency> 配置表同JdbcTemplate配置. 主数据源: ConfigurationEnableTransactionManagementEna…

Windows虚拟地址转物理地址(原理+源码实现,附简单小工具)

By Lthis 上个月就想写了&#xff0c;一直没时间...网上大概搜了一下&#xff0c;原理与操作倒是一大堆&#xff0c;一直没看到源码实现&#xff0c;总得有人动手&#xff0c;这回轮到我了。东西写得很烂&#xff0c;请大牛勿喷。一直觉得靠源码的方式驱动学习是非常好的一种学…

python装饰器的使用

借用装饰器&#xff0c;我们可以批量的对老的函数进行改造或扩展老函数功能&#xff0c;比如需要对函数的接收参数进行过滤&#xff0c;Flash的url路由功能就是使用的这个方式 def dropoushu(): # 这一层函数可以去掉&#xff0c;如果去掉了&#xff0c;则使用checkjiou这种方…

7_文件上传漏洞

文件上传漏洞 当文件上传时&#xff0c;若服务端脚本语言未对上传的文件进行严格验证和过滤&#xff0c;若恶意用户上传恶意的脚本文件时&#xff0c;就有可能控制整个网站甚至是服务器&#xff0c;这就是文件上传漏洞。 权限 1.网站后台权限&#xff1a;登陆了后台&#xff0…

mysql数据库如何实现分页查询_不同数据库的分页查询实现方法总结

分页查询是数据库查询中经常用到的一项操作&#xff0c;对查询出来的结果进行分页查询可以方便浏览。那么Oracle、SQL Server、MySQL是如何实现查询的呢&#xff1f;本文我们就来介绍这一部分内容。首先我们先看一下SQL Server 数据库中SQL语句查询分页数据的解决方案&#xff…

POJ - 3842 An Industrial Spy dfs(水)

题意:给你一串数字&#xff0c;最少一个&#xff0c;最多七个&#xff0c;问用这里面的数字能组成多少素数&#xff0c;不重复。 思路&#xff1a;之前还遍历10000000的每一个素数&#xff0c;结果超时&#xff0c;后来发现直接dfs就可以了&#xff0c;只是标记一下做过的数。 …

飞机大战小游戏1.0版本

小时候大家应该都玩过飞机大战吧&#xff0c;这就是仿的一个飞机大战&#xff0c;但是没有写的很全&#xff0c;只能玩一次&#xff0c;死掉之后需要刷新页面玩第二次&#xff0c;话不说多&#xff0c;上代码&#xff1a; 初始页面&#xff1a; 整个的html代码还是很少&#xf…

记一次Jquery获取值的典型错误

直接上代码&#xff1a; 代码很简单&#xff0c;通过Post的形式提交参数&#xff0c;但是发现提交的data总是空&#xff0c;昨晚有点纳闷&#xff0c;今天一看才发现。。。 获取值得时候的顺序有问题&#xff0c;获取值应该是在onclick事件中。 综上&#xff1a;写Jquery的时间…

android 调用java接口_android调用java的web service接口

android中通过webservice调用服务器端其实还是很简单的&#xff0c;只要按部就班的按照下面步骤进行即可&#xff1a;(1)创建HttpTransportSE对象&#xff0c;该对象用于调用WebService操作代码如下:HttpTransportSE ht new HttpTransportSE(SERVICE_URL);(2)创建SoapSerializ…

iOS: TableView如何刷新指定的cell 或section

/一个section刷新 NSIndexSet *indexSet[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:indexSet withRowAnimation:UITableViewRowAnimationAutomatic]; //一个cell刷新 NSIndexPath *indexPath[NSIndexPath indexPathForRow:3 inSection:0…

Skype For Business 2015实战系列14:创建Office Web App服务器场

Skype For Business 2015实战系列14&#xff1a;创建Office Web App服务器场前面的操作中我们已经成功的安装了Office Web App Server&#xff0c;今天我们将创建Office Web App服务器场。具体步骤如下:配置证书&#xff1a;登陆到OWA服务器,打开服务器管理器&#xff0c;点击“…

https://cwiki.apache.org/confluence/display/FLINK/FLIP-24+-+SQL+Client

https://cwiki.apache.org/confluence/display/FLINK/FLIP-24-SQLClient转载于:https://www.cnblogs.com/WCFGROUP/p/9214589.html

java ee me se_java EE ME SE有什么关系

1. Java SE(Java Platform&#xff0c;Standard Edition)。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的 Java 应用程序。Java SE 包含了支持 Java Web 服务开发的类&#xff0c;为 Java Platform&#xff0c;Enterprise Edition(Jav…

Android第三夜

Paint的设置方法 setAntiAlias&#xff1a;这是画笔的锯齿效 setColor setARGB setAlpha setTextSize setStyle setStrokeWidth getColor getAlpha Canvas绘制常见图形的方法 1&#xff0c;绘制直线 左上角是0.0点 drawLine(float startX,float startY,float stopX,float stopY…

JavaScript websocket 实例

实例: 即时通讯聊天室demo可以打开两个页面互相发送消息查看。 websocket.js /* 判断浏览器是否内置了websocket */if (WebSocket in window) {websocket new WebSocket(ws://180.76.144.202:19910/websocket);}websocket->onerror onerror;websocket->onopen onopen…

SQL Server 2008 基础

SQL Server 2008 基础SQL流程TDS是一种协议&#xff0c;一系列描述两个计算机间如何传输数据的规则。象别的协议一样&#xff0c;它定义了传输信息的类型和他们传输的顺序。总之&#xff0c;协议描述了“线上的位”&#xff0c;即数据如何流动。表格数据流协议是建立在TCP/IP N…