提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

---

一、Array.map()

作用： 循環(huán)遍歷數(shù)組并修改，在原數(shù)組基礎(chǔ)上返回一個(gè)新的修改版本，原數(shù)組不變。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];let resArr = arr.map(item => {return `大家好，我是${item.name}，我今年${item.age}歲了`
})console.log(resArr);

場(chǎng)景： 想要修改現(xiàn)有數(shù)組的內(nèi)容并將結(jié)果存儲(chǔ)為新變量時(shí)。

二、Array.filter

作用： 根據(jù)特定條件循環(huán)遍歷數(shù)組，檢查數(shù)組的每個(gè)項(xiàng)目是否符合條件，如果符合，則將其返回到新數(shù)組中，原數(shù)組不變。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];let resArr = arr.filter(item => {return item.age <= 18;
})console.log(resArr);

場(chǎng)景： 想要從數(shù)組中刪除不符合特定條件的項(xiàng)目時(shí)。

三、Array.reduce

作用： 接收一個(gè)函數(shù)作為 累加器 ，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終返回一個(gè)值，原數(shù)組不變。

語(yǔ)法： arr.reduce(callback, initialValue)

參數(shù)：

• callback ：回調(diào)函數(shù)，包含如下四個(gè)參數(shù)；
• previousValue： 上一次調(diào)用回調(diào)返回的值，或者是提供的初始值 initialValue；
• currentValue ：數(shù)組中當(dāng)前被處理的元素；
• index ：當(dāng)前元素在數(shù)組中的索引；
• array ：調(diào)用 reduce 的數(shù)組；
• initialValue ：第一次調(diào)用 callback 的第一個(gè)參數(shù)。

示例1：數(shù)組求和

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr.reduce((prev, cur) => {// 第一次： prev = 0// 后面：prev 上一次callback的返回值，如 0+1 ，1+2等...return prev + cur;
}, 0);
console.log(sum);

示例2：展平數(shù)組，將二維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4, 5]];
let resArr = arr.reduce((prev, cur) => {return prev.concat(cur)
}, []);
console.log(resArr);

示例3：展平數(shù)組，將多維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]];// 遞歸思想去判斷cur是否為數(shù)組
const flat = function (arr) {return arr.reduce((prev, cur) => prev.concat(Array.isArray(cur) ? flat(cur) : cur), [])
}console.log(flat(arr));

場(chǎng)景： 想要改變數(shù)組的值將數(shù)組轉(zhuǎn)換為單個(gè)值時(shí)，或?qū)⒍嗑S數(shù)組轉(zhuǎn)化為一維數(shù)組。

四、Array.forEach

作用： 遍歷一個(gè)數(shù)組并在每個(gè)項(xiàng)目上執(zhí)行一個(gè)函數(shù)，非常類似于常規(guī) for 循環(huán)，是一個(gè)經(jīng)典的方法。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];arr.forEach(item => {console.log(`我是${item.name}`);
})

場(chǎng)景： 只想遍歷任何數(shù)組的每個(gè)項(xiàng)目而無需構(gòu)造新數(shù)組時(shí)。

五、Array.find

作用： 與 .filter() 很類似，可以傳入數(shù)組符合條件的判斷，但是 僅返回與提供條件匹配的第一個(gè)元素。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let resItem = arr.find(item => {return item.age <= 18
})console.log(resItem);

場(chǎng)景： 當(dāng)需要獲取通過顯式定義的測(cè)試的數(shù)組的第一項(xiàng)時(shí)。

六、Array.every

作用： 檢查數(shù)組中的每個(gè)元素是否通過提供的條件，如果數(shù)組中的所有元素都符合條件，則該方法將返回 true；如果有一項(xiàng)不符合，則返回 false。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let flag1 = arr.every(item => {return item.age < 19;
})let flag2 = arr.every(item => {return item.age < 20;
})console.log(flag1);  // false:有一項(xiàng)不符合
console.log(flag2);  // true: 全部符合

場(chǎng)景： 想要確認(rèn)數(shù)組的每個(gè)項(xiàng)目是否都通過顯式定義的條件時(shí)。

七、Array.some

作用： 與方法.every()類似，但是不需要數(shù)組中的所有元素都通過測(cè)試，找到成功的數(shù)組元素，即停止并返回 true，否則返回 false。

代碼：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let flag = arr.some(item => {return item.age < 19;
})console.log(flag);  // true

場(chǎng)景： 想要確認(rèn)數(shù)組中是否有存在某個(gè)項(xiàng)目可以通過顯式定義的條件時(shí)。

---

總結(jié)

JavaScript 給我們提供了很多處理數(shù)組的不同方法。使用這些方法，可以代替 for 循環(huán)，將JS開發(fā)技能升級(jí)，并使代碼庫(kù)更具可維護(hù)性。