首页 > 新闻 > 如何使用 JavaScript 数组拼接方法

如何使用 JavaScript 数组拼接方法

2023-01-08 小编

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

两个人在笔记本电脑上使用 JavaScript 数组切片方法

数组是项目的有序列表,每个项目都由索引标识。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 开始的两个项目。结果,它从水果阵列中去除了菠萝和芒果,否则这是通过移位和流行方法无法实现的。

开始使用 JavaScript 数组 splice() 方法。

JavaScript 数组拼接方法使用起来非常方便。通过一些练习,您将能够在任何数据集中添加或删除项目。


*必填

您好,访客!有什么新鲜事想告诉大家?

点击按钮快速添加回复内容: 高兴 支持 激动 给力 加油 生气 路过 威武
发表
暂时还没评论,等你发挥!