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()
是数组中非常有用的内置函数。