浅谈数组常见遍历方法

本文主要介绍数组常见遍历方法：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 + 500return 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);          // 没有条件，会是 undefinedvar 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: 只要有部分不符合，则为 falsevar 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: 只要有部分符合，则为 truevar 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博客点赞和关注，感激不尽！