浅谈数组常见遍历方法

本文主要介绍数组常见遍历方法：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博客点赞和关注，感激涕零！