本指南探討了十四種不可或缺的 JavaScript 數(shù)組方法。 我們將概述每種方法并通過示例說明其用法。

1. map()：轉(zhuǎn)換每個(gè)數(shù)組元素并返回一個(gè)包含結(jié)果的 new 數(shù)組。原始數(shù)組保持不變。

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

2. filter()：創(chuàng)建一個(gè) new 數(shù)組，僅包含通過提供的測(cè)試函數(shù)的元素。原始數(shù)組未受影響。

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

3. reduce()：將函數(shù)累積地應(yīng)用于數(shù)組元素，以將它們減少到單個(gè)值。 將其視為迭代組合元素。

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30

4. forEach()：為每個(gè)數(shù)組元素執(zhí)行一次提供的函數(shù)。 它不返回值（返回undefined）。

[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));

5. find()：返回滿足所提供的測(cè)試函數(shù)的第一個(gè)元素。 如果沒有元素滿足條件，則返回undefined.

const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2

6. findIndex()：返回滿足所提供的測(cè)試函數(shù)的 first 元素的索引。如果沒有元素滿足條件，則返回 -1。

const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1

7. some()：測(cè)試數(shù)組中至少一個(gè)元素是否通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試。如果至少有一個(gè)元素通過，則返回 true，否則返回 false.

const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true

8. every()：測(cè)試數(shù)組中的所有元素是否通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試。僅當(dāng)所有元素都通過時(shí)才返回 true，否則返回 false.

const allPositive = [1, 2, 3].every(n => n > 0); // true

9. includes()：確定數(shù)組的條目中是否包含某個(gè)值，根據(jù)情況返回 true 或 false。

const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false

10. indexOf()：返回在數(shù)組中可以找到給定元素的第一個(gè)索引，如果不存在則返回 -1。

const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1

11. slice()：提取數(shù)組的一部分并將其作為 新 數(shù)組返回，而不修改原始數(shù)組。

const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]

12. splice()：通過刪除或替換現(xiàn)有元素和/或添加新元素來更改數(shù)組的內(nèi)容。 修改原始數(shù)組.

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']

13. sort()：對(duì)數(shù)組元素就地進(jìn)行排序。 默認(rèn)情況下，它按字符串排序；對(duì)于數(shù)字排序，需要比較函數(shù)。

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

14. join()：通過連接數(shù)組中的所有元素（由指定的分隔符字符串分隔）來創(chuàng)建并返回一個(gè)新字符串。

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

掌握這些方法可以顯著增強(qiáng)你的 JavaScript 數(shù)組操作能力。

以上是JavaScript 中最流行的數(shù)組方法，您不想錯(cuò)過！的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！