所有主要 JavaScript 數(shù)組方法的完整示例。

數(shù)組方法的類別：

1.修改方法（修改原數(shù)組）

• push()、pop()、shift()、unshift()、reverse()、sort()、splice()、fill()

2. 非修改方法（返回新數(shù)組/值）

• map()、filter()、concat()、slice()、toReversed()、toSorted()、toSpliced()

3. 檢索方法

• indexOf()、includes()、find()、findIndex()、findLast()、findLastIndex()

4. 迭代方法

• forEach()、map()、filter()、reduce()、every()、some()

5. 數(shù)組創(chuàng)建方法

• Array.from()、Array.of()、Array.fromAsync()

6. 其他實用方法

• join()、flat()、flatMap()、entries()、values()、with()

以下所有 31 種方法的示例：

1. concat() - 合并兩個或多個數(shù)組

const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1.concat(arr2)); // Output: [1, 2, 3, 4]

2. join() - 從數(shù)組元素創(chuàng)建一個字符串

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join(', ')); // Output: "Apple, Banana, Orange"

3. fill() - 用靜態(tài)值填充數(shù)組元素

const numbers = [1, 2, 3, 4];
console.log(numbers.fill(0)); // Output: [0, 0, 0, 0]

4.includes() - 檢查數(shù)組是否包含特定元素

const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true

5.indexOf() - 查找元素的第一個索引

const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1

6.reverse() - 反轉數(shù)組元素

const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']

7. sort() - 對數(shù)組元素進行排序

const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]

8. splice() - 從數(shù)組中添加/刪除元素

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb');
console.log(months); // Output: ['Jan', 'Feb', 'March', 'April']

9. at() - 返回指定索引處的元素

const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8

10. copyWithin() - 將數(shù)組元素復制到另一個位置

const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0, 3, 4)); // Output: ['d', 'b', 'c', 'd', 'e']

11. flat() - 創(chuàng)建一個包含子數(shù)組元素連接的新數(shù)組

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // Output: [1, 2, 3, 4, 5, 6]

12. Array.from() - 從類似數(shù)組的對象創(chuàng)建數(shù)組

console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']

13. findLastIndex() - 返回滿足條件的最后一個索引

const numbers3 = [5, 12, 8, 130, 44, 8];
console.log(numbers3.findLastIndex(num => num === 8)); // Output: 5

14. forEach() - 為每個數(shù)組元素執(zhí)行函數(shù)

const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6

15. every() - 測試所有元素是否通過條件

const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true

16.entries() - 返回帶有鍵/值對的數(shù)組迭代器

const fruits2 = ['Apple', 'Banana'];
const iterator = fruits2.entries();
console.log([...iterator]); // Output: [[0, 'Apple'], [1, 'Banana']]

17.values() - 返回帶有值的數(shù)組迭代器

const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']

18. toReversed() - 返回新的反轉數(shù)組

const arr4 = [1, 2, 3];
console.log(arr4.toReversed()); // Output: [3, 2, 1]
console.log(arr4); // Original array unchanged: [1, 2, 3]

19. toSorted() - 返回新的排序數(shù)組

const arr5 = [3, 1, 2];
console.log(arr5.toSorted()); // Output: [1, 2, 3]
console.log(arr5); // Original array unchanged: [3, 1, 2]

20. toSpliced() - 通過拼接操作返回新數(shù)組

const arr6 = [1, 2, 3];
console.log(arr6.toSpliced(1, 1, 'two')); // Output: [1, 'two', 3]
console.log(arr6); // Original array unchanged: [1, 2, 3]

21. with() - 返回元素被替換的新數(shù)組

const arr7 = [1, 2, 3];
console.log(arr7.with(1, 'two')); // Output: [1, 'two', 3]
console.log(arr7); // Original array unchanged: [1, 2, 3]

22. Array.fromAsync() - 從異步可迭代創(chuàng)建數(shù)組

async function* asyncGenerator() {
  yield 1;
  yield 2;
}
Array.fromAsync(asyncGenerator()).then(array => console.log(array)); // Output: [1, 2]

23. Array.of() - 從參數(shù)創(chuàng)建數(shù)組

console.log(Array.of(1, 2, 3)); // Output: [1, 2, 3]

24.map() - 使用回調結果創(chuàng)建新數(shù)組

const numbers6 = [1, 2, 3];
console.log(numbers6.map(x => x * 2)); // Output: [2, 4, 6]

25. flatMap() - 映射并展平結果

const arr8 = [1, 2, 3];
console.log(arr8.flatMap(x => [x, x * 2])); // Output: [1, 2, 2, 4, 3, 6]

26.reduce() - 將數(shù)組減少為單個值（從左到右）

const numbers7 = [1, 2, 3, 4];
console.log(numbers7.reduce((acc, curr) => acc + curr, 0)); // Output: 10

27.reduceRight() - 將數(shù)組減少為單個值（從右到左）

const numbers8 = [1, 2, 3, 4];
console.log(numbers8.reduceRight((acc, curr) => acc + curr, 0)); // Output: 10

28. some() - 測試是否至少有一個元素通過條件

const numbers9 = [1, 2, 3, 4, 5];
console.log(numbers9.some(num => num > 4)); // Output: true

29. find() - 返回第一個通過條件的元素

const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12

30. findIndex() - 返回第一個通過條件的索引

const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1

31. findLast() - 返回最后一個通過條件的元素

const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44

要點：

• 每個方法都有特定的任務，例如排序、反轉或查找數(shù)組中的元素。
• 一些方法會修改原始數(shù)組，例如 sort() 和verse()。
• 一些方法返回一個新數(shù)組，例如map()和filter()。
• 一些現(xiàn)代方法，如 toSorted() 和 toReversed()，保持原始數(shù)組不變并返回一個新數(shù)組。

？在 LinkedIn 上與我聯(lián)系：

我定期分享有關 JavaScript、Node.js、React、Next.js、軟件工程、數(shù)據(jù)結構、算法等的見解。讓我們一起交流、學習、成長！

跟我來：Nozibul Islam

以上是JavaScript 數(shù)組方法示例：綜合指南（方法）的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！