【面试题】JavaScript数组切片方法有哪些?

简介: 【面试题】JavaScript数组切片方法有哪些?

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

数组上的slice方法返回数组一部分的浅拷贝。它需要两个数字, astart和 an end。每个数组都有一个slice方法。这是一个简单的例子:

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);
console.log(newArray); // [ '🔑' ]
复制代码

slice该方法有两个可选参数start, 和end。如果您愿意,您可以同时提供两者、仅提供start或都不提供 - 所以所有这些都是有效的:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  // [ '🔑' ]
let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = arrayTwo.slice(2);  // [ '🔑', '🔩' ]
let arrayThree = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayThreeSlice = arrayThree.slice();  // [ '⚡️', '🔎', '🔑', '🔩' ]
复制代码

开始

这是要包含在新数组中的第一项的索引。例如,如果设置为2slice则将在索引 2 处开始新的数组副本。如果使用负数,则表示距序列末尾的偏移量。例如:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2);  // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1);  // [ '🔩' ]
复制代码

结尾

这是从切片数组中排除的第一个元素- 这有点令人困惑。您可能希望end表示要包含的最后一项 - 但它是要排除的第一项。如果你使用,请记住这一点slice!如果省略此参数,则该slice方法将简单地继续到数组的末尾,如下例所示:

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2);  // [ '🔑', '🔩' ]
复制代码

如果使用了大于数组长度的值,slice则只延续到数组的末尾。如果使用负值,则表示距数组末尾的偏移量。例如,(2, -1)将从数组的开头开始为 2,从数组的结尾开始为 -1:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1);  // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1);  // [ '🔎', '🔑' ]
复制代码

使用切片制作数组的副本

Slice不会改变原始数组。相反,它会创建一个新的浅拷贝。因此,您现有的数组仍将继续包含相同的值:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ]
复制代码

由于slice制作了数组的浅拷贝,它有时也用于复制和制作数组数据的副本。例如,一个空slice函数也会在内存中创建一个新数组 - 允许您在内存中拥有相同数组的两个副本且具有相同的引用:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();
arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ]
复制代码

这在某些情况下可能很有用。但是,slice只制作数组的浅拷贝。这意味着当您的数组中有对象时,事情会变得有些混乱。考虑以下数组:

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
复制代码

该数组中包含一个对象。让我们尝试制作这个数组的切片副本,然后更新items

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
let arrayOneSlice = arrayOne.slice(0, 2);
arrayOneSlice[0].items = [ '🔎' ];
arrayOneSlice[1] = '🔎';
console.log(arrayOne); // [ { items: [ '🔎' ]}, '👨‍💻', '😄', '🐔' ]
console.log(arrayOneSlice); // [ { items: [ '🔎' ]}, '🔎' ]
复制代码

等等,什么?我们更改了arrayOneSlice'items对象,但它在arrayOne和中都发生了变化arrayOneSlice!与此同时,arrayOneSlice[1]只是变了arrayOneSlice!欢迎来到另一个 Javascript 怪癖。在第一个示例中,使用arrayOneSlice[0].items符号,Javascript 将其解释为更新浅副本中的现有元素,因此它会影响原始元素。然而,有点令人困惑的是,通过使用该arrayOneSlice[1]符号,Javascript 将其解释为将一个新值放入[1]浅拷贝本身的位置。

这意味着,尽管在使用简单数组时看起来像是在制作副本,但在更复杂的对象上使用它时却不成立。知道这一点小事有一天会为你节省很多时间。slice

结论

JavaScript slice方法对于使用原始数组数据的子集创建新的数组浅拷贝非常有用。它还可以以有限的方式用于制作可以独立更新的副本。JavaScript slice仍然与内存中的原始副本具有相同的引用,这在操作它们时很有用。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
5天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
1天前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
1天前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
4天前
|
JavaScript 测试技术 索引
js数组方法汇总
js数组方法汇总
7 1
|
1天前
|
JavaScript Linux
2022年超详细在CentOS 7上安装Node.js方法(源码安装)
这篇文章介绍了在CentOS 7系统上通过源码安装Node.js的详细步骤,包括从官网下载Node.js源码包、将安装包上传至虚拟机、解压安装包、删除压缩文件、编译安装Node.js、检查Node.js和npm版本,以及切换npm源到淘宝镜像以加速下载。此外,还提供了一个获取Linux下Node.js离线安装包的微信公众号搜索方式。
|
4天前
|
JavaScript 前端开发
javascript中常见获取时间戳的方法
javascript中常见获取时间戳的方法
12 0
|
4天前
|
JavaScript 前端开发
js中this是指向的哪个全局变量,改变this指向的方法有什么?
js中this是指向的哪个全局变量,改变this指向的方法有什么?
6 0
|
5天前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素方法
JavaScript 获取 HTML 元素方法
9 0
|
5天前
|
JavaScript 前端开发 安全
JavaScript实现跳转的方法
JavaScript实现跳转的方法
|
5天前
|
JavaScript 前端开发 索引
JavaScript数组相关的方法有哪些?
JavaScript数组相关的方法有哪些?

热门文章

最新文章