JavaScript 中常用数组迭代方法

148 阅读5分钟

简述

本文除去一些常见遍历数组方法,如:for...in , for...of;

汇总部分比较实用的数组方法:

  • map
  • filter
  • forEach
  • some
  • every
  • findIndex
  • reduce

图示

简单用图示来理解他们的作用:

image.png

具体用法(参数)

map

作用(场景):对数组的每一个元素进行映射处理,得到一个全新的数组

语法:

var new_array = arr.map(function callback(item[, index[, arr]]) {
 // Return element for new_array 
}[, thisArg])

参数:

  • callback:生成新数组元素的函数,使用三个参数:
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):map 方法调用的数组
  • thisArg (可选):执行 callback 时使用的 this 值。

返回值:

  • 一个由原数组每个元素执行回调函数的结果组成的新数组。

map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles数组的值为: [2, 8, 18]
// numbers数组未被修改: [1, 4, 9]

filter

作用(场景):判断数组中是否所有的元素都满足条件(开关法)

语法:

var newArray = arr.filter(callback(item[, index[, arr]])[, thisArg])

参数:

  • callback:用来测试每个item,三个参数
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):调用了 filter 的数组本身。
  • thisArg (可选):执行 callback 时使用的 this 值。

返回值:

  • 一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

filter 不会改变原数组,它返回过滤后的新数组。

var filtered = [12, 5, 8, 130, 44].filter(item => { item >= 10 });

// filtered is [12, 130, 44]

forEach

作用(场景):遍历数组

语法:

var newArray = arr.filter(callback(item[, index[, arr]])[, thisArg])

参数:

  • callback:用来测试每个item,三个参数
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):被遍历的数组
  • thisArg (可选):执行 callback 时使用的 this 值。

返回值:

  • 它总是返回 undefined 值,并且不可链式调用

不会改变原数组。与map类似,返回值不同。


some

作用(场景):判断数组中是否有满足条件元素(判断数组中有没有负数)

语法:arr . some ( callback ( item , index , arr ) , thisArg)

参数:

  • callback:用来测试每个item,三个参数
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):被遍历的数组
  • thisArg (可选):执行 callback 时使用的 this 值。
    • 在非严格模式下为全局对象window,在严格模式下传入 undefined

返回值:

  • 数组中至少一个元素通过回调函数的测试就会返回true;
  • 所有元素都没有通过回调函数的测试返回值才会为false。

some() 被调用时不会改变数组。

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

every

作用(场景):判断数组中是否所有的元素都满足条件(开关法)

语法:

arr .  every ( callback ( item , index , arr ) , thisArg)

参数:

  • callback:用来测试每个item,三个参数
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):被遍历的数组
  • thisArg (可选):执行 callback 时使用的 this 值。

返回值:

  • 如果回调函数的每一次返回都为 truthy 值,返回 true ,否则返回 false。

every 不会改变原数组。

若传入一个空数组,无论如何都会返回 true。

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

findindex

作用(场景):获取某个元素的下标

语法:

arr . findIndex  ( callback ( item , index , arr ) , thisArg)

参数:

  • callback:用来测试每个item,三个参数
    • item:正在处理的元素
    • index(可选):正在处理元素的索引
    • arr(可选):被遍历的数组
  • thisArg (可选):执行 callback 时使用的 this 值。

返回值:

  • 数组中通过提供测试函数的第一个元素的索引。否则,返回-1

findIndex不会修改所调用的数组。

找到符合条件立即结束循环返回下标,后面不找

与indexof类似,但是findIndex一般用于对象数组

[{id:1,name:"qq",age:11},{id:2,name:"ww",age:22},{id:3,name:"ee",age:33}]
.findIndex(item => item.id == 3); // 2

reduce

作用(场景):给每一个元素执行一次回调

语法 :

arr.reduce( callback( sum,item,index ),initialValue )

参数:

  • callback:执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数
    • sum:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue
    • item:当前值
    • index(可选):当前索引
    • arr(可选):调用reduce()的数组
  • initialValue(可选):作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值:

  • 函数累计处理的结果。

如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。

如果提供initialValue,从索引0开始。

由reduce返回的值将是最后一次回调返回值

[1,2,3,4,5].reduce((sum,item) => sum+=item ,0); //15
//找最大值
arr.reduce( (sum,item)=>sum>item.age?sum:item.age ,0)
//用 reduce 数组去重
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]