JavaScript 中数组的子集
数组是编程语言的重要组成部分,因为它们包含许多有序元素。
所有这些项目都通过索引访问。在 JavaScript 中,数组是包含指定键(数字键)的值的常规对象。
数组是具有固定数字键和动态值的 JavaScript 对象,在单个变量中包含任意数量的数据。
数组可以是一维的,也可以是多维的。JavaScript 数组可以存储任何东西,例如直接值或存储 JavaScript 对象。
与其他语言不同,JS 数组可以在同一数组的不同索引处保存不同的数据类型。我们将学习如何在 JavaScript 中提取数组的一些元素或子集。
在 JavaScript 中使用 slice()
从数组中提取数组元素的子集
slice()
方法是 JavaScript 提供的内置方法。此方法在两个位置切割数组。
通过采用两个输入(开始索引和结束索引)来进行切割。并基于此,将返回索引之间的数组部分。
如果只指定了起始索引,则返回到最后一个元素。使用 slice
而不是 splice
的优点是原始数组是未变异
,因为它在拼接中。
语法:
slice()
slice(start)
slice(start, end)
start
和 end
索引中的每个元素(包括开始元素和结束前的停止元素)都将插入到新数组中。
结束索引完全是一个可选参数。有关详细信息,请参阅 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"]
要检查完整的工作代码,单击此处。
相关文章
在 JavaScript 中跟踪鼠标位置
发布时间:2024/03/16 浏览次数:188 分类:JavaScript
-
在本教程中,我们将了解如何在 JavaScript 中使用鼠标事件跟踪鼠标位置。
在 JavaScript 中将 Base64 转换为图像
发布时间:2024/03/16 浏览次数:77 分类:JavaScript
-
将 Base64 字符串转换为图像的最简单方法是调用启动图像构造函数并将 base64 字符串作为图像源的函数。此解决方案需要最少的代码行和努力来获得更好的结果。此外,还有一些复杂的实
使用 JavaScript 将图像转换为 Base64 字符串
发布时间:2024/03/16 浏览次数:144 分类:JavaScript
-
本文将讨论如何通过创建画布并将图像加载到其中,并使用文件读取器方法获取图像的相应字符串,将图像转换为其 base64 字符串表示。
在 JavaScript 中操作图像
发布时间:2024/03/16 浏览次数:175 分类:JavaScript
-
本文将介绍 JavaScript 中的图像处理功能。我们将使用 CamanJS 这是一个 JavaScript 库来操作图像。
在 JavaScript 中交换图像
发布时间:2024/03/16 浏览次数:134 分类:JavaScript
-
本教程展示了如何使用 JavaScript 简单地交换图像。你将学习如何使用不同的方法交换图像,例如使用 onclick、鼠标单击和按钮单击。
使用 JavaScript 将 SVG 转换为 PNG
发布时间:2024/03/16 浏览次数:121 分类:JavaScript
-
本教程教授如何从 SVG 创建 PNG 图像。我们将使用 Canvg JavaScript 库和 toDataURL 方法。