21個(gè)常用JavaScript 數(shù)組方法使用指南匯總
在 JavaScript 中，數(shù)組是一種特殊類型的對(duì)象，用于存儲(chǔ)和組織多個(gè)值。數(shù)組使您可以將值分組到單個(gè)變量名下，從而方便管理和操作數(shù)據(jù)集合。以下是更詳細(xì)的解釋：
在 JavaScript 中，一對(duì)方括號(hào) [] 表示數(shù)組。數(shù)組中的所有元素都用逗號(hào) , 分隔。
在 JavaScript 中，數(shù)組可以包含任何類型的元素。這意味著您可以創(chuàng)建包含 String、Boolean、Number、Object 甚至其他數(shù)組等類型的元素的數(shù)組。
以下是一個(gè)包含四個(gè)元素的數(shù)組示例：Number、Boolean、String 和 Object。
const mixTypedArray = [ 100 , true , 'javascript' , {}];元素在數(shù)組中的位置稱為其索引。在 JavaScript 中，數(shù)組索引從 0 開(kāi)始，每個(gè)元素遞增 1。
例如，在上面的數(shù)組中，元素 100 位于索引 0，true 位于索引 1，'javascript' 位于索引 2，依此類推。
數(shù)組中元素的數(shù)量決定了其長(zhǎng)度。例如，上述數(shù)組的長(zhǎng)度為 4。
有趣的是，JavaScript 數(shù)組的長(zhǎng)度不是固定的。您可以通過(guò)分配正數(shù)值隨時(shí)更改長(zhǎng)度。我們稍后會(huì)對(duì)此進(jìn)行更多了解。
破壞性數(shù)組方法
破壞性數(shù)組方法會(huì)更改原始數(shù)組并返回修改后的數(shù)組。讓我們探索各種用于操作更改原始數(shù)組的數(shù)組的方法。
添加或刪除數(shù)組的方法
通常需要添加或刪除數(shù)組中的元素。例如，考慮這個(gè)名稱數(shù)組：
let names = ["John Doe", "Jane Doe", "Ann Doe"];您可以使用以下方法之一來(lái)操作此數(shù)組，以從數(shù)組中添加或刪除第一個(gè)、最后一個(gè)或特定元素。
1、pop()
此方法刪除附加的 JavaScript 數(shù)組的最后一個(gè)元素，更改原始數(shù)組，并返回已刪除的元素。
myArray.pop();注意：您不會(huì)將任何內(nèi)容作為參數(shù)傳遞給 pop() 方法。
以下示例展示了如何使用 pop() 方法：
let names = ["John Doe", "Jane Doe", "Ann Doe"];
names.pop(); // "Ann Doe"
console.log(names); // ['John Doe', 'Jane Doe']2、push()
此方法將新元素添加到附加的 JavaScript 數(shù)組的末尾，更改原始數(shù)組，并返回?cái)?shù)組的新長(zhǎng)度。此方法接受您希望添加到數(shù)組末尾的元素作為參數(shù)。
myArray.push(element1, element2, ..., elementX);現(xiàn)在讓我們創(chuàng)建一個(gè)新的分?jǐn)?shù)數(shù)組，然后使用 push() 方法向數(shù)組添加更多分?jǐn)?shù)：
let scores = [12, 55, 78, 95, 33];
scores.push(66, 77); // 7
console.log(scores); // [12, 55, 78, 95, 33, 66, 77]3、shift()
shift() 方法刪除數(shù)組的第一個(gè)元素。它的工作方式與 pop() 方法類似，但不是從末尾刪除，而是從附加數(shù)組的開(kāi)頭刪除。它返回已刪除/已移位的元素。
myArray.shift();現(xiàn)在讓我們創(chuàng)建一個(gè)新的動(dòng)物名稱數(shù)組，然后學(xué)習(xí)如何使用 shift() 方法從數(shù)組中刪除第一個(gè)名稱：
let animalNames = ["Lion", "Dog", "Snake", "Tiger"];
animalNames.shift(); // "Lion"
console.log(animalNames); // ['Dog', 'Snake', 'Tiger']4、unshift()
unshift() 方法的工作方式與 push() 方法類似，因?yàn)樗糜趯⑿略靥砑拥綌?shù)組中，但添加到數(shù)組的開(kāi)頭。此方法將您希望在數(shù)組開(kāi)頭添加的元素作為參數(shù)。它還返回?cái)?shù)組的新長(zhǎng)度。
myArray.unshift(element1, element2, ..., elementX);現(xiàn)在讓我們創(chuàng)建一個(gè)新的食物名稱數(shù)組，然后使用 unshift() 方法向數(shù)組添加更多食物名稱：
let foodNames = ["Salad", "Bread", "Fish", "Rice"];
foodNames.unshift("Pizza", "Cake"); // Returns 6 - the length of the newly changed array
console.log(foodNames); // ['Pizza', 'Cake', 'Salad', 'Bread', 'Fish', 'Rice']5、splice()
splice() 方法從數(shù)組中添加或刪除特定元素。刪除元素時(shí)，它會(huì)返回?cái)?shù)組中已刪除的元素，添加元素時(shí)，它會(huì)返回一個(gè)空數(shù)組。
myArray.splice(index, howMany, element1, element2, ..., elementX);在上面的語(yǔ)法中，index 是一個(gè)必需參數(shù)，表示要添加或刪除元素的位置。howMany 是一個(gè)可選參數(shù)，表示要?jiǎng)h除的元素?cái)?shù)量。任何其他參數(shù)都是可選的，表示要添加到指定位置的新元素。
假設(shè)您有一個(gè)水果數(shù)組：
let fruits = ["Mango", "Strawberries", "Lime", "Oranges", "Pomegranate"];您可以使用 splice() 方法刪除特定元素，例如第三個(gè)水果、第一個(gè)和第二個(gè)水果等等：
// Remove third fruit
fruits.splice(2,1); // ['Lime']
console.log(fruits); // ["Mango", "Strawberries", "Oranges", "Pomegranate"]
// Remove the first and second fruits
fruits.splice(0,2); // ['Mango', 'Strawberries']
console.log(fruits); // ["Oranges", "Pomegranate"]您還可以使用 splice() 方法將特定水果添加到數(shù)組中的特定位置：
// Add to the first position without removing any elements
fruits.splice(0, 0, "Grape"); // []
console.log(fruits); // ['Grape', 'Mango', 'Strawberries', 'Lime', 'Oranges', 'Pomegranate']
// Add to the fifth and sixth position by replacing them with new fruits
fruits.splice(4, 2, "Bananas", "Avocado"); // ['Oranges', 'Pomegranate']
console.log(fruits); // ['Grape', 'Mango', 'Strawberries', 'Lime', 'Bananas', 'Avocado']splice() 方法是從數(shù)組中添加和刪除元素的最靈活的工具之一。
非破壞性數(shù)組方法
即使在使用數(shù)組方法后，非破壞性數(shù)組方法也會(huì)返回一個(gè)新的或未修改的數(shù)組。如果您想在將新輸出分配給新數(shù)組時(shí)保留原始數(shù)組，可以使用這些非破壞性數(shù)組方法。
6、concat()
假設(shè)您有兩個(gè)或多個(gè)要連接在一起的數(shù)組。您可以使用 concat() 方法。此方法連接數(shù)組或向數(shù)組添加元素，然后返回包含連接數(shù)組或新元素的新數(shù)組。
myArray1.concat(myArray2, myArray3, ..., myArrayX)
// or
array1.concat(element1, ..., elementX)假設(shè)您有兩個(gè)歐洲和非洲國(guó)家名稱數(shù)組：
let EuroCountries = ["Germany", "Poland", "Sweden"];
let AfricanCountries = ["Ghana", "Nigeria"];然后，您可以使用 concat() 方法合并這些數(shù)組，并將新數(shù)組分配給新變量，從而使原始數(shù)組保持完整：
let countries = EuroCountries.concat(AfricanCountries);
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria']您也可以只添加元素，也可以添加數(shù)組和元素，如下所示：
let countries = EuroCountries.concat("Togo", "Rwanda");
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Togo', 'Rwanda']
let countries = EuroCountries.concat(AfricanCountries, "South Africa");
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria', 'South Africa']7、slice()
slice() 方法將指定的元素從一個(gè)數(shù)組放入新數(shù)組中，而不更改原始數(shù)組。此方法采用兩個(gè)可選參數(shù)：起始位置和結(jié)束位置。默認(rèn)情況下，起始位置為 0，而結(jié)束位置是數(shù)組的最后一個(gè)元素。
// Syntax
myArray.slice(start, end)起始位置表示第一個(gè)元素的索引位置，而結(jié)束位置是復(fù)制元素中未包含的最后一個(gè)位置。在這個(gè)國(guó)家數(shù)組中，我們使用切片方法將元素復(fù)制到新數(shù)組中：
let countries = ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria', 'South Africa'];
let euroCountries = countries.slice(0, 3);
console.log(euroCountries); // ['Germany', 'Poland', 'Sweden']
let africanCountries = countries.slice(3);
console.log(africanCountries); // ['Ghana', 'Nigeria', 'South Africa']8、fill()
使用 fill() 操作，我們可以用靜態(tài)值替換某些元素。此方法是一種就地方法，這意味著它會(huì)修改原始數(shù)組。它不會(huì)返回新數(shù)組。
Syntax:
array.fill(value, start, end)參數(shù)：
- value – 您想要填充到數(shù)組中的靜態(tài)值
- start – 您想要替換數(shù)組的索引值
- end – 索引的最后一個(gè)值
const nums = [1, 2, 3, 5, 6];
nums.fill(0); // fills the entire array with 0
console.log(nums);
const strings = ["code", "damn", "web2", "web3"];
strings.fill("abc", 2, 4); // fills the elements with abc at index 2 and 3
console.log(strings);
//output
[0, 0, 0, 0, 0]
['code', 'damn', 'abc', 'abc']連接數(shù)組
假設(shè)您需要連接所有數(shù)組元素以使其成為一個(gè)字符串。您可以使用 join() 方法執(zhí)行此操作，而無(wú)需更改或更改原始數(shù)組。
9、join()
join() 方法將數(shù)組作為字符串返回。此方法將您喜歡的分隔符作為其參數(shù)。
// Syntax
myArray.join(separator)分隔符參數(shù)是可選的 - 如果您不輸入任何內(nèi)容，它將默認(rèn)使用逗號(hào)。但是，正如您在我們的示例中看到的，在將數(shù)組轉(zhuǎn)換為字符串時(shí)，它確實(shí)接受其他符號(hào)和空格來(lái)分隔數(shù)組中的每個(gè)元素：
let names = ['John', 'Doe'];
let joinedNames1 = names.join(); // 'John,Doe'
let joinedNames2 = names.join(' '); // 'John Doe'
let joinedNames3 = names.join('-'); // 'John-Doe'遍歷數(shù)組元素
傳統(tǒng)上，如果您想對(duì)單個(gè)元素進(jìn)行任何類型的數(shù)據(jù)檢查或處理，則必須使用循環(huán)來(lái)遍歷數(shù)組。
例如，如果您有一個(gè)學(xué)生數(shù)組，并且想在網(wǎng)站上顯示某個(gè)學(xué)生，那么您必須循環(huán)遍歷整個(gè)數(shù)組，然后創(chuàng)建自己的邏輯以根據(jù)過(guò)濾條件對(duì)其進(jìn)行過(guò)濾。
從頭開(kāi)始處理所有這些可能非常復(fù)雜，但 JavaScript 已經(jīng)有一些內(nèi)置方法，您可以使用它們高效地執(zhí)行所有這些任務(wù)。以下是迭代數(shù)組的最常用方法的概述。
10、includes()
顧名思義，includes() 方法會(huì)檢查數(shù)組以查看數(shù)組是否包含指定值。如果包含該值，則返回 true - 如果不包含，則返回 false。該方法接受兩個(gè)參數(shù)：特定值和可選的起始位置。
// Syntax
myArray.includes(value, start)假設(shè)您有一個(gè)水果數(shù)組。讓我們檢查數(shù)組是否包含“Apple”：
let fruits = ["Apple", "Strawberries", "Mango", "Lime", "Oranges"];
console.log(fruits.includes("Apple")); // true
console.log(fruits.includes("Apple", 3)); // false11、every()
every() 方法以求值的形式對(duì)數(shù)組的每個(gè)元素執(zhí)行一個(gè)函數(shù)。如果所有數(shù)組元素都通過(guò)求值，則返回 true；如果至少有一個(gè)元素未通過(guò)求值，則返回 false（并停止執(zhí)行）。此方法使用回調(diào)函數(shù)作為參數(shù)，并針對(duì)每個(gè)元素進(jìn)行求值。
// Syntax
myArray.every(callbackFn)假設(shè)您有一個(gè)用戶年齡數(shù)組，并且想要檢查所有用戶是否都低于 50 歲：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
console.log(usersAge.every((age) => age < 50)); // false您也可以決定創(chuàng)建該函數(shù)，然后將其傳入：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
function checkAge(age) {
return age < 50;
}
console.log(usersAge.every(checkAge)); // false注意：此方法不會(huì)對(duì)空元素執(zhí)行該函數(shù)。
12、some()
some() 方法與 every() 方法非常相似，但這次如果通過(guò)了數(shù)組元素之一的求值，則返回 true 并停止執(zhí)行。如果所有元素都未通過(guò)求值，則返回 false。
// Syntax
myArray.some(callbackFn)在回調(diào)函數(shù)中，您可以訪問(wèn)每個(gè)元素、索引和原始數(shù)組本身：
// Normal function
myArray.some(function(element, index, array){ /* ... */ })
// Arrow function
myArray.some((element, index, array) => { /* ... */ })在我們的用戶年齡數(shù)組中，假設(shè)您想要檢查是否至少有一個(gè)用戶年齡超過(guò) 50 歲：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
console.log(usersAge.some((age) => age > 50)); // true注意：此方法不會(huì)對(duì)空元素執(zhí)行該函數(shù)。
13、find()
find 方法也類似于 some() 方法，但不返回布爾值 - 它將返回通過(guò)測(cè)試的第一個(gè)元素。與 some() 和 every() 方法一樣，它也為每個(gè)元素執(zhí)行回調(diào)函數(shù)，如果沒(méi)有元素通過(guò)測(cè)試，它將返回 undefined。它的語(yǔ)法也與這兩種方法相似。
// Syntax
myArray.find(callbackFn)假設(shè)您有一個(gè)學(xué)生數(shù)組，每個(gè)學(xué)生都有一個(gè)包含其姓名和年齡的對(duì)象。您可以找到具有特定姓名的學(xué)生并輸出該學(xué)生的年齡：
let students = [
{ name: "John Doe", age: 22 },
{ name: "Jane Doe", age: 33 },
{ name: "Karl Don", age: 21 }
];
console.log(students.find((student) => student.name === "John Doe").age); // 22您可以決定提取該函數(shù)：
let students = [
{ name: "John Doe", age: 22 },
{ name: "Jane Doe", age: 33 },
{ name: "Karl Don", age: 21 }
];
const checkStudents = (student) => {
if (student.name === "John Doe") {
return student;
}
};
console.log(students.find(checkStudents).age); // 22注意：此方法不對(duì)空元素執(zhí)行該函數(shù)。
14、findIndex()
此方法與 find() 方法非常相似，但這次，它不返回元素，而是返回通過(guò)測(cè)試函數(shù)的數(shù)組中第一個(gè)元素的索引（位置）。如果沒(méi)有匹配項(xiàng)，它將返回 -1。它的語(yǔ)法類似于 find() 方法。
// Syntax
myArray.findIndex(callbackFn)假設(shè)您有一個(gè)學(xué)生數(shù)組，每個(gè)學(xué)生都有一個(gè)包含其姓名和年齡的對(duì)象。您可以查找具有特定姓名的學(xué)生并輸出該學(xué)生的索引：
let students = [
{ name: "John Doe", age: 22 },
{ name: "Jane Doe", age: 33 },
{ name: "Karl Don", age: 21 }
];
const checkStudents = (student) => {
if (student.name === "Jane Doe") {
return student
}
};
console.log(students.findIndex(checkStudents)); // 1您還可以使用帶有箭頭函數(shù)的一行：
let students = [
{ name: "John Doe", age: 22 },
{ name: "Jane Doe", age: 33 },
{ name: "Karl Don", age: 21 }
];
console.log(students.findIndex((student) => student.name === "Jane Doe")); // 115、indexOf()
indexOf() 方法檢查每個(gè)元素并返回與指定值匹配的第一個(gè)元素的索引。它使用嚴(yán)格相等 (===) 進(jìn)行搜索，如果指定的值與數(shù)組中的任何元素都不匹配，則返回 -1。
findIndexOf() 方法和 indexOf() 類似，但 findIndexOf() 接受回調(diào)函數(shù)，而 indexOf() 允許您直接傳遞要查找的值。
// Syntax
myArray.indexOf(item)
myArray.indexOf(item, start)start 參數(shù)是可選的，表示搜索應(yīng)從哪個(gè)索引位置開(kāi)始。使用負(fù)數(shù)時(shí)，搜索從數(shù)組末尾開(kāi)始。默認(rèn)情況下，其值為 0。以下是一個(gè)例子：
let scores = [23, 56, 67, 22, 45, 57, 45, 7, 5, 34, 7];
console.log(scores.indexOf(7)); // Output: 7
console.log(scores.indexOf(7, -1)); // Output: 1016、filter()
filter() 方法遍歷整個(gè)數(shù)組，選擇滿足指定條件的元素，并在新數(shù)組中返回它們。
// Syntax
myArray.filter(callbackFn)在回調(diào)函數(shù)中，您可以訪問(wèn)每個(gè)元素、其索引以及原始數(shù)組本身。例如：
let students = [
{ name: "John Doe", age: 22 },
{ name: "Jane Doe", age: 33 },
{ name: "Karl Don", age: 21 }
];
console.log(students.filter((student) => student.age < 30));這將輸出：
[
{ "name": "John Doe", "age": 22 },
{ "name": "Karl Don", "age": 21 }
]注意：filter() 不會(huì)對(duì)空元素執(zhí)行該函數(shù)。
17、forEach()
forEach() 方法循環(huán)遍歷所有數(shù)組元素并為每個(gè)元素調(diào)用一個(gè)函數(shù)（回調(diào)函數(shù)）?；卣{(diào)函數(shù)可以在每次循環(huán)中訪問(wèn)當(dāng)前元素、索引和整個(gè)數(shù)組。
// Syntax
myArray.forEach(callbackFn)例如：
let staff = [
{ name: "John Doe", salary: 120 },
{ name: "Jane Doe", salary: 350 },
{ name: "Karl Don", salary: 710 }
];
let totalSalary = 0;
staff.forEach((staffPerson) => {
totalSalary += staffPerson.salary;
});
console.log(totalSalary); // Output: 1180注意：forEach() 不會(huì)對(duì)空元素執(zhí)行該函數(shù)。
18、map()
map() 方法迭代數(shù)組，將回調(diào)函數(shù)應(yīng)用于每個(gè)元素并返回一個(gè)包含修改后元素的新數(shù)組。
// Syntax
myArray.map(callbackFn)例如：
let scores = [45, 71, 65, 80, 47];
let newScores = scores.map((score) => score + 5);
console.log(newScores); // Output: [50, 76, 70, 85, 52]19、reduce()
reduce() 方法將 Reducer 函數(shù)應(yīng)用于數(shù)組的每個(gè)元素并返回單個(gè)輸出。Reducer 函數(shù)迭代數(shù)組中的所有元素并返回前一個(gè)元素的計(jì)算結(jié)果。
/ Syntax
myArray.reduce(callbackFn, initialValue)例如：
let staff = [
{ name: "John Doe", salary: 120 },
{ name: "Jane Doe", salary: 350 },
{ name: "Karl Don", salary: 710 }
];
const totalSalary = staff.reduce((total, staffPerson) => {
total += staffPerson.salary;
return total;
}, 0);
console.log(totalSalary); // Output: 1180注意：reduce() 是一種復(fù)雜的數(shù)組方法。
20、flat()
flat() 方法通過(guò)根據(jù)指定的深度連接所有子數(shù)組元素來(lái)創(chuàng)建新數(shù)組。
// Syntax
myArray.flat()
myArray.flat(depth)例如：
let numbers = [23, 56, 67, [22, 45, 57, [45, 7], 5], [34, 7]];
console.log(numbers.flat()); // Output: [23, 56, 67, 22, 45, 57, [45, 7], 5, 34, 7]
console.log(numbers.flat(2)); // Output: [23, 56, 67, 22, 45, 57, 45, 7, 5, 34, 7]21、flatmap()
flatmap() 方法結(jié)合了 map() 和 flat()，將給定的回調(diào)函數(shù)應(yīng)用于每個(gè)數(shù)組元素，然后將結(jié)果展平一層。
// Syntax
myArray.flatMap(callbackFn)例如：
let numbers = [23, 56, 67, 22, 45, 57, 45, 7, 5];
let doubleNumbers = numbers.flatMap((number) => number * 2);
console.log(doubleNumbers); // Output: [46, 112, 134, 44, 90, 114, 90, 14, 10]數(shù)組結(jié)束。
總結(jié)
以上就是我今天想與您分享的21個(gè)常用數(shù)組，希望對(duì)您有所幫助，最后，感謝您的閱讀，祝編程愉快！
