更新時間:2020-10-16 17:24:38 來源:動力節點 瀏覽5059次
數組遍歷一直是數組中的重點知識,數組(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基礎教程中有著很好的講解,通俗易懂的同時還能輕松掌握重難點知識。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習