（全文需要 4 分钟阅读时间）

slice 还是 splice？

在 Javascript 中，许多概念看起来很奇怪，有些看起来很混乱。 一组听起来相似但工作方式不同的功能是 slice 和 splice。

作为开发人员，经常得处理数组。 知道有 slice 和 splice 可以用，不过，我再次参考了文档或示例来对比它们的行为。

我觉得主要的罪魁祸首是我们传递给这些方法的参数以及考虑参数的方式。

不得不说，不区分好这些细节的混乱，会让你在写完代码结束的时候感觉非常的难受。

我想过是否有办法让我永远记住所有这些内容，并避免再次查看文档。

下面我想出的对我有用的方法：

slice：

在字典里看看切片（slice）的含义：从大部分地方切下的一块。

你可以把苹果看成是一个数组：假设我有一个神奇的苹果（我稍后会解释为什么它是神奇的），我要从一端到茎（茎末端 - 见上图）取一片。 但是我不想吃茎，而是要一片直到茎的苹果。 Javascript slice 方法就是如此，它给出了一个数组的切片，直到结束索引但不包括它（你当然不会想要吃茎，对吧！）。接下来让我们看看语法。

slice(start, end).

了解 start 和 end 参数即可。

start 是可选的。 如果没有给出，则从苹果一端的索引开始提取。 负值表示从苹果的另一端提取。 如果起始索引大于芒果的大小，则会在苹果外切开，没有得到任何一块。

end 索引是可选的。 如果给定，则提取就在此位置之前结束。 如果没有给出，提取会一直持续到苹果的另一端。 负值表示从另一端开始计数。 如果末端大于苹果的大小，那么，结果显而易见了。

这里要记住的一个非常重要的一点是，开始和结束都是从苹果的一端开始计算的。 （数组的开头）

    let fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]

    let citrus = fruits.slice(1, 3)

    //  [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]

    //  [‘Orange’,’Lemon’]

现在解释神奇这个词。 如果我把你想要的部分切片，神奇的苹果会填满切好的部分，又变成一个完整的苹果。 这是为了解释切片不会影响或改变原始数组。 Slice 只是给出了一个包含所请求元素的新数组。 Slice 对你要求的元素进行浅拷贝，并在不更改原始数组的情况下将其提供给你。

splice：

字典的含义 ：通过在末端交织的线来连接（一根或多根绳索）。

为了理解拼接，让我们以字典定义的 splice 为例。

splice(start, deleteCount, item1, item2, itemN);

在我们的例子中，我想对绳索做一些事情。 假设从一个点开始，一定数量的线被损坏。 我想切割并移除它们。 deleteCount 出现在这里。 它从提到的起点开始计算损坏的线。 因此，本质上来说，从此时开始，移除损坏的部分（如果有）并系上一些新绳索（item1、item2、itemN）（如果有的话）。

请看以下的代码示例：

    let myFish = [‘angel’, ‘clown’, ‘trumpet’, ‘sturgeon’]

    let removed = myFish.splice(0, 2, ‘parrot’, ‘anemone’, ‘blue’)

    //  [“parrot”, “anemone”, “blue”, “trumpet”, “sturgeon”]

    //  [“angel”, “clown”]

如果发生拼接，我们将返回绳索的移除部分并更改原始绳索。

这意味着返回值是一个已删除项的数组，原始数组被更改。

概括

slice 和 splice 都适用于数组，但它们的工作方式不同。

与从 startIndex 开始计数的 splice 中的 deleteCount 相比，切片中的结束索引从数组的开头开始计数。

slice 不会改变原始数组，而 splice 会改变原始数组。

这就是我在这篇文章中所能说的。 如果需要更深入的理解，请在阅读完后参考 MDN 文档。

以上为个人总结，难免会有错误，若有任何错误，请在评论区指出或者私信我！