如何用 Push、Unshift 和 Concat 在 JavaScript 数组中添加元素

原文：JavaScript Array Insert - How to Add to an Array with the Push, Unshift, and Concat Functions，作者：Nehemiah Kivelevitz

JavaScript 数组是我最喜欢的数据类型之一。它们是动态的，易于使用，并提供了一大堆我们可以利用的内置方法。

然而，你拥有的选择越多，决定你应该使用哪一种就越令人困惑。

在这篇文章中，我想讨论向 JavaScript 数组添加元素的一些常见方法。

Push 方法

第一个，也可能是你最常见的 JavaScript 数组方法是 push()。push() 方法用于在数组的末端添加一个元素。

假设你有一个元素数组，每个元素都是一个字符串，代表你需要完成的一项任务。将较新的项目添加到数组的末尾是有意义的，这样我们就可以先完成较早的任务。

让我们以代码的形式来看看这个例子。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

好了，push 给了我们一个很好的、简单的语法来把一个项目添加到数组的末尾。

假设我们想一次向列表添加两个或三个项目，那么我们该怎么做呢？事实证明，push() 可以接受一次添加多个元素。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

现在我们已经在数组中增加了一些任务，我们可能想知道数组中目前有多少个项目，以确定任务是否太多。

幸运的是，push() 有一个返回值，即在我们的元素被添加后，数组的长度。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Unshift 方法

不是所有的任务都是平等的。你可能会遇到这样的情况：你在向数组添加任务时，突然遇到一个比其他任务更紧急的任务。

现在是时候介绍我们的朋友 unshift() 了，它允许我们将项目添加到数组的开头。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

你可能注意到在上面的例子中，就像 push() 方法一样，unshift() 返回新数组的长度供我们使用。它还让我们有能力一次增加多个元素。

Concat 方法

concat() 方法是 concatenate（连接在一起）的缩写，用于连接两个（或更多）数组。

如果你还记得上面的内容，unshift() 和 push() 方法返回新数组的长度，而 concat() 则会返回一个全新的数组。

这是一个非常重要的区别，当你处理不想改变的数组时（比如存储在 React 状态中的数组），concat() 就变得非常有用。

一个相当基本和直接的例子是像这样：

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["?", "?", "?", "?"] 

假设你有多个数组，你想把它们连在一起。不用担心，concat() 可以拯救你。

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["?", "?", "?", "?", "?", "?"]

用 Concat 克隆

还记得我说过 concat() 在你不想改变现有数组的时候很有用吗？让我们来看看我们如何利用这个概念将一个数组的内容复制到一个新的数组中。

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

真棒！我们基本上可以用 concat() “克隆”一个数组。

但是在这个克隆过程中，有一个小的麻烦。新数组是被复制数组的“浅层拷贝”。这意味着任何对象都是通过引用复制的，而不是实际的对象。

让我们看一个例子来更清楚地解释这个想法：

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

//只修改 arr2
arr2[1].food = "?";
arr2.push({food:"?"})

console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ]

console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, 
{ food: '?' } ]

尽管我们没有直接对原始数组做任何改动，但该数组最终还是受到了我们在克隆数组上所做改动的影响！

有多种不同的方法来正确地进行数组的“深度克隆”，但我将把这些留给你作为家庭作业。

TL;DR

当你想在数组的末端添加一个元素时，使用 push()。如果你需要将一个元素添加到数组的开头，请尝试 unshift()。而且你可以用 concat() 把数组加在一起。

当然，还有许多其他向数组添加元素的选择，我邀请你去寻找更多操作数组的好方法！

欢迎在 Twitter 上与我联系，让我知道你最喜欢的向数组添加元素的方法。