JS---遍历数组方法总结

飞飞飞回来
166 阅读6分钟

遍历数组方法

一、数组遍历方法

  1. forEach()
  2. map()
  3. for...of
  4. filter()
  5. some()、 every()
  6. reduce()、 reduceRight()
  7. find()、 findIndex()
  8. keys()、 valus()、 entries()

1.forEach()

forEach()方法用于调用数组的每个元素,并且将元素传递给回调函数. 语法如下:

let arr= [3,2,3,4]

arr.forEach((item,idnex)=>{
console.log('遍历结果:',idnex+':'+item)   
})

image.png 返回结果为arr的索引与元素.

⚠️：

  • forEach方法无语遍历对象,只使用数组的遍历
  • forEach方法不会改变元数组.

2.map()

map()方法会返回一个新数组,数组的元素为原始数组调用函数处理后的值. 语法如下:

let arr= [1,2,3,4]

arr.map((item,index)=>{
    item++
    return console.log(index,item)
})

image.png 返回结果 索引+数据

还可以使用链式操作:

let arr=[1,2,3]
arr.map(item=>item+1).map(item=>item+1)  //[3,4,5]

⚠️：

  • map方法不会对空数组进行检测
  • map方法遍历数组时会返回一个新数组，不会改变原始数组
  • map方法有返回值，可以return出来，map的回调函数中支持return返回值
  • map方法无法遍历对象，仅适用于数组的遍历

3.for...of

for...of 语句创建一个循环来迭代可迭代的对象.在ES6中引入的for...of循环,以代替for...in和forEach()并支持新的迭代协议. for...of允许遍历Array(数组), String(字符串), Maps(映射).Sets(集合)等看可以迭代的数据结构. 语法如下:

let a = ['a','b','c']

for(let x of a){
  console.log(x)  // 'a','b','c'
}

⚠️：

  • for...of方法只会遍历当前对象的属性, 不会遍历其原型链上的属性
  • for...of方法适用遍历数组/ 类数组 /字符串 /map/set等拥有迭代器对象的集合
  • for...of方法不支持遍历普通对象,因为没有迭代器对象,如果想遍历一个对象的属性,可以使用for...in方法
  • 可以使用break、continue、return来中断循环遍历

4.filter()

filter()方法用于过滤数组,满足条件的元素会被返回, 它的参数是一个回调函数,所以数组元素依次执行该函数,结果为true的元素会被返回, 如果没有符合条件的元素则返回空数组; 语法如下:

let arr= [22,3,55,66,1,2,3]
let newArr = arr.filter((value,index)=>value> 20) 

console.log(newArr)   // 筛选出数组中大于20的数

image.png 打印结果

也可以使用filter()方法来移除数组中的undefined, null, NaN等值

let arr=[1,undefined,2,null,3,false,'',4,0]
arr.filter(Boolean)

⚠️：

  • filter()- 创建一个新的数组,不会改变原数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素, 主要用于筛选数组
  • filter()方法不会对空数组进行检测
  • filter()方法仅适用于检测数组

5.some() 、 every()

some()方法会对数组的每一项进行遍历,只要有一个元素符合条件,就会返回true,且剩余的元素不会在进行检测。 相反,返回false。

every() 方法也是方法会对数组的每一项进行遍历，但是需要所有元素都符合条件时，才会返回true， 如果数组中检测到一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。 语法如下：

let arr= [22,3,55,66,1,0,3]

console.log(arr.some(item=>item>4))   //true
console.log(arr.every(item=>item>0))  //false

⚠️：

  • 两个方法都不会改变原数组, 返回的是一个布尔值
  • 两个方法都不会对空数组进行检测
  • 两个方法都仅适用于检测数组

6. reduce()、 reduceRight()

reduce()方法会为数组中的每个值(从左到右)开始缩减,最终计算为一个值 reduce()可以作为一个高阶函数，用于函数的compose。 reduce()方法会为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，回调函数接受四个参数：

  • previousValue：上一次调用回调返回的值，或者是提供的初始值(initialValue)
  • currentValue：（数组中当前被处理的元素）
  • currentIndex：（数组中当前被处理的元素）
  • Array（数组中当前被处理的元素）

语法:

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})    
console.log(arr, sum);

打印结果:

image.png

这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

再看第二个例子：

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //设置了arr的初始值为0    
console.log(arr, sum);

打印结果为:

image.png

再再再来一个例子:


let arr=[1,2,3,4]

let sum=arr.reduce((prev,cur,index,arr)=>{

       console.log(prev,cur,index). //5,1,0
                                    //6,2,1
                                    //8,3,2
                                    //11,4,3
       return prev+cur
},5)
console.log(arr,sum) //[1,2,3,4] //15

这个例子index是从0开始的,第一次的prev值是我们设置的初始值0, 数组长度是4. reduce函数循环四次;

结论: 如果我们没有提供初始值,那么reduce会从索引1 开始执行, 如果提供了初始值那么就从初始值开始;

reduceRight()方法和reduce()用法几乎一致，只是该方法是对数组进行倒序遍历的，而reduce()是正序遍历的

et arr=[1,2,3,4]

let sum=arr.reduceRight((prev,cur,index,arr)=>{

       console.log(prev,cur,index) //5,4,3
                                   //9,3,2
                                   //12,2,1
                                   //14,1,0
       return prev+cur
},5)   //从数组最后一个开始
console.log(arr,sum) //[1,2,3,4] //15

⚠️：

  • 两个方法都不会改变原数组;
  • 两个方法如果添加初始值,那就会概念原数组, 会将这个初始值放在数组的第一位
  • 这两个方法对于空数组是不会执行的(会报错..), 但是加了初始值 那么会返回初始值

7. find()、 findIndex()

find()方法通过函数内的判断数的第一个元素值,当数组中的元素测试条件为true时, find()返回符合条件的元素,之后的值不会在调用执行函数, 如果没有符合条件的元素那么返回undefined.

findIndex()方法返回传入一个测试函数符合条件的数组第一个元素的位置(索引).当数组中的元素在函数条件返回true时, findIndex()返回符合条件的元素的索引位置, 之后的值不会再调用执行函数; 语法如下:

let arr = [1,5,3.4]

console.log(arr.find(item=>item>2))  // 5  返回第一个为true的值 
console.log(arr.findIndex(item=>item>2)) // 1 返回第一个为true的索引值

⚠️：

  • findf() 返回的是第一个符合条件的值
  • findIndex() 返回的是第一个符合条件的索引值
  • 两个方法对于空数组、函数是不会执行的
  • 两个发抖不会改变原数组

8. keys()、 values()、 entries()

三个方法都返回一个数组的迭代对象, 对象的内容不太相同

  • keys() 返回的是数组的索引值
  • values() 返回的是数组元素
  • entries() 返回的是数组的键值对

语法:

let arr = ['a','b','c','d','e']
let key = arr.keys()
let value = arr.values()
let array = arr.entries()

for (let item of key){
console.log(item)   // 返回索引值0,1,2,3,4 
}
for (let item of value){
console.log(item)   // 返回数组元素 a,b,c,d,e
}
for (let item of array){
console.log(item)   // 返回索引+数组元素 0,'a'  1,'b'.......
avatar
文章
阅读
粉丝