- 小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
目录
for循环
for...of
最慢
forEach
[] => undefined
while循环
map
[] => []
filter
[] => []
every
[] => Boolean
some
[] => Boolean
reduce
reduceRight
[] => *
- 常用遍历的终止、性能表格对比
注意: [] => []
表示 输入 输出
注意 :[] => *
* 表示任何类型
一 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~~~
参考
总结
- 注意,在
filter
map
every
some
中return
很重要. 并且都支持 第一个参数是回调函数,第二个是this
指向. 不像forEach返回undefined
的. - 我多次执行的速度从快到慢:
some > every > forEach > map > for > for...of
难道不应该是for最快吗?JS v8优化了,还是?
- 不过可以 肯定
for ... of 是最慢的!