英文 | https://javascript.plainenglish.io/17-must-know-array-methods-in-javascript-37f7033ee721

翻译 | 小爱

在 JavaScript 中，数组是一种常用的集合类型，可用于存储数据。有多种有用的内置属性和方法可以让你在使用数组时更轻松。

今天我将向你分享 17 个有用的数组方法。此外，你还将看到一些有关如何实际使用它们的简单示例。

现在，就让我们开始吧！

1、 Array.find()

使用.find()方法查找满足条件的数组的第一个元素。例如，让我们在汽车列表中找到第一辆经济实惠的汽车：

const cars = [  {brand: "Porsche", price: 105000},  {brand: "BMW", price: 32000},  {brand: "Skoda", price: 15000},  {brand: "Toyota", price: 11500}];const affordableCar = cars.find(car => car.price <= 20000);console.log(affordableCar)

输出：

{ brand:"Skoda", price:15000}

2、Array.concat()

你可以使用.concat()方法将两个或多个数组合并在一起。例如：

const nums1 = [1,2,3];const nums2 = [4,5,6];const merged = nums1.concat(nums2);console.log(merged);

3、 Array.findIndex（）

使用.findIndex()方法获取第一个满足条件的元素的索引。例如，让我们找到列表中的第一个数字 3：

const nums = [1,2,3,3,3,2,1]const idx = nums.findIndex( num => num == 3 )console.log(idx)

输出：

如果不存在与条件匹配的此类元素，则该.findIndex()方法返回-1。

4、Array.forEach()

这个超级好用，它可以让你摆脱有时可能合适的常规 for 循环。

正如其名称.forEach()表明，它被用于执行一个动作的阵列的每个元件。例如，让我们打印数组的所有数字：

const nums = [1, 2, 3]; nums.forEach( num => console.log(num) );

输出：

1 2 3

5、 Array.join()

你可以使用该.join()方法连接一组字符串以形成一个字符串。

例如，让我们将单词合并成一个句子。要形成一个句子，你需要用空格分隔每个单词。这可以通过将空格作为参数传递给.join()方法来完成：

const words = ["This", "is", "a test"];const sentence = words.join(" "); // separate words by blank spacesconsole.log(sentence)

输出：

This is a test

6、 Array.map（）

你可以使用.map()method 对每个元素执行一个操作（即运行一个函数）并将结果放入一个新数组中。

例如，让我们将一个数字数组转换为一个新的平方数数组：

const nums = [1,2,3,4,5];const squaredNums = nums.map( number => number * number );console.log(squaredNums);

输出：

[1, 4, 9, 16, 25]

7、Array.reduce()

该.reduce()方法通过为数组的每个元素执行一个函数并累加结果，将数组缩减为单个值。

例如，让我们计算数组中数字的总和：

const nums = [1,2,3,4,5,6];const numSum = nums.reduce((sum, num) => sum + num);console.log(numSum);

输出：

如果你不熟悉 reduce，让我们检查一下上面的代码。该.reduce()方法为你提供了两个值：

第一个值是累积的“总”值。在这种情况下，它被称为sum。随着该.reduce()方法通过数字工作，该值逐渐增加。
第二个值是 reduce 操作的当前元素。在这种情况下，它被称为num。
简而言之，所有.reduce()要做的就是遍历数组的每个元素，并将每个值添加到中sum以获得数字的总和。

请注意，.reduce()可以选择采用初始值。例如，你可以出于某种原因开始计算以下数字的总和：

const nums = [1,2,3,4,5,6];const numSum = nums.reduce((sum, num) => sum + num, 1000);console.log(numSum);

输出：

8、 Array.flat()

当你有一个多维数组时，你可以使用该.flat()方法将其展平。例如：

const nums = [0，1，2，[3，4]];console.log(nums.flat());

输出：

[0, 1, 2, 3, 4]

你还可以指定要将数组维度压缩到的深度。例如，让我们将这个 4 维数组展平为 2 维：

const nums = [0, 1, 2, [[[[[3, 4]]]]]];console.log(nums.flat(2));

输出：

[0，1，2，[3，4]]

9、Array.push()

使用.push()方法将新项目添加到数组中。例如：

let nums = [1, 2, 3]
nums.push(4)nums.push(5, 6)
console.log(nums)

输出：

[1, 2, 3, 4, 5, 6]

10、 Array.pop()

使用方法删除并返回数组的最后一个元素.pop()。例如：

let nums = [1, 2, 3, 4, 5, 6]const lastNum = nums.pop()console.log(`Removed ${lastNum}, now the numbers are ${nums}`)

输出：

Removed 6, now the numbers are 1,2,3,4,5

11、 Array.shift()

要删除数组的第一个元素，你可以使用 .shift() 方法。例如：

const nums = [1, 2, 3, 4];const first = nums.shift();
console.log(nums);console.log(first);

输出：

[2, 3, 4] 1

12、 Array.unshift（）

该.unshift()方法将元素添加到数组的开头+ 返回数组的新长度。例如：

const nums = [1, 2, 3];nums.unshift(4, 5);console.log(nums);

输出：

[4, 5, 1, 2, 3]

13、 Array.filter()

顾名思义，你可以根据条件过滤数组的元素。结果，在过滤元素所在的位置创建了一个新数组。

例如，让我们从数字列表中过滤所有偶数：

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNums = nums.filter( num => num % 2 == 0);console.log(evenNums);

输出：

[2, 4, 6, 8, 10]

14、 Array.sort()

按.sort()原样使用方法对字符串数组进行排序：

const fruits = ["Banana", "Apple", "Clementine"]const sorted = fruits.sort()console.log(sorted)

输出：

["Apple", "Banana", "Clementine"]

请注意，你不能只.sort()按原样对数字数组进行排序！相反，你必须为该.sort()方法提供一个比较函数，以便它知道如何对数字进行实际排序。

例如，让我们按升序对数字列表进行排序：

const nums = [1, 2, 3, 4]const sorted = nums.sort((a, b) => a - b)console.log(sorted)

15、 Array.reverse()

要反转数组，你可以简单地使用该.reverse()方法。举个例子：

const nums = [1, 2, 3, 4]const reversed = nums.reverse()console.log(reversed)

输出：

[4, 3, 2, 1]

16、Array.every()

你可以使用.every()method 来检查数组的每个元素是否都通过了条件。如果有，则该方法返回true，否则返回false。

例如，让我们检查是否所有人都饿了：

const moods = ["hungry", "hungry", "hungry"];const allHungry = moods.every(mood => mood === "hungry");
console.log(allHungry);

输出：

true

17、Array.some()

该.some()方法与前面的.every()方法类似。不同之处在于，如果数组中的一个或多个元素满足条件，则.some()返回true，false否则返回。

例如，让我们检查是否所有人都饿了：

const moods = ["hungry", "sleepy", "thirsty"];const someHungry = moods.some(mood => mood === "hungry");
console.log(someHungry);

输出：

true

总结

希望我今天分享的内容，能够对你的学习与工作有所启发，也希望你今天学到了新东西。

谢谢你的阅读，祝你编码愉快！

17 个JavaScript 中你必须知道的数组方法

1、 Array.find()

2、Array.concat()

3、 Array.findIndex（）

4、Array.forEach()

5、 Array.join()

6、 Array.map（）

7、Array.reduce()

8、 Array.flat()

9、Array.push()

10、 Array.pop()

11、 Array.shift()

12、 Array.unshift（）

13、 Array.filter()

14、 Array.sort()

15、 Array.reverse()

16、Array.every()

17、Array.some()

学习更多技能
请点击下方公众号

17 个JavaScript 中你必须知道的数组方法

1、 Array.find()

2、Array.concat()

3、 Array.findIndex（）

4、Array.forEach()

5、 Array.join()

6、 Array.map（）

7、Array.reduce()

8、 Array.flat()

9、Array.push()

10、 Array.pop()

11、 Array.shift()

12、 Array.unshift（）

13、 Array.filter()

14、 Array.sort()

15、 Array.reverse()

16、Array.every()

17、Array.some()

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号