JavaScript 中最流行的数组方法，您不想错过！

本指南探讨了十四种不可或缺的 JavaScript 数组方法。 我们将概述每种方法并通过示例说明其用法。

1. map()：转换每个数组元素并返回一个包含结果的 new 数组。原始数组保持不变。

<code class="language-javascript">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']</code>

2. filter()：创建一个 new 数组，仅包含通过提供的测试函数的元素。原始数组未受影响。

<code class="language-javascript">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 }]</code>

3. reduce()：将函数累积地应用于数组元素，以将它们减少到单个值。 将其视为迭代组合元素。

<code class="language-javascript">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</code>

4. forEach()：为每个数组元素执行一次提供的函数。 它不返回值（返回undefined）。

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

5. find()：返回满足所提供的测试函数的第一个元素。 如果没有元素满足条件，则返回undefined.

<code class="language-javascript">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</code>

6. findIndex()：返回满足所提供的测试函数的 first 元素的索引。如果没有元素满足条件，则返回 -1。

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

7. some()：测试数组中至少一个元素是否通过所提供函数实现的测试。如果至少有一个元素通过，则返回 true，否则返回 false.

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

8. every()：测试数组中的所有元素是否通过所提供函数实现的测试。仅当所有元素都通过时才返回 true，否则返回 false.

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

9. includes()：确定数组的条目中是否包含某个值，根据情况返回 true 或 false。

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

10. indexOf()：返回在数组中可以找到给定元素的第一个索引，如果不存在则返回 -1。

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

11. slice()：提取数组的一部分并将其作为 新 数组返回，而不修改原始数组。

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

12. splice()：通过删除或替换现有元素和/或添加新元素来更改数组的内容。 修改原始数组.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

13. sort()：对数组元素就地进行排序。 默认情况下，它按字符串排序；对于数字排序，需要比较函数。

<code class="language-javascript">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']</code>

14. join()：通过连接数组中的所有元素（由指定的分隔符字符串分隔）来创建并返回一个新字符串。

<code class="language-javascript">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 }]</code>

掌握这些方法可以显着增强你的 JavaScript 数组操作能力。

以上是JavaScript 中最流行的数组方法，您不想错过！的详细内容。更多信息请关注PHP中文网其他相关文章！