博客地址: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

for 循环 和 Array 数组对象相关推荐

  1. JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)

    1.字符串属性 <script> var test_var = "I Iove you"; console.log(test_var.charAt(3)) //char ...

  2. 微信小程序开发教程之Array数组对象

    最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象. 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容. Array,又称作数组对象我们通 ...

  3. Array数组对象sort排序方法

    数组sort排序方法 Array数组对象中的sort方法是根据数组中数组元素的字符编码进行排序的,所以对数字的排序,会跟想要的升序结果不一样 通过设置sort()方法的参数可以按照自定义的排序方式对数 ...

  4. python的对象数组_Python当中的array数组对象实例详解

    计算机为数组分配一段连续的内存,从而支持对数组随机访问: 由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加. 数组的基本地址就是数组的第一项 ...

  5. 内置对象的API Array数组对象 String字符串对象 json字符串 JSON对象 js作用域及变量预解析 引用类型与值类型区别 共享引用 基本包装类型 数组去重

    01-内置对象的API a.Date对象获取时间 b.Array对象数组加工 c.String对象字符串加工 d.json字符串的语法格式 e.JSON对象的字符串与对象转换应用 02-JS作用域 a ...

  6. 7.Array 数组对象

    数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定义了一个空数组: va ...

  7. JS的Array数组对象方法一些总结

    不会影响原数组的对象方法: concat():   语法:array1.concat(array2,array3,...,arrayX),连接两个或者多个数组,返回一个连接后的新数组 entries( ...

  8. JavaScript入门→HTML引用JS、变量、表达式操作符、数组Array数组对象、选择结构循环结构、函数、JavaScript与JAVA区别

    插入引用JS 变量 表达式 操作符 数组 选择判断结构 循环结构 函数 JavaScript与JAVA区别 绝学无忧. 唯之与阿,相去几何? 善之与恶,相去何若? 人之所畏,不可不畏. 荒兮其未央哉! ...

  9. 【TypeScript系列教程14】Array数组对象的常见的方法

    目录 TypeScript Array(数组) concat() every() filter() forEach() join() lastIndexOf() map() pop() push(

最新文章

  1. 在SecureCRT下使用sz下载和rz上传文件
  2. Matlab与机器学习 -- BP网络神经元上的转移函数
  3. 产品经理规划产品之需求梳理
  4. python最好的教程_喜大普奔~可能是最好的Python教程
  5. 【C++】 C++标准模板库(四) Set
  6. 腾讯广告X中科院计算所WWW2021论文:在线广告中的探索与优化
  7. C语言小程序——验证哥德巴赫猜想
  8. VHDL学习笔记——半加器 多路选择器 分频器
  9. 华东理工大学考研计算机难度,华东理工大学(专业学位)计算机技术考研难吗
  10. 使用广和通L610模块搭配RT-Thread操作系统连接onenet云
  11. 泰山OFFICE技术讲座:标点关系穷举研究-05
  12. ogm 算法_如何在Windows Vista中播放.OGM视频文件
  13. 【阅读笔记】联邦学习实战——联邦学习攻防实战
  14. BZOJ1067降雨量
  15. 工业设备刀具检测常用特征值提取方法及决策方法
  16. Redis( 缓存篇 ==> 互斥锁解决缓存击穿
  17. microbit开发环境搭建
  18. 【无2021年煤矿采煤机(掘进机)操作考试技巧及煤矿采煤机(掘进机)操作模拟考试题
  19. 农村养老保险系统Mysql_2020年农村养老保险管理系统(在线查询)
  20. 源表的原理以及操作方法和远程控制方法

热门文章

  1. 8、linux上安装hbase
  2. 【iOS开发每日小笔记(一)】UIPickerView 自动选择某个component的某个row
  3. eclipse启动tomcat不能正常访问问题
  4. JS 三级联动 下拉列表
  5. PHP起点 - 运算符
  6. ionic2开发的仿外卖点餐系统(Ionic2+Angular2
  7. RUNOOB python练习题4
  8. RUNOOB python练习题1
  9. python-windows安装相关问题
  10. 230. Kth Smallest Element in a BST