我在JavaScript开发项目中使用最多的9种数组方法

英文 | https://javascript.plainenglish.io/9-array-methods-that-i-used-the-most-while-making-20-projects-in-javascript-8aa299eb731

翻译 | 杨小二

我做后端编程以及很长时间，于是，我决定学习前端的JvavScript技能。

在学习 JavaScript 的过程中，我发现了大量的学习JavaScript的资源。我将 八二法则应用到我的学习中，并决定只学习那些在项目中广泛使用的方法。

我遵循先做的方法，并在我掌握了基础知识后立即投入到项目开发中。在过去几周的时间里，我就做了 24 个项目，发现有 9 种数组方法是使用的最多的。

今天，我就将我发现的在JavaScript中使用最多的9种数组方法分享给你。

1、map()

map() 方法是迄今为止，我最喜欢的 JavaScript 方法。它通过迭代数组的元素并应用所需的数组修改来创建一个新数组。

与 forEach() 方法的回调函数相比，它不会修改原始数组。

const foods = ['🍕', '🍔', '🌭', '🍝'];
const foodsWithFries = foods.map(food => food + ' 🍟');
console.log(foodsWithFries);// ['🍕 🍟', '🍔 🍟', '🌭 🍟', '🍝 🍟']
const numbers = [1, 2, 3, 4];
const squaredNums = numbers.map(num => num ** 2);
console.log(squaredNums); // [1, 4, 9, 16]

请注意，这里我使用箭头函数来定义回调函数。可以用多种方式编写相同的函数。

// 1. 
const squaredNums = numbers.map(num => num ** 2);
// 2. 
const squaredNums = numbers.map(function(num) {
    return num ** 2;
});
// 3. 
function square(num) {
    return num ** 2;
}
const squaredNums = numbers.map(square);

2、includes()

include() 方法在检查数组中是否存在所需元素后返回一个布尔值。

我在使用 API 时大量使用它来检查数组中是否存在某些值。

const vehicles = ['🚓', '🛺', '🚑', '🚒']
console.log(vehicles.includes('🛺')); // true
console.log(vehicles.includes('🚜')); // false

3、join()

当我们想使用一些分隔符连接数组的所有元素并返回一个字符串时，我会选择使用 join()。默认分隔符（当你不将任何值作为参数传递时）是逗号 (,)。

const animals =['🐇', '🐵', '🐶', '🐴', '🐘'];
animals.join(); // '🐇,🐵,🐶,🐴,🐘'

你还可以将自定义分隔符作为参数传递。

const animals =['🐇', '🐵', '🐶', '🐴', '🐘'];
animals.join(' < '); // '🐇 < 🐵 < 🐶 < 🐴 < 🐘'

当我想用自定义分隔符在网站上显示数组的元素（使用 DOM 操作）时，我会使用它。

4、find()

如果元素满足回调函数中提供的条件，则 find() 方法返回元素的第一个实例。

我用它来检查是否存在任何满足我条件的元素。当没有元素满足条件时，函数返回 undefined。

const numbers = [2, 4, 5, 6, 7];
const odd = numbers.find(num => num % 2 !== 0);
console.log(odd); // 5
const greaterThan12 = numbers.find(num => num > 12);
console.log(greaterThan12); // undefined

有一个类似的方法 findIndex() ，它返回第一个匹配元素的索引，当没有匹配时，则返回 -1。

5、filter()

filter() 方法使用满足我们为其指定的条件的元素创建一个新数组。此方法采用回调函数，你必须在其中指定条件。

const numbers = [4, 2, 6, 9, 10, 13, 5];
const evenNumber = numbers.filter(num => num % 2 === 0);
console.log(evenNumber); // [4, 2, 6, 10]

在这里，过滤器方法返回一个新数组，其中包含所有偶数，因为这是我们的条件。

6、reduce()

reduce() 方法执行一个 reducer 回调函数。把它想象成当你在现实生活中添加多个数字时。你将从第一个值开始并迭代其他数字，同时，将这些值一个一个地相加。

reduce() 方法做了类似的事情，最后，你会得到一个单一的值。除了添加之外，它还可以执行许多你可能想要的操作。

const numbers = [1, 2, 3];
const sum = numbers.reduce( (previousValue, currentValue) => {
    return previousValue + currentValue;
});
console.log(sum); // 6
const vegetables = ['🥒', '🥬', '🥕'];
const salad = vegetables.reduce((prevVeg, ongoingSalad) => {
    return prevVeg + ongoingSalad;
});
console.log(salad); // 🥒🥬🥕

reduce方法不会修改原始数组。

7、concat()

concat() 方法用于合并数组。它返回一个全新的数组，而不修改任何提供的数组。

const vegetables = ['🍅', '🥦', '🥔', '🧄'];
const fruits = ['🍎', '🍉', '🍌'];
const food = vegetables.concat(fruits);
console.log(food); // ['🍅', '🥦', '🥔', '🧄', '🍎', '🍉', '🍌'];

我们还可以使用 concat 方法一次性合并多个数组，示例如下：

const vegetables = ['🍅', '🥦'];
const fruits = ['🍎', '🍉'];
const sweets = ['🧁', '🍫', '🍪'];
const food = vegetables.concat(fruits, sweets);
console.log(food); // ['🍅', '🥦', '🍎', '🍉', '🧁', '🍫', '🍪'];

8、slice()

slice() 方法用于“分割”数组的一部分。它不会更改原始数组并创建该数组的新深层副本。

当你不想更改原始数据而是复制“分割”数组时，这很有用。

const emojis = ['😀', '😁', '🙂', '🤩', '😮', '😇', '😆'];
emojis.slice(0, 2); // ['😀', '😁']
emojis.slice(3, 6); // ['🤩', '😮', '😇']

当我想创建整个数组的深层副本时，我使用 slice 比较实用。通过使用它，我可以放心，我不会修改我的原始数组，并且可以对新数组执行任何操作。

const emojis = ['😀', '😁', '🙂'];
const emojisCopy = emojis.slice();
emojisCopy.push('🙄');
console.log(emojis); // ['😀', '😁', '🙂']
console.log(emojisCopy);  // ['😀', '😁', '🙂', '🙄']

我们可以看到原始数组没有被修改。但是，如果我们使用 = 符号来创建新数组，则修改将反映在两个地方，因为它是引用或浅拷贝。

9、 splice()

splice() 方法是 JavaScript 中的多种实用程序方法之一。splice 方法的主要目的是从数组中删除元素。但是，你可以单独使用 splice 方法添加、删除和更新元素。

它位于列表末尾的原因是我没有经常使用它，因为它不是很简单。我使用了其他干净且更具可读性的方法来解决相同的问题。

要添加元素，我们需要传递 3 个参数。我们想要插入元素的位置，从该位置开始删除的元素数量，以及要添加的元素的值。

const flowers = ['🌻', '🌼', '🌷'];
flowers.splice(2, 0, '🌹');
console.log(flowers); // ['🌻', '🌼', '🌹', '🌷']
// Rose 🌹 added at the 2nd position.

当你使用 splice 方法删除元素时，它会返回一个包含这些已删除元素的新数组并修改原始数组。

const flowers = ['🌻', '🌼', '🌷', '🌺'];
const deletedFlowers = flowers.splice(1, 2, '🌹');
console.log(flowers); // ['🌻', '🌹', '🌺']
console.log(deletedFlowers); // ['🌼', '🌷']

这些就是我在 JavaScript 中使用最多的 9 种数组方法，并且经常使用它们。如果你觉得这篇文章内容对你有所帮助，请你分享给你身边的朋友。

最后，感谢你的时间，谢谢阅读，祝编程愉快！

学习更多技能

请点击下方公众号