JavaScript中slice与splice截取数组的区别与用法
本文详细介绍JavaScript中两种常用的数组截取方法:slice和splice。slice用于提取数组片段并返回新数组,不修改原数组;而splice可直接修改原数组,支持删除、插入或替换元素。通过具体代码示例,解析两者的参数用法、返回值及边界情况,帮助开发者根据需求选择合适的方法。
一、slice()
语法格式为array.slice([start], (end))。slice方法的作用是从指定位置截取元素并返回一个新的数组,原数组的结构和元素保持不变。
| 参数 | 描述 |
|---|---|
| start | 可选。规定从何处开始截取元素。slice(-2)代表倒数第二个元素到最后元素 |
| end | 可选。规定从何处结束截取元素,不包含当前index,slice(-2,-1)指的是倒数第二个元素不包含最后一个元素 |
起始参数start可以为负数,例如-1代表数组的最后一个元素。结束参数end为可选参数,截取范围不包含end索引处的元素,实际返回的数组长度等于end减去start的值。
二、splice()
语法格式为array.splice(index, howmany, item1,.....,itemX)。splice方法不仅可以删除数组中的指定项,还可以向数组中添加新的元素。
| 参数 | 描述 |
|---|---|
| index | 必需。规定从何处添加/删除元素。 |
| howmany | 可选。规定应该删除多少元素。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
| itemX | 可选。要添加到数组的新元素 |
示例:
当从array中执行删除操作时,splice会返回一个包含被删除元素的数组,同时原数组会被直接修改。
var arr = ["苹果","西瓜","草莓"];
var delArr = arr.splice(1, 2); // 从index=1,开始删除2个元素;
console.log(arr); // ["苹果"];
console.log(delArr ); // ["西瓜","草莓"];var arr = ["苹果","西瓜","草莓"];
arr.splice(1, 2, "荔枝", "龙眼"); // 从index=1处,开始删除2个元素,并插入[荔枝]和[龙眼];
console.log(arr); // ["苹果", "荔枝", "龙眼"];var arr = ["苹果","西瓜","草莓"];
arr.splice(1, 0, "荔枝", "龙眼"); // 从index=1处,插入[荔枝]和[龙眼];
console.log(arr); // ["苹果", "荔枝", "龙眼","西瓜","草莓"];附:提取数组中介于两个指定下标之间的字符
slice(start, end): 该方法从下标为start的成员开始提取,直到下标为end时停止截取。第二个参数是可选的,如果不填写第二个参数,截取操作会一直进行到数组末尾。如果start和end参数一致,则不执行任何截取操作,返回一个空数组。需要注意的是,如果截取范围导致越界,不会报错,而是直接截取到最后一个元素;若第一个参数大于第二个参数,则不执行截取,返回空数组。
let str = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
let a = str.slice(2, 5) // ['c', 'd', 'e', 'f']let str = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
let b = str.slice(2) // ['c', 'd', 'e', 'f', 'g', 'h']let str = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
let a = str.slice(2, 2) // []let str = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
let a = str.slice(2, -2) // 参数为负数的时候会自动把 -2 转化为 str.length - 2总结
到此这篇关于JS截取数组操作的文章就介绍到这了,更多相关JS截取数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
