在前端开发中，我们经常需要对数组进行操作。ES7 中的 Array.prototype.slice 方法和 Array.prototype.splice 方法都是用于对数组进行切片或者删除的方法，但是它们有着不同的使用方式和作用。在本文中，我们将会详细介绍这两种方法的区别和使用方法，以及它们的指导意义和实际应用场景。
Array.prototype.slice 方法
Array.prototype.slice 方法用于从已有的数组中返回一个新的数组，该数组是由原数组的一部分元素组成的。该方法接受两个参数：开始索引和结束索引。开始索引是必需的，而结束索引是可选的。如果省略结束索引，则会一直切到数组末尾。
下面是一个使用 Array.prototype.slice 方法的示例代码：
const fruits = ['apple', 'banana', 'orange', 'pear', 'kiwi']; const citrus = fruits.slice(2, 4); console.log(citrus); // ['orange', 'pear']
在上面的代码中，我们首先定义了一个数组 fruits，然后使用 slice 方法从 fruits 数组中切出了一个新的数组 citrus，该数组包含了 fruits 数组中索引为 2 到 4 的元素（不包括索引为 4 的元素）。
需要注意的是，slice 方法并不会修改原数组，而是返回一个新的数组。这意味着我们可以在不影响原数组的情况下对它进行切片操作。
Array.prototype.splice 方法
Array.prototype.splice 方法用于向或从数组中添加或删除元素。该方法接受三个参数：起始索引、要删除的元素个数和要添加的元素。其中，起始索引是必需的，而删除元素和添加元素都是可选的。
下面是一个使用 Array.prototype.splice 方法的示例代码：
const fruits = ['apple', 'banana', 'orange', 'pear', 'kiwi']; const removed = fruits.splice(2, 2, 'grape', 'peach'); console.log(fruits); // ['apple', 'banana', 'grape', 'peach', 'kiwi'] console.log(removed); // ['orange', 'pear']
在上面的代码中，我们首先定义了一个数组 fruits，然后使用 splice 方法从 fruits 数组中删除了索引为 2 和 3 的元素，并添加了两个新的元素 grape 和 peach。该方法返回一个数组，其中包含了被删除的元素。
需要注意的是，splice 方法会修改原数组。因此，在使用该方法时需要小心，以免意外修改原数组。
区别和应用场景
总的来说，Array.prototype.slice 方法用于从已有数组中返回一个新的数组，而 Array.prototype.splice 方法用于向或从数组中添加或删除元素。它们的主要区别在于返回值和是否修改原数组。
在实际应用中，我们可以根据不同的需求选择使用不同的方法。如果我们只需要从数组中获取一部分元素，并且不想修改原数组，那么可以使用 Array.prototype.slice 方法。而如果我们需要向数组中添加或删除元素，或者需要修改原数组，那么就需要使用 Array.prototype.splice 方法。
下面是一些常见的应用场景：
- 使用 Array.prototype.slice 方法可以方便地进行数组分页，例如将一个大数组分成多个小数组。
- 使用 Array.prototype.splice 方法可以方便地向数组中添加或删除元素，例如在表格中添加或删除一行数据。
结论
在本文中，我们详细介绍了 ES7 中的 Array.prototype.slice 方法和 Array.prototype.splice 方法的区别和使用方法，以及它们的指导意义和实际应用场景。希望这篇文章能够帮助你更好地理解和应用这两种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67615946856ee0c1d4f79c7d