简述
本文除去一些常见遍历数组方法,如:for...in , for...of;
汇总部分比较实用的数组方法:
- map
- filter
- forEach
- some
- every
- findIndex
- reduce
图示
简单用图示来理解他们的作用:
具体用法(参数)
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]