21個常用JavaScript 數組方法使用指南匯總
在 JavaScript 中，數組是一種特殊類型的對象，用于存儲和組織多個值。數組使您可以將值分組到單個變量名下，從而方便管理和操作數據集合。以下是更詳細的解釋：
在 JavaScript 中，一對方括號 [] 表示數組。數組中的所有元素都用逗號 , 分隔。
在 JavaScript 中，數組可以包含任何類型的元素。這意味著您可以創(chuàng)建包含 String、Boolean、Number、Object 甚至其他數組等類型的元素的數組。
以下是一個包含四個元素的數組示例：Number、Boolean、String 和 Object。
const mixTypedArray = [ 100 , true , 'javascript' , {}];元素在數組中的位置稱為其索引。在 JavaScript 中，數組索引從 0 開始，每個元素遞增 1。
例如，在上面的數組中，元素 100 位于索引 0，true 位于索引 1，'javascript' 位于索引 2，依此類推。
數組中元素的數量決定了其長度。例如，上述數組的長度為 4。
有趣的是，JavaScript 數組的長度不是固定的。您可以通過分配正數值隨時更改長度。我們稍后會對此進行更多了解。
破壞性數組方法
破壞性數組方法會更改原始數組并返回修改后的數組。讓我們探索各種用于操作更改原始數組的數組的方法。
添加或刪除數組的方法
通常需要添加或刪除數組中的元素。例如，考慮這個名稱數組：
let names = ["John Doe", "Jane Doe", "Ann Doe"];您可以使用以下方法之一來操作此數組，以從數組中添加或刪除第一個、最后一個或特定元素。
1、pop()
此方法刪除附加的 JavaScript 數組的最后一個元素，更改原始數組，并返回已刪除的元素。
myArray.pop();注意：您不會將任何內容作為參數傳遞給 pop() 方法。
以下示例展示了如何使用 pop() 方法：
let names = ["John Doe", "Jane Doe", "Ann Doe"];
names.pop(); // "Ann Doe"
console.log(names); // ['John Doe', 'Jane Doe']2、push()
此方法將新元素添加到附加的 JavaScript 數組的末尾，更改原始數組，并返回數組的新長度。此方法接受您希望添加到數組末尾的元素作為參數。
myArray.push(element1, element2, ..., elementX);現在讓我們創(chuàng)建一個新的分數數組，然后使用 push() 方法向數組添加更多分數：
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() 方法刪除數組的第一個元素。它的工作方式與 pop() 方法類似，但不是從末尾刪除，而是從附加數組的開頭刪除。它返回已刪除/已移位的元素。
myArray.shift();現在讓我們創(chuàng)建一個新的動物名稱數組，然后學習如何使用 shift() 方法從數組中刪除第一個名稱：
let animalNames = ["Lion", "Dog", "Snake", "Tiger"];
animalNames.shift(); // "Lion"
console.log(animalNames); // ['Dog', 'Snake', 'Tiger']4、unshift()
unshift() 方法的工作方式與 push() 方法類似，因為它用于將新元素添加到數組中，但添加到數組的開頭。此方法將您希望在數組開頭添加的元素作為參數。它還返回數組的新長度。
myArray.unshift(element1, element2, ..., elementX);現在讓我們創(chuàng)建一個新的食物名稱數組，然后使用 unshift() 方法向數組添加更多食物名稱：
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() 方法從數組中添加或刪除特定元素。刪除元素時，它會返回數組中已刪除的元素，添加元素時，它會返回一個空數組。
myArray.splice(index, howMany, element1, element2, ..., elementX);在上面的語法中，index 是一個必需參數，表示要添加或刪除元素的位置。howMany 是一個可選參數，表示要刪除的元素數量。任何其他參數都是可選的，表示要添加到指定位置的新元素。
假設您有一個水果數組：
let fruits = ["Mango", "Strawberries", "Lime", "Oranges", "Pomegranate"];您可以使用 splice() 方法刪除特定元素，例如第三個水果、第一個和第二個水果等等：
// 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() 方法將特定水果添加到數組中的特定位置：
// 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() 方法是從數組中添加和刪除元素的最靈活的工具之一。
非破壞性數組方法
即使在使用數組方法后，非破壞性數組方法也會返回一個新的或未修改的數組。如果您想在將新輸出分配給新數組時保留原始數組，可以使用這些非破壞性數組方法。
6、concat()
假設您有兩個或多個要連接在一起的數組。您可以使用 concat() 方法。此方法連接數組或向數組添加元素，然后返回包含連接數組或新元素的新數組。
myArray1.concat(myArray2, myArray3, ..., myArrayX)
// or
array1.concat(element1, ..., elementX)假設您有兩個歐洲和非洲國家名稱數組：
let EuroCountries = ["Germany", "Poland", "Sweden"];
let AfricanCountries = ["Ghana", "Nigeria"];然后，您可以使用 concat() 方法合并這些數組，并將新數組分配給新變量，從而使原始數組保持完整：
let countries = EuroCountries.concat(AfricanCountries);
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria']您也可以只添加元素，也可以添加數組和元素，如下所示：
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() 方法將指定的元素從一個數組放入新數組中，而不更改原始數組。此方法采用兩個可選參數：起始位置和結束位置。默認情況下，起始位置為 0，而結束位置是數組的最后一個元素。
// Syntax
myArray.slice(start, end)起始位置表示第一個元素的索引位置，而結束位置是復制元素中未包含的最后一個位置。在這個國家數組中，我們使用切片方法將元素復制到新數組中：
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)值替換某些元素。此方法是一種就地方法，這意味著它會修改原始數組。它不會返回新數組。
Syntax:
array.fill(value, start, end)參數：
- value – 您想要填充到數組中的靜態(tài)值
- start – 您想要替換數組的索引值
- end – 索引的最后一個值
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']連接數組
假設您需要連接所有數組元素以使其成為一個字符串。您可以使用 join() 方法執(zhí)行此操作，而無需更改或更改原始數組。
9、join()
join() 方法將數組作為字符串返回。此方法將您喜歡的分隔符作為其參數。
// Syntax
myArray.join(separator)分隔符參數是可選的 - 如果您不輸入任何內容，它將默認使用逗號。但是，正如您在我們的示例中看到的，在將數組轉換為字符串時，它確實接受其他符號和空格來分隔數組中的每個元素：
let names = ['John', 'Doe'];
let joinedNames1 = names.join(); // 'John,Doe'
let joinedNames2 = names.join(' '); // 'John Doe'
let joinedNames3 = names.join('-'); // 'John-Doe'遍歷數組元素
傳統(tǒng)上，如果您想對單個元素進行任何類型的數據檢查或處理，則必須使用循環(huán)來遍歷數組。
例如，如果您有一個學生數組，并且想在網站上顯示某個學生，那么您必須循環(huán)遍歷整個數組，然后創(chuàng)建自己的邏輯以根據過濾條件對其進行過濾。
從頭開始處理所有這些可能非常復雜，但 JavaScript 已經有一些內置方法，您可以使用它們高效地執(zhí)行所有這些任務。以下是迭代數組的最常用方法的概述。
10、includes()
顧名思義，includes() 方法會檢查數組以查看數組是否包含指定值。如果包含該值，則返回 true - 如果不包含，則返回 false。該方法接受兩個參數：特定值和可選的起始位置。
// Syntax
myArray.includes(value, start)假設您有一個水果數組。讓我們檢查數組是否包含“Apple”：
let fruits = ["Apple", "Strawberries", "Mango", "Lime", "Oranges"];
console.log(fruits.includes("Apple")); // true
console.log(fruits.includes("Apple", 3)); // false11、every()
every() 方法以求值的形式對數組的每個元素執(zhí)行一個函數。如果所有數組元素都通過求值，則返回 true；如果至少有一個元素未通過求值，則返回 false（并停止執(zhí)行）。此方法使用回調函數作為參數，并針對每個元素進行求值。
// Syntax
myArray.every(callbackFn)假設您有一個用戶年齡數組，并且想要檢查所有用戶是否都低于 50 歲：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
console.log(usersAge.every((age) => age < 50)); // false您也可以決定創(chuàng)建該函數，然后將其傳入：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
function checkAge(age) {
return age < 50;
}
console.log(usersAge.every(checkAge)); // false注意：此方法不會對空元素執(zhí)行該函數。
12、some()
some() 方法與 every() 方法非常相似，但這次如果通過了數組元素之一的求值，則返回 true 并停止執(zhí)行。如果所有元素都未通過求值，則返回 false。
// Syntax
myArray.some(callbackFn)在回調函數中，您可以訪問每個元素、索引和原始數組本身：
// Normal function
myArray.some(function(element, index, array){ /* ... */ })
// Arrow function
myArray.some((element, index, array) => { /* ... */ })在我們的用戶年齡數組中，假設您想要檢查是否至少有一個用戶年齡超過 50 歲：
let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];
console.log(usersAge.some((age) => age > 50)); // true注意：此方法不會對空元素執(zhí)行該函數。
13、find()
find 方法也類似于 some() 方法，但不返回布爾值 - 它將返回通過測試的第一個元素。與 some() 和 every() 方法一樣，它也為每個元素執(zhí)行回調函數，如果沒有元素通過測試，它將返回 undefined。它的語法也與這兩種方法相似。
// Syntax
myArray.find(callbackFn)假設您有一個學生數組，每個學生都有一個包含其姓名和年齡的對象。您可以找到具有特定姓名的學生并輸出該學生的年齡：
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您可以決定提取該函數：
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注意：此方法不對空元素執(zhí)行該函數。
14、findIndex()
此方法與 find() 方法非常相似，但這次，它不返回元素，而是返回通過測試函數的數組中第一個元素的索引（位置）。如果沒有匹配項，它將返回 -1。它的語法類似于 find() 方法。
// Syntax
myArray.findIndex(callbackFn)假設您有一個學生數組，每個學生都有一個包含其姓名和年齡的對象。您可以查找具有特定姓名的學生并輸出該學生的索引：
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您還可以使用帶有箭頭函數的一行：
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() 方法檢查每個元素并返回與指定值匹配的第一個元素的索引。它使用嚴格相等 (===) 進行搜索，如果指定的值與數組中的任何元素都不匹配，則返回 -1。
findIndexOf() 方法和 indexOf() 類似，但 findIndexOf() 接受回調函數，而 indexOf() 允許您直接傳遞要查找的值。
// Syntax
myArray.indexOf(item)
myArray.indexOf(item, start)start 參數是可選的，表示搜索應從哪個索引位置開始。使用負數時，搜索從數組末尾開始。默認情況下，其值為 0。以下是一個例子：
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() 方法遍歷整個數組，選擇滿足指定條件的元素，并在新數組中返回它們。
// Syntax
myArray.filter(callbackFn)在回調函數中，您可以訪問每個元素、其索引以及原始數組本身。例如：
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() 不會對空元素執(zhí)行該函數。
17、forEach()
forEach() 方法循環(huán)遍歷所有數組元素并為每個元素調用一個函數（回調函數）。回調函數可以在每次循環(huán)中訪問當前元素、索引和整個數組。
// 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() 不會對空元素執(zhí)行該函數。
18、map()
map() 方法迭代數組，將回調函數應用于每個元素并返回一個包含修改后元素的新數組。
// 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 函數應用于數組的每個元素并返回單個輸出。Reducer 函數迭代數組中的所有元素并返回前一個元素的計算結果。
/ 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() 是一種復雜的數組方法。
20、flat()
flat() 方法通過根據指定的深度連接所有子數組元素來創(chuàng)建新數組。
// 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() 方法結合了 map() 和 flat()，將給定的回調函數應用于每個數組元素，然后將結果展平一層。
// 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]數組結束。
總結
以上就是我今天想與您分享的21個常用數組，希望對您有所幫助，最后，感謝您的閱讀，祝編程愉快！
