如何使用 JavaScript 数组拼接方法

2023-01-08 小编

JavaScript 为网页带来了交互性，使它们更加用户友好。Web 开发人员在构建这些应用程序时经常使用数组。

数组是项目的有序列表，每个项目都由索引标识。JavaScript 提供了各种各样的数据操作函数来执行添加、删除、编辑、排序以及对数组执行更多操作。

在本文中，我们将讨论 JavaScript splice（）方法在数组上的使用。此方法可用于保存任何类型的值的数组，例如整数、字符串甚至对象。让我们开始吧。

立即下载：Java & JavaScript 简介

JavaScript 数组拼接有什么作用？

JavaScript 中的 splice（）方法属于 Array.Prototype，在更改数组中的项目时非常方便。

splice（）和 slice（）听起来都与新开发人员相同，但有很大的不同。使用 array slice（）方法，您可以获取数组的一部分，而无需实际修改原始数组。同时，splice（）方法修改原始数组的内容，并返回包含已删除项目的新数组。

使用 JavaScript 数组 splice（）方法，您可以从现有数组中删除项目，向现有数组添加新项目，甚至将现有数组中的项目与新项目交换。

如何使用 JavaScript 数组拼接

splice（）方法通过更改其项来修改原始数组。在数组中添加或删除项目也可能更改其长度。

array.splice（start， deleteCount， element1， element2， ...， elementN）

splice（）方法接受三个参数

启动（必需）。 这是必需参数，具有整数值。此参数提供数组中将进行修改的项的索引/位置。其值可以是 0、负整数或正整数。

零值表示数组索引的开始，而负索引值表示从数组末尾开始计数，从 -1 开始。

JavaScript 数组拼接，整数定位

删除计数（可选）。这是一个可选参数，还保存一个整数值。它指定要从数组中删除的项数，从 start 参数中指定的索引开始。如果不想删除项目，则删除计数参数应为零。如果未指定，则将删除从头开始的所有元素。另一方面，如果其值大于或等于数组的长度，则数组中的所有项目都将从起始索引中删除。
元素 1、元素 2,...,元素 N（可选）。 这也是一个可选参数，它指定要从 start 参数中指定的索引开始添加到数组中的项。如果此参数中未指定任何元素，splice（）将仅从数组中删除项目。
返回值。 此方法返回一个数组，其中包含从原始数组中删除的所有项。如果未删除任何元素，则将返回一个空数组。

JavaScript 数组拼接在行动

让我们进一步了解 splice 方法如何在字符串数组上产生不同的结果。

例 1

let num = ['zero', 'one', 'two', 'three', 'four','five','six'];console.log("Original array :", num);num.splice(2);console.log("Without deleteCount: :", num);// Output// Original array: ['zero', 'one', 'two', 'three', 'four', 'five', 'six']// Output of array after removing item : ['zero', 'one']

例 2

let num = ['zero', 'one', 'two', 'three', 'four','five','six'];console.log("Original array :", num);let deletedElements = num.splice(2, 1)console.log("Output of array after removing item :", num);console.log("Output of deletedElements array:",deletedElements);// Output// Original array: ['zero', 'one', 'two', 'three', 'four', 'five', 'six']// Output of array after removing item : ['zero', 'one', 'three', 'four', 'five', 'six']// Output of deletedElements array : ['two']

例 3

let num = ['zero', 'one', 'two', 'three', 'four','five','six'];console.log("Original array :", num);let deletedElements = num.splice(2, 1, 'seven','eight', 'nine')console.log("Output of array after removing item :", num);console.log("Output of deletedElements array:",deletedElements);// Output// Original array: ['zero', 'one', 'two', 'three', 'four', 'five', 'six']// Output of array after removing item : ['zero', 'one', 'seven', 'eight', 'nine', 'three', 'four', 'five', 'six']// Output of deletedElements array : ['two']

上面的代码在应用 splice 方法后，删除索引 2 处的 1 个项目，并插入第三个参数中指定的 3 个项目，位置从索引 2 开始。

例 4

let num = ['zero', 'one', 'two', 'three', 'four','five','six'];console.log("Original array :", num);num .splice(-3)console.log("Output after applying splice :", num);// Output// Original array: ['zero', 'one', 'two', 'three', 'four', 'five', 'six']// Output of array after removing item : ['zero', 'one', 'two', 'three']

在此示例中，索引值为负整数，我们不指定第二个参数。因此，splice 方法的输出将删除从索引 -3 开始的所有项目。

例 5

let num = ['zero', 'one', 'two', 'three', 'four','five','six'];console.log("Original array :", num);num .splice(-3, 1, 'seven','eight', 'nine')console.log("Output after applying splice :", num);// Output// Original array: ['zero', 'one', 'two', 'three', 'four', 'five', 'six']// Output after applying splice : ['zero', 'one', 'two', 'three', 'seven', 'eight', 'nine', 'five', 'six']

在本例中，我们使用了负指数。因此，数组项“四”将从列表末尾开始删除。“七”、“八”、“九”从位置 -3 开始添加。

如何从数组中删除元素

从数组中删除元素似乎很简单。但是，这可能会导致包含未定义值的空索引。

另一种选择是使用 array.shift（）或 array.pop（）方法，一次只删除一个元素。这些方法还会从数组的开头或数组的末尾删除项。

Javascript Array shift（）

const fruits = ['apple','pineapple','mango','orange']fruits.shift();console.log(fruits);// Output// ['pineapple','mango','orange']

Javascript Array pop（）

const fruits = ['apple','pineapple','mango','orange']fruits.pop();console.log(fruits);// Output// ['apple','pineapple','mango']

但是，如果您需要从数组中间删除多个项目，则应使用 splice（）。

const fruits = ['apple','pineapple','mango','orange']Const removedItems = fruits.splice(1,2)console.log(removedItems)console.log(fruits)// Output// ['pineapple','mango']// ['apple','orange']

在此示例中，数组包含四种类型的水果。我们使用拼接方法删除从索引 1 开始的两个项目。结果，它从水果阵列中去除了菠萝和芒果，否则这是通过移位和流行方法无法实现的。