更新時(shí)間:2020-10-16 17:24:38 來源:動(dòng)力節(jié)點(diǎn) 瀏覽5074次
數(shù)組遍歷一直是數(shù)組中的重點(diǎn)知識(shí),數(shù)組(Array)作為有序的元素序列,數(shù)組的遍歷也是有方法的。本文就主要向大家介紹7種常見數(shù)組遍歷方法:forEach、map、filter、find、every、some、reduce,它們有個(gè)共同點(diǎn):不會(huì)改變?cè)紨?shù)組。
接下來都是使用底下的基礎(chǔ)數(shù)組來實(shí)現(xiàn)一些方法:
let people = [
{
name: '阿飛',
money: 2000
},
{
name: '阿雷',
money: 1800
},
{
name: '阿麗',
money: 1500
},
{
name: '我',
money: Infinity
}
];
1.forEach:遍歷數(shù)組
forEach與另外幾種方法有些許不同,就是除了forEach以外的幾個(gè)方法都會(huì)返回值,如果在等號(hào)的左方放一個(gè)變量,那么此變量返回值將會(huì)是undefined(沒有返回任何值)。
var forEachLoop = people.forEach( function ( item, index, array ) {
console .log(item, index, array); //(對(duì)象,索引,全部數(shù)組)
});
console .log(forEachLoop); // undefined
其它的方法都會(huì)返回一個(gè)值或數(shù)組,以此來說就會(huì)傳回原本的數(shù)組值。
var mapLoop = people.map( function ( item, index, array ) {
return item
});
console .log(mapLoop); //與原本數(shù)組資料相同
2.map:一一映射另一個(gè)數(shù)組
map會(huì)return返回的對(duì)象、值,作用上是用來處理數(shù)組返回新值產(chǎn)生一個(gè)新數(shù)組,要特別注意返回的值數(shù)量與原始數(shù)組長(zhǎng)度相同,所以如果不給return,默認(rèn)返回undefined。
// 沒有給return 也會(huì)產(chǎn)生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 ; //每個(gè)money + 500
return item; //返回對(duì)象
});
console .log(everyoneAdd); // 返回每個(gè)處理后的數(shù)值,不過記得這是傳參考特性,會(huì)影響到原始的對(duì)象
// {name: "阿飛", money: 2500}
// {name: "阿雷", money: 2300}
// {name: "阿麗", money: 2000}
// {name: "我", money: Infinity}
var mapMoneyThan1500 = people.map( function ( item, index, array ) {
// 錯(cuò)誤示范,長(zhǎng)度不符合時(shí)
if (item.money > 1500 ) {
return item; //取得大于1500
}
});
console .log(mapMoneyThan1500);
// [{name: "阿飛", money: 2000}, {name: "阿雷", money: 1800}, undefined, {name: "我", money: Infinity} ]
3.filter:過濾掉數(shù)組中符合條件的元素
filter() 檢測(cè)數(shù)值元素,并返回符合條件所有元素的數(shù)組。 filter() 不會(huì)改變?cè)紨?shù)組。
// filter
var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty); // 沒有給條件,會(huì)是一個(gè)空數(shù)組
var filterMoneyThan1500 = people.filter(function(item, index, array){
return item.money > 1500; // 取得大于1500
});
console.log(filterMoneyThan1500); // 阿飛,阿雷,我 這三個(gè)對(duì)象
4.find:返回符合條件的數(shù)組的第一個(gè)元素的值
find是用來查找數(shù)組中符合條件的對(duì)象,且僅能有一個(gè),當(dāng)返回的true數(shù)量超過兩個(gè)以上時(shí),那會(huì)以第一個(gè)為優(yōu)先,通常會(huì)用來查找特定 id。如果沒有符合條件的對(duì)象,則返回undefined。
var findEmpty = people.find(function(item, index, array){
});
console.log(findEmpty); // 沒有條件,會(huì)是 undefined
var findMoneyThan1500 = people.find(function(item, index, array){
return item.money > 1500; // 取得大于1500
});
console.log(findMoneyThan1500); // 雖然滿足條件的有3個(gè),但只會(huì)返回 '阿飛' 這一個(gè)對(duì)象
var findMe = people.find(function(item, index, array){
return item.name === '我'; // 找到我
});
console.log(findMe); // 我 這一對(duì)象
5.every:驗(yàn)證數(shù)組中是否每個(gè)元素都滿足指定的條件
驗(yàn)證全部的結(jié)果,當(dāng)全部的值都為 true 時(shí),則最終會(huì)得到 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:驗(yàn)證數(shù)組中是否有元素滿足指定的條件
與前者類似,但只要部分為 true,則返回 true;全部為 false 時(shí)返回值才會(huì)為 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:將數(shù)組合成一個(gè)值
reduce是其中最為特殊的,首先他返回的參數(shù)與之前的不同,它會(huì)接收到前一個(gè)返回的值供下一個(gè)對(duì)象使用,很適合用在累加與對(duì)比上,返回的可以是數(shù)字也可以是數(shù)組。
accumulator: 前一個(gè)參數(shù),如果是第一個(gè)數(shù)組的話,值是以另外傳入或初始化的值
currentValue: 當(dāng)前值
currentIndex: 當(dāng)前索引
array: 全部數(shù)組
var reduceEmpty = people.reduce(function(accumulator, currentValue, currentIndex, array){
});
console.log(reduceEmpty); // 沒有條件,會(huì)是 undefined
可以通過與前一個(gè)相加的方式,累加數(shù)組中所有的值。
people.pop(); // 我的錢深不可測(cè),先移除掉
var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){
// 分別是前一個(gè)返回值, 當(dāng)前值, 當(dāng)前索引值
console.log(accumulator, currentValue, currentIndex);
return accumulator + currentValue.money; // 與前一個(gè)值相加
}, 0); // 傳入初始化值為 0
console.log(reducePlus); // 總和為 5300
也可以相互對(duì)比,取出最高的值。
var reduceBestOne = people.reduce(function(accumulator, currentValue, currentIndex, array){
console.log('reduce', accumulator, currentValue, currentIndex
return Math.max(accumulator, currentValue.money); // 與前一個(gè)值比較哪個(gè)更大
}, 0);
console.log(reduceBestOne); // 最大值為 2000
reduce功能很強(qiáng)大,其余幾種遍歷方法可以用reduce方法來代替,這里只列出map被reduce代替的例子。
//map方法
var mapMoneyDouble = people.map( function ( item, index, array )
return item.money*2; //錢翻倍
});
console .log(mapMoneyDouble); // 4000, 3600, 3000, Infinity
//reduce方法實(shí)現(xiàn)同樣的功能
var reduceMoneyDouble = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { //錢翻倍
accumulator.push(currentValue.money*2); //錢翻倍
return accumulator
},[]);
console .log(reduceMoneyDouble); // 4000, 3600, 3000, Infinity
以上就是常見的7種數(shù)組遍歷方法,并且每種數(shù)組遍歷方法都為大家給出了實(shí)例。數(shù)組在Java基礎(chǔ)知識(shí)中也是非常重要的,只有學(xué)好了數(shù)組我們才能更好地處理Java中的數(shù)據(jù)。對(duì)于這些Java基礎(chǔ)知識(shí),本站的Java基礎(chǔ)教程中有著很好的講解,通俗易懂的同時(shí)還能輕松掌握重難點(diǎn)知識(shí)。
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
有基礎(chǔ) 直達(dá)就業(yè)
業(yè)余時(shí)間 高薪轉(zhuǎn)行
工作1~3年,加薪神器
工作3~5年,晉升架構(gòu)
提交申請(qǐng)后,顧問老師會(huì)電話與您溝通安排學(xué)習(xí)
初級(jí) 202925
初級(jí) 203221
初級(jí) 202629
初級(jí) 203743