如何理解js数组的splice函数？和slice函数有何区别？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔在本文中描述一个js的splice函数，和数组切割函数slice类似，splice也是一个对数组进行切割的函数。splice在切割数组的同时，还可以组装数组。这是splice和slice最明显的区别。

苏南大叔的程序如此灵动博客，记录苏南大叔的代码所学所想。本文测试环境：node@16.14.2。

splice对比slice

被剪切的内容 = 会被修改的数组.splice(起始位置,长度,被添加到起始位置的内容)

被剪切的内容 = 数组.slice(起始位置(包含),终止位置(不包含))

splice测试代码

应该注意到一个非常有意思的事情，这个list是使用const定义的。按理说是个不能被修改的常量。我们用函数去修改它的时候，会报错。但是，splice()函数却具有修改变量的能力。所以，奇怪的事情就这么发生了，一个不能被修改的常量就被修改了。

const list = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp = list.splice();                       // 不做任何操作，返回空
console.log(list, tmp);
// [ 'sunan0', '苏南1', 'sunan大叔2' ] []

const list_ = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp_ = list_.splice(1);                    // 1号及以后都删除
console.log(list_, tmp_);
// [ 'sunan0' ] [ '苏南1', 'sunan大叔2' ]

const list_0 = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp_0 = list_0.splice(1, -1);               // 不做任何操作，返回空
console.log(list_0, tmp_0);
// [ 'sunan0', '苏南1', 'sunan大叔2' ] []

const list_1 = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp_1 = list_1.splice(1, 1);               // 删除1个，无新数据
console.log(list_1, tmp_1);
// [ 'sunan0', 'sunan大叔2' ] [ '苏南1' ]

const list_2 = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp_2 = list_2.splice(1, 0, '苏南大叔');   // 删除0个，新数据成为新的1号，实际效果为添加
console.log(list_2, tmp_2);
// [ 'sunan0', '苏南大叔', '苏南1', 'sunan大叔2' ] []

const list_3 = ['sunan0', '苏南1', 'sunan大叔2'];
var tmp_3 = list_3.splice(1, 2, '苏南大叔啊', '真的苏南大叔'); 
// 在1号位置（包括1号）删除2个，新的数据为1号，实际效果为替换
console.log(list_3, tmp_3);
// [ 'sunan0', '苏南大叔啊', '真的苏南大叔' ] [ '苏南1', 'sunan大叔2' ]

对照组，slice测试代码

const list_4 = ['sunan0', '苏南1', '-1sunan大叔2'];
var tmp_4 = list_4.slice(1);        // [1,)
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] [ '苏南1', '-1sunan大叔2' ]

var tmp_4 = list_4.slice(1, -1);    // [1，-1)
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] [ '苏南1' ]

var tmp_4 = list_4.slice(1, 0);     // [] 第二个参数必须大于第一个
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] []

var tmp_4 = list_4.slice(1, 1);     // [] 第二个参数必须大于第一个
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] []

var tmp_4 = list_4.slice(1,2);      // [1,2)
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] [ '苏南1' ]

var tmp_4 = list_4.slice(1,3);      // [1,3)
console.log(list_4, tmp_4);
// [ 'sunan0', '苏南1', '-1sunan大叔2' ] [ '苏南1', '-1sunan大叔2' ]

参考文章：
https://newsn.net/say/js-slice.html

相关链接

• https://newsn.net/say/js-call.html
• https://newsn.net/say/js-apply.html
• https://newsn.net/say/js-bind.html

结束语

苏南大叔写的js相关文章，请点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。