JavaScript 中数组的子集

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 slice() 从数组中提取数组元素的子集
  2. 在 JavaScript 中使用 splice() 从数组中提取数组元素的子集
JavaScript 中数组的子集

数组是编程语言的重要组成部分,因为它们包含许多有序元素。

所有这些项目都通过索引访问。在 JavaScript 中,数组是包含指定键(数字键)的值的常规对象。

数组是具有固定数字键和动态值的 JavaScript 对象,在单个变量中包含任意数量的数据。

数组可以是一维的,也可以是多维的。JavaScript 数组可以存储任何东西,例如直接值或存储 JavaScript 对象。

与其他语言不同,JS 数组可以在同一数组的不同索引处保存不同的数据类型。我们将学习如何在 JavaScript 中提取数组的一些元素或子集。

在 JavaScript 中使用 slice() 从数组中提取数组元素的子集

slice() 方法是 JavaScript 提供的内置方法。此方法在两个位置切割数组。

通过采用两个输入(开始索引和结束索引)来进行切割。并基于此,将返回索引之间的数组部分。

如果只指定了起始索引,则返回到最后一个元素。使用 slice 而不是 splice 的优点是原始数组是未变异,因为它在拼接中。

语法:

slice()
slice(start)
slice(start, end)

startend 索引中的每个元素(包括开始元素和结束前的停止元素)都将插入到新数组中。

结束索引完全是一个可选参数。有关详细信息,请参阅 slice() 方法文档。

const inputArray = [1, 2, 3, 4, 5];
const outputArray1 = inputArray.slice(0, 1);
const outputArray2 = inputArray.slice(1, 3);
const outputArray3 = inputArray.slice(-2);
console.log(outputArray1);  
console.log(outputArray2); 
console.log(outputArray3); 

当我们调用 slice(0, 1) 时,元素 1 从初始数组 inputArray 复制到 outputArray1

如果起始索引大于数组的长度,它将显示为空,并且空数组将作为输出返回。

有趣的是,如果你指定负索引,则输入参数被认为是从序列末尾的偏移量。在任何浏览器中运行上述代码后,它会打印出类似这样的内容。

输出:

[1]
[2, 3]
[4, 5]

在 JavaScript 中使用 splice() 从数组中提取数组元素的子集

splice() 方法影响或修改数组的内容。这是通过删除、替换现有项目并在其位置添加新项目来完成的。

语法:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

JavaScript splice 方法接受三个输入参数,其中第一个是 start

必需参数指定数组的起始位置/索引以修改数组。如果大于数组的长度,则将 start 设置为数组的长度。

在这种情况下,不会删除任何元素,但该方法的行为类似于加法函数,添加与提供的 [n*] 个元素一样多的元素。

如果为负数,则从数组末尾的那么多元素开始。

第二个参数是 deleteCount,一个可选参数。此参数指定要从一开始就删除的数组元素的数量。

如果省略 deleteCount 或其值等于或大于 array.length - start,则删除从数组开头到结尾的所有元素。

0 或负数,不删除任何元素。在这种情况下,你至少需要输入一个新项目。

第三个参数是 itemN...,一个可选参数。此参数指定要添加到数组的元素,从开头开始。

如果你不指定项目,splice() 只会消除数组的元素。

此方法返回一个包含已删除项目的替换数组。如果只删除 n 个元素,则返回一个包含 n 个元素的数组。

如果没有元素被删除,则返回一个空数组。有关详细信息,请参阅 splice 方法文档。

const fruitsArray =  ["Kiwi","Orange","Apple","Banana"];
console.log(fruitsArray, fruitsArray.splice(0, 2));

在上面的示例中,我们指定了各种样式的水果。提取柑橘类水果后,它将影响原始的 fruitsArray 数组并返回一个数组。

这不包含柑橘类水果的名称。在任何浏览器中运行上述代码后,它会打印出类似这样的内容。

输出:

["Apple", "Banana"], ["Kiwi", "Orange"]

要检查完整的工作代码,单击此处

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Array