本文主要介绍数组常见的遍历方法:forEach、map、filter、find、every、some、reduce,它们都有个共同点:不会改变原始数组。

接下来都是使用底下的基础数组来实现一些方法:

  • 累加
  • 比大小
  • 分别运算
  • 查找特定值等
let people = [
{
name: '马云',
money: 2000
},
{
name: '马化腾',
money: 1800
},
{
name: '李彦宏',
money: 1500
},
{
name: '我',
money: Infinity
}
];

forEach:遍历数组

forEach与另外几种方法有些许不同,就是除了forEach以外的几个方法都会返回值,如果在等号的左方放一个变量,那么此变量返回值将会是undefined(没有返回任何值)。

var forEachLoop = people.forEach( function ( item, index, array ) {
console .log(item, index, array); //(对象,索引,全部数组)
});
console .log(forEachLoop); // undefined

其它的方法都会返回一个值或数组,以此来说就会传回原本的数组值。

var mapLoop = people.map( function ( item, index, array ) {
return item
});
console .log(mapLoop); //与原本数组资料相同

map:一一映射另一个数组

map会return返回的对象、值,作用上是用来处理数组返回新值产生一个新数组,要特别注意返回的值数量与原始数组长度相同,所以如果不给return,默认返回undefined

// 没有给return 也会产生undefined
var mapEmpty = people.map( function ( item, index, array ) {
});
console .log(mapEmpty); // [undefined, undefined, undefined, undefined]

var everyoneAdd = people.map( function ( item, index, array ) {
item.money = item.money + 500 ; //每个money + 500
return item; //返回对象
});
console .log(everyoneAdd); // 返回每个处理后的数值,不过记得这是传参考特性,会影响到原始的对象
// {name: "马云", money: 2500}
// {name: "马化腾", money: 2300}
// {name: "李彦宏", money: 2000}
// {name: "我", money: Infinity}

var mapMoneyThan1500 = people.map( function ( item, index, array ) {
// 错误示范,长度不符合时
if (item.money > 1500 ) {
return item; //取得大于1500
}
});
console .log(mapMoneyThan1500);
// [{name: "马云", money: 2000}, {name: "马化腾", money: 1800}, undefined, {name: "我", money: Infinity} ]

filter:过滤掉数组中符合条件的元素

filter() 检测数值元素,并返回符合条件所有元素的数组。 filter() 不会改变原始数组。

// filter
var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty); // 没有给条件,会是一个空数组

var filterMoneyThan1500 = people.filter(function(item, index, array){
return item.money > 1500; // 取得大于1500
});
console.log(filterMoneyThan1500); // 马云,马化腾,我 这三个对象

find:返回符合条件的数组的第一个元素的值

find是用来查找数组中符合条件的对象,且仅能有一个,当返回的true数量超过两个以上时,那会以第一个为优先,通常会用来查找特定 id。如果没有符合条件的对象,则返回undefined

var findEmpty = people.find(function(item, index, array){
});
console.log(findEmpty); // 没有条件,会是 undefined

var findMoneyThan1500 = people.find(function(item, index, array){
return item.money > 1500; // 取得大于1500
});
console.log(findMoneyThan1500); // 虽然满足条件的有3个,但只会返回 '马云' 这一个对象

var findMe = people.find(function(item, index, array){
return item.name === '我'; // 找到我
});
console.log(findMe); // 我 这一对象

every:验证数组中是否每个元素都满足指定的条件

验证全部的结果,当全部的值都为 true 时,则最终会得到 true;只要其中之一为 false,则返回 false

var ans = people.every(function(item, index, array){
return item.money > 1800;
});
console.log(ans); // false: 只要有部分不符合,则为 false

var ans2 = people.every(function(item, index, array){
return item.money > 500;
});
console.log(ans2); // true: 大家钱都超过 500

some:验证数组中是否有元素满足指定的条件

与前者类似,但只要部分为 true,则返回 true;全部为 false 时返回值才会为 false

var ans = people.some(function(item, index, array){
return item.money > 1800;
});
console.log(ans); // true: 只要有部分符合,则为 true

var ans2 = people.some(function(item, index, array){
return item.money < 500;
});
console.log(ans2); // false: 大家钱都不少于 500

reduce:将数组合成一个值

reduce是其中最为特殊的,首先他返回的参数与之前的不同,它会接收到前一个返回的值供下一个对象使用,很适合用在累加与对比上,返回的可以是数字也可以是数组。

  • accumulator: 前一个参数,如果是第一个数组的话,值是以另外传入或初始化的值
  • currentValue: 当前值
  • currentIndex: 当前索引
  • array: 全部数组
var reduceEmpty = people.reduce(function(accumulator, currentValue, currentIndex, array){
});
console.log(reduceEmpty); // 沒有条件,会是 undefined

可以通过与前一个相加的方式,累加数组中所有的值。

people.pop(); // 我的钱深不可测,先移除掉
var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){
// 分別是前一个返回值, 当前值, 当前索引值
console.log(accumulator, currentValue, currentIndex);
return accumulator + currentValue.money; // 与前一个值相加
}, 0); // 传入初始化值为 0
console.log(reducePlus); // 总和为 5300

也可以相互对比,取出最高的值。

var reduceBestOne = people.reduce(function(accumulator, currentValue, currentIndex, array){
console.log('reduce', accumulator, currentValue, currentIndex)
return Math.max(accumulator, currentValue.money); // 与前一个值比较哪个更大
}, 0);
console.log(reduceBestOne); // 最大值为 2000

reduce功能很强大,其余几种遍历方法可以用reduce方法来代替,这里只列出map被reduce代替的例子。

//map方法
var mapMoneyDouble = people.map( function ( item, index, array ) {
return item.money*2; //钱翻倍
});
console .log(mapMoneyDouble); // 4000, 3600, 3000, Infinity

//reduce方法实现同样的功能
var reduceMoneyDouble = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { //钱翻倍
accumulator.push(currentValue.money*2); //钱翻倍
return accumulator
},[]);
console .log(reduceMoneyDouble); // 4000, 3600, 3000, Infinity

如果觉得文章对你有些许帮助,欢迎在我的GitHub博客点赞和关注,感激不尽!



JavaScript      JavaScript 数组

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!