[JS基础回顾] 数组遍历的 10 种方法 ~~~

397 阅读4分钟

目录

  1. for循环
  2. for...of 最慢
  3. forEach [] => undefined
  4. while循环
  5. map [] => []
  6. filter [] => []
  7. every [] => Boolean
  8. some [] => Boolean
  9. reduce reduceRight [] => *
  10. 常用遍历的终止、性能表格对比

注意: [] => [] 表示 输入 输出
注意 :[] => * * 表示任何类型

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]

image.png

filter [] => []

filter传参跟forEach也是一致,第一个参数是回调函数,第二个是this指向,回调函数的参数也是valueindexarray

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指向,回调函数的参数也是valueindexarray

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')


我的浏览器版本

image.png 我的电脑配置 MAC 8G M1

多次执行比较平衡的结果 image.png

我多次执行的速度从快到慢: some > every > forEach > map > for > for...of

是否可终止
****breakcontinuereturn性能(ms)
for终止 ✅跳出本次循环 ✅2.8
forEach2.15
map2.41
for of终止 ✅跳出本次循环 ✅6.48
somereturn true ✅2.10
everyreturn false ✅2.12

附图

image.png

来于互联网,nice~~~

参考

总结

  • 注意,在 filter map every somereturn 很重要. 并且都支持 第一个参数是回调函数,第二个是this指向. 不像forEach返回 undefined 的.
  • 我多次执行的速度从快到慢: some > every > forEach > map > for > for...of 难道不应该是for最快吗? JS v8优化了,还是?
  • 不过可以 肯定 for ... of 是最慢的!