迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中数组的子集

作者:迹忆客 最近更新:2024/03/16 浏览次数:

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

所有这些项目都通过索引访问。在 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"]

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便