17 个JavaScript 中你必须知道的数组方法_必须知道的17数组-优快云博客

英文 | 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 spaces
console.log(sentence)

输出：

This is a test

6、 Array.map（）

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

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

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()方法来检查数组的每个元素是否都通过了条件。如果有，则该方法返回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