- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
目录
for循环for...of最慢forEach[] => undefinedwhile循环map[] => []filter[] => []every[] => Booleansome[] => BooleanreducereduceRight[] => *- 常用遍历的终止、性能表格对比
注意: [] => [] 表示 输入 输出
注意 :[] => * * 表示任何类型
一 for循环
var arr = [1,2,3,4,5];
for(let i=0; i< arr.length; i++){
console.log(arr[i])
}
// 1 2 3 4 5
以上为例来讲下普通for循环的执行过程：
① 执行let i = 0
② 判断i是否小于arr.length；满足条件返回true，不满足条件返回false，如果为true，循环结束，如果为false，执行循环体中语句
③ 执行循环体语句后，执行i++
④ 重复以上②③两个步骤，直到满足条件循环结束
普通for循环可以通过变量i来遍历获取数组中对应下标的数组成员
二 for...of [] => undefined
for-of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。只要是一个iterable的对象,就可以通过for-of来迭代.
1) break in for...of
var arr = [1,2,3,4,5];
for(let item of arr){
//console.log(item) // 1 2 3 4
if(item===4){break;}
console.log(item) // 1 2 3
}
2) continue in for...of
var arr = [1,2,3,4,5];
for(let item of arr){
console.log(item) // 1 2 3 4 5
if(item===4){continue;}
//console.log(item) // 1 2 3 5
}
三 forEach [] => undefined
forEach是一个数组方法，可以用来把一个函数套用在一个数组中的每个元素上
var arr = [1,2,3,4,5];
let res = arr.forEach((item,index,self)=>{
console.log(item,index,self);
})
console.log('res',res); // res undefined
// 1 2 3 4 5 ......
四 while循环
while循环是一直重复判断，当()中的表达式结果转成boolean值,当值为真时，执行{}里面的代码内容，当转成boolean值为假时，while循环结束
var arr=[1,2,3,4,5];
let i=0;
while(i<arr.length){
console.log(arr[i]);
i++;
}
// 1 2 3 4 5
五 map [] => []
map接受的参数跟forEach一模一样，第一个参数是回调函数，第二个是this指向，而且回调函数中的参数也是一样。
正常情况下，
map需要配合return，返回是一个新的数组；若是没有return，用法相当于forEach,map常常用于重新整理数组里头的数据结构
var arr=[1,2,3,4,5];
let obj = {a:1}
let res = arr.map(function(item,index,self){
// console.log(item,index,self)
console.log(this.a); // 1
return item+1;
},obj)
console.log(res);
// [2, 3, 4, 5, 6]
六 filter [] => []
filter传参跟forEach也是一致，第一个参数是回调函数，第二个是this指向，回调函数的参数也是value、index、array。
filter是用于过滤一些不合格“元素”， 如果回调函数返回true，该元素保存到新数组当中,不改变原始数据,返回一个新数组.
var arr=[1,2,3,4,5];
let obj = {a:1}
let res = arr.filter(function(item,index,self){
console.log(this.a); // 1
return item>3; // 不加return filter的`返回值为空数组`
},obj)
console.log(res);
// [4, 5]
七 every [] => Boolean
跟
some类似，但不同的是some只需要某一个元素满足条件就返回true，而every是需要数组中所有元素都满足条件才返回true
var arr=[1,2,3,4,5];
let obj = {a:1}
let res = arr.every(function(item,index,self){
console.log(this.a); // 1
return item>0; // 不加return `every` 的`返回值有问题一直是false`
},obj)
console.log(res);
// true
八 some [] => Boolean
some传参跟forEach也是一致，第一个参数是回调函数，第二个是this指向，回调函数的参数也是value、index、array。
some用于表示查找，只要数组里面某个元素符合条件，结果就返回true，否则false
var arr=[1,2,3,4,5];
let obj = {a:1}
let res = arr.some(function(item,index,self){
console.log(this.a); // 1
return item>4; // 不加return filter的`返回值为空数组`
},obj)
console.log(res);
// true
九 reduce reduceRight [] => *
reduce
左->右
var arr=[1,2,3];
let obj = {a:1}
let res = arr.reduce(function(prev,item,index,self){
return prev-item; // 不加return reduce返回undefined
},0)
console.log(res);
// -6
reduceRight
右->左
var arr=[1,2,3];
let obj = {a:1}
let res = arr.reduceRight(function(prev,item,index,self){
return item-prev; // 不加return reduce返回undefined
},0)
console.log(res);
// 2
reduceRight 执行过程
0
0-3
2--3 // 2+3
5-2
3-1
2
reduce reduceRight 非常强大,之前实现pipe compose 就是通过他两实现的. 他两的功能非常强大
可参考,我之前的文章 [前端面试题] reduce高级用法
十 常用遍历的终止、性能表格对比
var list = Array(100000).fill(1)
console.time('for');
for (let index = 0, len = list.length; index < len; index++) {
}
console.timeEnd('for');
console.time('every');
list.every(() => { return true })
console.timeEnd('every')
console.time('some');
list.some(() => { return false })
console.timeEnd('some')
console.time('foreach');
list.forEach(() => {})
console.timeEnd('foreach');
console.time('map');
list.map(() => {})
console.timeEnd('map');
console.time('forof');
for (let index of list) {
}
console.timeEnd('forof')
我的浏览器版本
我的电脑配置 MAC 8G M1
多次执行比较平衡的结果
我多次执行的速度从快到慢: some > every > forEach > map > for > for...of
| 是否可终止 | ||||
|---|---|---|---|---|
| **** | break | continue | return | 性能（ms） |
| for | 终止 ✅ | 跳出本次循环 ✅ | ❌ | 2.8 |
| forEach | ❌ | ❌ | ❌ | 2.15 |
| map | ❌ | ❌ | ❌ | 2.41 |
| for of | 终止 ✅ | 跳出本次循环 ✅ | ❌ | 6.48 |
| some | ❌ | ❌ | return true ✅ | 2.10 |
| every | ❌ | ❌ | return false ✅ | 2.12 |
附图
来于互联网,nice~~~
参考
总结
- 注意,在
filtermapeverysome中return很重要. 并且都支持 第一个参数是回调函数，第二个是this指向. 不像forEach返回undefined的. - 我多次执行的速度从快到慢:
some > every > forEach > map > for > for...of难道不应该是for最快吗?JS v8优化了,还是? - 不过可以 肯定
for ... of 是最慢的!
