【Javascript修炼篇】一文搞懂Splice 和 Slice区别

它们因不同的目的而生，却在不少场景下长得一副模样。咱们不卖关子，直接开讲，先把这团疑惑的雾拨开。

小贴士 1： 先瞅瞅它们的字面意思

• Splice：把（绳子的）末端交织起来连接或接合。
• Slice：（尤指食物）切成片。

得，先谢过谷歌大神提供的释义，感恩的心，感谢有你~ 😃

希望这波解释能让你心里有点谱了。

小贴士 2： 虽说不太直观，但这招能帮你再理清一点。记着，splice 的英文原意暗示它“更长”，体现在用法上，就是它接受的参数比 slice 多。瞅瞅官方定义：

• arr.splice(start, deleteCount, item1, item2, ..., itemN);
• arr.slice(start, end);

小贴士 3： 技术性区别来了，splice 会直接改原数组，而 slice 就是个乖乖仔，不动原数组分毫。

想想你要面包片时会咋做，这事儿就简单了。

别费心全记住，挑个对你胃口的点记牢就行。

👉 如果你有别的妙招记住它们，评论区见哦！

现在，来点硬核的。它们到底干啥的？

先说 splice：

这是 JavaScript 数组的方法，能删、能换、还能往数组里添新元素。

• 直接改原数组。
• 用法：splice(start, deleteCount, item1, item2, ..., itemN);

start 是动手脚的起始位置；deleteCount 是从这位置起要移除的元素数量，可选；item1, item2 那些是想加进数组的新元素。

splice 返回被移除的元素组成的数组，如果没有移除则返回空数组。

let fruits = ['苹果', '香蕉', '芒果', '葡萄', '橙子'];
fruits.splice(5, 1); // 超出长度，啥也不干
> []

fruits.splice(1, 1); // 移除香蕉
> ['香蕉']
fruits
> ['苹果', '芒果', '葡萄', '橙子']

fruits.splice(1, 0, '香蕉'); // 不删，原地加香蕉
> []
fruits
> ['苹果', '香蕉', '芒果', '葡萄', '橙子']

fruits.splice(-1, 1); // 橙子拜拜
> ['橙子']
fruits
> ['苹果', '香蕉', '芒果', '葡萄']

fruits.splice(1, 0); // 无增无减，空操作
> []
fruits
> ['苹果', '香蕉', '芒果', '葡萄']

fruits.splice(1, 1, '新香蕉'); // 香蕉换新
> ['香蕉']
fruits
> ['苹果', '新香蕉', '芒果', '葡萄']

fruits.splice(2); // 从芒果开始全砍
> ['芒果', '葡萄']
fruits
> ['苹果', '新香蕉']

fruits.splice(0); // 清空数组
> ['苹果', '新香蕉']
fruits
> []

👉 上面的例子应该挺全面了，如果还有啥新鲜玩法，欢迎留言，我随时乐意更新文章。

轮到 slice 登场：

切片高手，浅拷贝数组一段出来，原封不动保留原数组。

• 语法：slice(start, end)，从 start（含）截取到 end（不含），支持负数表示倒数位置。

let fruits = ['苹果', '香蕉', '芒果', '葡萄', '橙子'];

let copiedFruits = fruits.slice(1, 4);
copiedFruits
> ['香蕉', '芒果', '葡萄']

let fromThird = fruits.slice(3);
fromThird
> ['葡萄', '橙子']

let beyondEnd = fruits.slice(5); // 超出范围，空数组
beyondEnd
> []

let fullCopy = fruits.slice();
fullCopy
> ['苹果', '香蕉', '芒果', '葡萄', '橙子']

let negLast = fruits.slice(-1);
negLast
> ['橙子']

let negRangeEmpty = fruits.slice(-3, 2); // 空区间，空数组
negRangeEmpty
> []

let negRangeOne = fruits.slice(-3, -2);
negRangeOne
> ['芒果']

let negIndex = fruits.slice(-4);
negIndex
> ['香蕉', '芒果', '葡萄', '橙子']

let negBigOffset = fruits.slice(-6);
negBigOffset;
> ['苹果', '香蕉', '芒果', '葡萄', '橙子']

跟数组的 slice 类似，字符串也有个 slice 方法，作用差不多，但人家专攻字符串领域。

好啦，今天的分享就到这里，希望对你有帮助。😊