如何使用 JavaScript 在数组中添加对象？

JavaScript 提供了三个内置函数来在数组中添加或插入对象。这些方法是：

• push()
• splice()
• unshift()

您可以使用这些方法中的任何一个来将对象添加到数组中。对象是数组中的元素或值。我们将详细讨论每种方法。

方法 1：push()

push() 函数是 JavaScript 的一个内置数组方法。它用于在数组中添加对象或元素。此方法将元素添加到数组的末尾。

"请注意，可以使用 push() 方法在数组中添加任意数量的元素。"

语法

对象作为参数传递给 array.push() 函数，如下所示：

这里，array 是数组的用户定义名称，例如 car、fruits、movie 等。

返回值

push() 函数返回添加新元素后数组的新长度。

示例 1

这是一个 push() 方法的简单示例，我们将初始化一个包含三个元素（电影名称）的数组。然后我们将通过在 movieList.push() 方法中传入对象名称来向数组中添加另外两个对象。

复制代码

输出

在下面的响应中，您可以看到 push() 方法在添加到 movieList 数组后返回 5 作为元素的数量。

示例 2

这是 push() 函数的另一个示例，我们使用 HTML 按钮来调用函数，以在数组中插入新元素。

复制代码

输出：点击按钮之前

执行上述代码后，响应将与下面给出的一样。我们还创建了一个“推送元素”按钮，用于向数组中添加新元素。

输出：点击按钮之后

我们在 JavaScript 代码中提供了另外三个系列名称，以添加到该数组中。因此，当您点击此“推送元素”按钮时，这些元素将被添加到数组中。

在上述两个示例中，您都注意到元素是插入到数组末尾的。

示例 3：从用户获取输入

在此示例中，我们将通过 HTML 表单从用户获取输入，以使用 push() 方法插入元素。

复制代码

输出：输入新内容之前

执行上述代码后，您最初将获得包含三个电影名称的输出。有一个输入字段用于从用户获取输入，以及一个“添加元素”按钮用于提交输入值。

请参阅下面的输出

输出：输入新值之后

我们提供了“泰坦尼克号”作为新元素值，并点击了“添加元素”按钮。您将在下面的输出中看到“泰坦尼克号”已成功添加到数组的末尾。

方法 2：splice()

splice() 函数是 JavaScript 的另一个内置数组方法。它是一种特殊类型的函数，用于从数组中特定索引处添加和删除元素。它可以同时执行这两个操作。

此方法在其中定义的特定索引处添加或删除元素/对象。新对象插入到指定的索引处。splice() 方法接受三个参数：起始索引、要删除的元素数量和要添加的新元素。

"请注意，与 push() 方法类似，您可以使用 splice() 方法在数组中添加任意数量的新元素。"

语法

请参阅下面的 splice() 方法语法 -

可以通过将第二个参数指定为 0 来添加对象，而无需从数组中删除任何其他元素。

这里，array 是数组的用户定义名称，例如 car、fruits、movie 等。

让我们借助示例了解此数组函数的工作原理。我们将讨论两种情况：

1. 通过删除其他元素
2. 不删除其他元素

示例 1：通过删除其他元素

在此示例中，我们将删除数组中的其他元素以添加新元素。新元素/对象将添加到代码中指定的索引处的数组中。

复制代码

输出

执行上述代码后，您将得到包含三个系列名称（Sherlock、Harry Potter、Games of Throne）和“添加元素”按钮的响应，如下所示：

当您点击此“添加元素”按钮时，首先将删除数组索引 1 的元素，例如 a[1]（哈利波特、权力的游戏），然后将新元素（越狱、间谍、复仇者联盟）添加到数组中。

示例 2：不删除其他元素

在此示例中，我们不会删除数组中的其他元素来添加新元素。我们将只从代码中指定的索引处将新元素追加到数组中。

复制代码

输出

执行上述代码后，您最初将得到一个包含三个元素/对象的数组响应，如下所示：

当您点击此“添加元素”按钮时，它将我们定义的另外两个元素/对象添加到 seriesList 数组中。

方法 3：unshift()

unshift() 函数是 JavaScript 的另一个内置数组方法。它用于在数组中添加对象或元素。与 push() 方法不同，它在数组的开头添加元素。

"请注意，您可以使用 unshift() 方法在数组中添加任意数量的元素。"

语法

对象作为参数传递给 array.unshift() 函数，如下所示：

这里，array 是数组的用户定义名称，例如 car、fruits、movie 等。

返回值

unshift() 方法返回添加新元素后数组的新长度。您可以将 unshift() 函数返回的数组长度存储在 JavaScript 变量中。

示例 1

这是一个 unshift() 函数的简单示例，我们将一个数组中包含三个元素（电影名称）。然后我们将通过在 movieList.unshift() 方法中传入对象名称来向数组中添加另外两个对象。

复制代码

输出

在下面的响应中，您可以看到 unshift() 方法在添加到 movieList 数组后返回 5 作为元素的数量。

示例 2

这是 unshift() 函数的另一个示例，我们使用 HTML 按钮来调用函数，以在数组中插入新元素。

复制代码

输出：点击按钮之前

执行上述代码后，您将得到包含三个元素和一个“添加元素”按钮的响应，如下所示。此“添加元素”按钮将帮助您向数组中添加新元素。

输出：点击按钮之后

我们在 JavaScript 代码中提供了另外三个系列名称，以添加到该数组中。因此，当您点击此“添加元素”按钮时，这些元素将被添加到数组中。

示例 3：从用户获取输入

在此示例中，我们将通过 HTML 表单从用户获取输入，以使用 unshift() 方法插入元素。

复制代码

输出：输入新内容之前

执行上述代码后，您最初将获得包含三个电影名称的输出，一个用于从用户获取输入的输入字段，以及一个用于提交输入值的“添加元素”按钮。

请参阅下面的输出

输出：输入新值之后

我们提供了“泰坦尼克号”作为新元素值，并点击了“添加元素”按钮。您将在下面的输出中看到“泰坦尼克号”已成功添加到数组的开头。

以上所有方法都是向数组中添加元素的详细示例。它们的工作方式不同，push() 方法将元素添加到数组的末尾，而 unshift() 方法将元素添加到开头，splice() 函数将元素添加到数组中指定的索引处。