2021 年前端工程師必須掌握的 JavaScript 數(shù)組方法
在 JavaScript 中，數(shù)組是一個(gè)特殊的數(shù)據(jù)結(jié)構(gòu)，可以用來(lái)存儲(chǔ)不同類型的元素。作為我們開發(fā)人員使用最頻繁的數(shù)據(jù)結(jié)構(gòu)之一，本文介紹一些你可能不太了解但又必須掌握的數(shù)組內(nèi)置方法，幫助你提升開發(fā)效率，快速完成數(shù)據(jù)處理。
concat()
此方法用于連接兩個(gè)或多個(gè)數(shù)組，它不會(huì)改變現(xiàn)有的數(shù)組，返回的是多個(gè)數(shù)組連接后一個(gè)新數(shù)組。
const myArray = [1, 2, 3, 4, 5];
const myArray2 = [10, 20, 30, 40, 50];
myArray.concat(myArray2);
// -------> 輸出：[1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
from()
from() 方法用于通過擁有 length 屬性的對(duì)象或可迭代的對(duì)象來(lái)返回一個(gè)數(shù)組。如果對(duì)象是數(shù)組返回 true，否則返回 false。
用法：
Array.from(object, mapFunction, thisValue)
object 要轉(zhuǎn)換為數(shù)組的對(duì)象（必需）
mapFunction 數(shù)組中每個(gè)元素要調(diào)用的函數(shù)（可選）
thisValue 映射函數(shù)(mapFunction)中的 this 對(duì)象（可選）
const myString = "XPOET";
Array.from(myString);
// -------> 輸出：["X", "P", "O", "E", "T"]
const mySet = new Set(["a", "a", "b", "c"]);
Array.from(mySet);
// -------> 輸出：["a", "b", "c"]
Array.from([1, 2, 3], (x) => x * 10);
// -------> 輸出：[10, 20, 30]
reverse()
此方法用于反轉(zhuǎn)數(shù)組中元素的順序，使第一個(gè)元素成為最后一個(gè)，最后一個(gè)元素成為第一個(gè)。
const myArray = ["e", "d", "c", "b", "a"];
myArray.reverse();
// -------> 輸出：["a", "b", "c", "d", "e"]
forEach()
此方法用于循環(huán)遍歷數(shù)組中的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。
forEach()對(duì)空數(shù)組不執(zhí)行。
const myArray = [
{ id: 1, name: "Job" },
{ id: 2, name: "Alan" },
{ id: 3, name: "Lily" },
];
myArray.forEach((element) => console.log(element.name));
// -------> 輸出：Job
// Alan
// Lily
find()
在數(shù)組中查找并返回符合條件的元素。如果符合條件的元素有多個(gè)，那么只返回第一個(gè)元素。如果沒有符合條件的元素，則返回 undefined。
find()對(duì)空數(shù)組不執(zhí)行；不改變數(shù)組的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
];
myArray.find((element) => element.id === 2);
// -------> 輸出：{id: 3, name: "Ali"}
myArray.find((element) => element.id === 5);
// -------> 輸出：undefined
findIndex()
在數(shù)組中查找并返回符合條件的元素的索引（index）。如果符合條件的元素有多個(gè)，那么只返回第一個(gè)元素的索引（index）。如果沒有符合條件的元素，則返回 -1。
findIndex()對(duì)空數(shù)組不執(zhí)行；不會(huì)改變數(shù)組的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
];
myArray.findIndex((element) => element.id === 3);
// -------> 輸出：2
myArray.findIndex((element) => element.id === 7);
// -------> 輸出：-1
filter()
在數(shù)組中過濾出符合條件的所有元素，并返回一個(gè)新數(shù)組。如果數(shù)組中沒有符合條件的元素，則返回一個(gè)空數(shù)組。
filter()不改變數(shù)組的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
{ id: 4, name: "Mass" },
];
myArray.filter((element) => element.name === "Mass");
// -------> 輸出：[{id: 3, name: "Mass"}, {id: 4, name: "Mass"}]
includes()
此方法用于判斷數(shù)組中是否包含指定的值，如果有返回 true，否則返回 false。
const myArray = ["A", "B", "C", 1, 2, 3, 4, 5];
myArray.includes(3);
// -------> 輸出：true
myArray.includes(8);
// -------> 輸出：false
myArray.includes("A");
// -------> 輸出：true
some()
在數(shù)組內(nèi)判斷是否有符合條件的元素，只要有一個(gè)元素符合條件，則返回 true，否則返回 false。
some()對(duì)空數(shù)組不執(zhí)行；不改變數(shù)組的原始值。
const myArray = ["a", "b", "c", "d", "e"];
myArray.some((item) => item === "d");
// -------> 輸出：true
myArray.some((item) => item === "h");
// -------> 輸出：false
every()
在數(shù)組內(nèi)判斷每一個(gè)元素是否都符合匹配條件，如果是，返回true，反之則返回 false。
const myArray = ["a", "b", "c", "d", "e"];
myArray.every((item) => item === "d");
// -------> 輸出：false
const myArray2 = ["a", "a", "a", "a", "a"];
myArray2.every((item) => item === "a");
// -------> 輸出：true
sort()
此方法對(duì)數(shù)組內(nèi)的元素進(jìn)行排序，并返回排序后的新數(shù)組。
const myArray = [5, 4, 3, 2, 1];
// 升序
myArray.sort((a, b) => a - b);
// -------> 輸出：[1, 2, 3, 4, 5]
// 降序
myArray.sort((a, b) => b - a);
// -------> 輸出：[5, 4, 3, 2, 1]
map()
循環(huán)遍歷數(shù)組中的每一個(gè)元素，并返回一個(gè)新數(shù)組，新數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
map()對(duì)空數(shù)組不執(zhí)行；不會(huì)改變?cè)紨?shù)組。
const myArray = [5, 4, 3, 2, 1];
myArray.map((x) => x * x);
// -------> 輸出：[25, 16, 9, 4, 1]
fill()
此方法用于把一個(gè)固定值來(lái)替換數(shù)組中的元素（固定值可以是字母、數(shù)字、字符串、數(shù)組等等），并返回替換后的新數(shù)組。
語(yǔ)法：
fill(value, start, end)
value 參數(shù) 1 ：固定值
start 參數(shù) 2：開始替換的索引
end 參數(shù) 3：結(jié)束替換的索引
const myArray = [1, 2, 3, 4, 5];
myArray.fill("A", 1, 3);
// -------> 輸出：[1, "A", "A", 4, 5]
reduce()
reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。
語(yǔ)法：
reduce(function(total, currentValue, currentIndex, array), initialValue)
total 初始值，或者計(jì)算結(jié)束后的返回值（必需）
currentValue 當(dāng)前元素（必需）
currentIndex 當(dāng)前元素的索引（可選）
array 當(dāng)前元素所屬的數(shù)組對(duì)象（可選）
const myArray = [1, 2, 3, 4, 5];
myArray.reduce((total, value) => total * value);
// 1 * 2 * 3 * 4 * 5
// -------> 輸出：120
flat()
flat() 方法用于數(shù)組扁平化處理，即把數(shù)組中多維數(shù)組降維，最后返回降維后新數(shù)組。
用法：
flat(depth)
depth 表示要降維的深度(可選，默認(rèn)為 1)
const myArray = [1, 2, [3, 4, 5, ["A", "B", "C"]]];
myArray.flat();
// -------> 輸出：[[1, 2, 3, 4, 5, ["A", "B", "C"]]
myArray.flat(2);
// -------> 輸出：[1, 2, 3, 4, 5, "A", "B", "C"]
flatMap()
該方法將函數(shù)應(yīng)用于數(shù)組的每個(gè)元素，然后將結(jié)果壓縮為一個(gè)新數(shù)組。該方法結(jié)合了 flat() 和 map()。
const myArray = [[1], [2], [3], [4], [5]];
myArray.flatMap((arr) => arr * 10);
// -------> 輸出：[10, 20, 30, 40, 50]
// 等同于：
myArray.flat().map((arr) => arr * 10);
// -------> 輸出：[10, 20, 30, 40, 50]