JavaScript数组方法slice()的5个示例

如题所述

其他回答

第1个回答 2024-09-04

slice()方法将数组部分的副本返回到新的数组对象中。这个对象是从start到end选择的。需要注意的是，此方法不会修改原始数组。此外，如果向其中一个数组添加新元素，则另一个数组不会受到影响。

语法

slice()方法的参数是数组的开始和结束索引。

start

start是一个从0开始的索引，用于开始复制数组的一部分。如果未定义，start的默认值为0。如果start大于数组的索引范围，slice()方法将返回一个空数组。

此外，start还可以使用负索引。slice(-1)提取数组的最后一个元素。

end

end参数是可选的。如果slice()函数中只有一个参数，那就是start。如果省略，slice()方法从数组的末尾开始提取。

如果end大于数组的长度，slice()一直提取到数组的末尾，只是在它被省略的情况下。

end是提取此索引之前的元素，不包括索引end在内。因此，索引的最后一个元素不包含在数组的副本中。例如，slice(1,3)提取是数组的第二个和第三个元素，即从数组的索引1开始，包含索引1的值到索引3之间的数组，但不包含索引为3的元素。

constarrNumbers=[1,3,5,6,7];console.log(arrNumbers.slice(0,3));//[1,3,5]

这意味着复制数组arrNumbers从索引0开始到索引3之间的元素，不包含索引为3的元素。

1.复制数组

第一个示例是slice()函数的基本功能，没有参数的数组复制原始数组。有时，可能想要更新数组中的某些元素。但是，可能需要保护原始数组中的元素，可以使用slice()创建原始数组的浅复制。

constarrNumbers=[1,2,3,4,5,6];constcopyNumbers=arrNumbers.slice();console.log(copyNumbers);//[1,2,3,4,5,6]copyNumbers[1]=0;console.log(copyNumbers);//[1,0,3,4,5,6]console.log(arrNumbers);//[1,2,3,4,5,6]2.从索引n开始的子数组

slice()方法的第二个示例是复制从数组索引n开始的子数组。

constarrNumbers=[1,2,3,4,5,6];constcopyNumbers=arrNumbers.slice(2);console.log(copyNumbers);//[3,4,5,6]

也可以复制数组最后n位元素，就是使用-n作为参数，如下：

constarrNumbers=[1,2,3,4,5,6];constcopyNumbers=arrNumbers.slice(-2);console.log(copyNumbers);//[5,6]3.类数组对象转换为数组

可以使用slice()方法将看起来像数组的对象转换为数组。例如，如下代码片段：

functiontransformToArray(){returnArray.prototype.slice.call(arguments);}constnewArray=transformToArray("1","2","3","4");console.log(newArray);//['1','2','3','4']

以上代码片段可以用来定义可变参数的函数。

4.将NodeList转换为数组

NodeList对象是从文档中提取的节点集合，可以使用方法querySelectorAll()方法返回节点列表对象。例如，可以选择HTML文档中的所有<p>节点，可以使用slice()将选定的节点列表转换为数组。

constelemP=document.querySelectorAll("p");constelemNodes=Array.prototype.slice.call(elemP);console.log(elemNodes);5.替换字符串中的特定索引

可以使用slice()函数创建替换函数。

String.prototype.append=function(index,value){return`${this.slice(0,index)}${value}${this.slice(index)}`;};consttestString="新年";console.log(testString.append(2,"快乐"));//新年快乐总结

学习JavaScript内置函数的使用方法和示例可以提高编码技能，扩展编码思维，增加更多解决问题的方法。slice()是数组中非常有用的内置函数。