跳转到主内容
极星编程网:以代码为星,赴技术山海!

JS Array方法详解之如何区分slice和splice

目录

省流总结:

一、 slice():不改变原数组 ,返回“切片”

功能:

语法:

特点:

二、splice():直接修改原数组

功能:

语法: array.splice(起始索引, 删除数量, 插入的新元素)

删除元素示例:

插入元素示例:

替换元素示例:

特点:

slice vs splice 对比表:

常用通用写法总结:

拷贝数组:

提取最后三个元素:

清空数组(splice):

插入新元素到中间:

总结

省流总结:

slice (起, 终),切片 ,复制,返回新数组,不改原数组splice(起, 删几个, 插入哪几个),增删改,改 原数组,返回被改后的原数组。

一、

slice():不改变原数组 ,返回“切片”

功能:

从原数组中提取部分元素,返回一个新数组,原数组不变。

语法:

array.slice(start, end)start:起始索引(包含)

end:结束索引(不包含)

例子:

const arr = [10, 20, 30, 40, 50];const newArr = arr.slice(1, 4);console.log(newArr); // [20, 30, 40]console.log(arr); // 原数组不变 [10, 20, 30, 40, 50]

特点:

适合“复制数组

”:

const copy = arr.slice();不破坏原数组,返回值是新的数组

二、splice():

直接修改原数组

功能:

删除元素插入元素替换元素语法: array.splice(起始索引, 删除数量, 插入的新元素)array.splice(start, deleteCount, item1, item2, ...) start:开始修改的位置索引deleteCount:要删除的元素数量item1...:要插入的新元素(可选)

删除元素示例:

const arr = [1, 2, 3, 4, 5];arr.splice(2, 2); // 从索引 2 开始删除 2 个元素console.log(arr); // [1, 2, 5]

插入元素示例:

const arr = [1, 2, 5];arr.splice(2, 0, 3, 4); // 在索引 2 位置插入 3 和 4 console.log(arr); // [1, 2, 3, 4, 5]

替换元素示例:

const arr = [1, 2, 3];arr.splice(1, 1, 'a', 'b'); // 把索引1的 1 个元素换成 'a' 和 'b'console.log(arr); // [1, 'a', 'b', 3]

特点:

原地修改原数组;

返回值是被删除的元素组成的新数组。

slice vs splice 对比表:特性slice() splice()原数组是否改变❌ 否(不改变)

✅是(原地修改)

返回值提取的新数组被删除的元素数组用于拷贝、截取删除、插入、替换是否支持插入❌ 不支持✅ 支持

常用通用写法总结:

拷贝数组:

const newArr = arr.slice();

提取最后三个元素:

const last3 = arr.slice(-3);

清空数组(splice):

arr.splice(0, arr.length); // 原数组变为空

插入新元素到中间:

arr.splice(2, 0, '新元素');总结到此这篇关于JS Array方法详解之如何区分slice和splice的文章就介绍到这了,更多相关JS Array方法区分slice和splice内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:JS Array.slice 截取数组的实现方法浅谈javascript的Array.prototype.slice.call js Array.slice的8种不同用法示例javascript Array.prototype.slice使用说明javascript Array.prototype.slice的使用示例JS Array创建及concat()split()slice()的使用方法js利用prototype调用Array的slice方法示例

相关文章