7种常见数组遍历方法 - 极悦
首页 课程 师资 教程 报名

7种常见数组遍历方法

  • 2020-10-16 17:24:38
  • 4915次 极悦

数组遍历一直是数组中的重点知识,数组(Array)作为有序的元素序列,数组的遍历也是有方法的。本文就主要向大家介绍7种常见数组遍历方法:forEach、map、filter、find、every、some、reduce,它们有个共同点:不会改变原始数组。

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

  • 累加
  • 比大小
  • 分别运算
  • 查找特定值等
let people = [
{

name: '阿飞',
money: 2000
},
{

name: '阿雷',
money: 1800
},
{

name: '阿丽',
money: 1500
},
{

name: '我',
money: Infinity
}
];

1.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); //与原本数组资料相同

2.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} ]

3.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); // 阿飞,阿雷,我 这三个对象

4.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); // 我 这一对象

5.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

6.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

7.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

以上就是常见的7种数组遍历方法,并且每种数组遍历方法都为大家给出了实例。数组在Java基础知识中也是非常重要的,只有学好了数组我们才能更好地处理Java中的数据。对于这些Java基础知识,本站的Java基础教程中有着很好的讲解,通俗易懂的同时还能轻松掌握重难点知识。

选你想看

你适合学Java吗?4大专业测评方法

代码逻辑 吸收能力 技术学习能力 综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学
姓名
手机
提交