让我们来探索JavaScript中的Slice()， Splice()和Spread Syntax()约翰·保罗·萨默斯

约翰·保罗·萨默斯( John Paul Summers)在Unsplash上的照片

我遇到了这个freeCodeCamp挑战，并在思考如何找到解决它的方法时陷入困境。他们已经提到使用 Slice & Splice 解决问题。当时我很困惑什么时候用Slice，什么时候用Splice。

在这里，我将分享我如何用这些方法解决它。

Slice 和 Splice 都用于操作数组。让我们看看他们是如何做到的。

片段：

Slice 方法接受 2 个参数。

第一个参数：指定应从何处开始选择。

例如：
```
var arr1 = [1,5,8,9];
arr1.slice(1); // [5,8,9]
```
从第一个索引 (5) 开始，它将返回元素。

第二个参数：指定端点应该处于哪个级别。如果在调用 slice 方法时没有将它放在括号中，它将返回从起始索引到数组末尾的元素。
```
var arr1 = [1,5,8,9];console.log(arr1.slice(1,3));
//[ 5, 8 ]
```
如果您在调用时输入负数，则将从数组的末尾选择选择。
```
var arr1 = [1,5,8,9];
console.log(arr1.slice(-2));
//[ 8, 9 ]
```
注意：切片总是从数组中返回选定的元素。

Slice 不会改变数组。阵列保持不变。请参阅以下示例：
```
var arr1 = [1,5,8,9];arr1.slice(2);console.log(arr1);
// [ 1, 5, 8, 9 ]
```
即使您对数组进行了一些更改，它也不会影响它。它将返回最初的原始数组。

拼接：

它可以接受多个参数。

这意味着，

第一个参数：指定应在哪个位置添加/删除新元素或现有元素。如果值为负，则将从数组末尾开始计算位置。

第二个参数：要从起始位置移除的元素数量。如果为 0，则不会删除任何元素。如果没有通过，它将从起始位置删除所有元素。
```
var arr1 = [1,5,8,9];console.log(arr1.splice(1,2));
// [ 5, 8 ]
```
3rd Argument ->nth Argument：要添加到数组中的项目的值。
```
var arr1 = [1,5,8,9];console.log(arr1.splice(1,2,'Hi','Medium'));
// [5,8]
```
您可能认为我们已将 'Hi'、'Medium' 添加到数组中，但此处并未显示...。对？

是的，我们已经安慰了arr1.splice(1,2,'Hi','Medium')。

笔记：
- Splice 将仅返回从数组中删除的元素。
- Splice 会改变原来的数组
```
var arr1 = [1,5,8,9];arr1.splice(1,2,'Hi','Medium');console.log(arr1);
// [ 1, '嗨', '中', 9 ]
```
传播语法：

定义：允许在预期零个或多个参数（用于函数调用）或元素（用于数组文字）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或在零个或多个地方扩展对象表达式键值对（用于对象文字）是预期的。

让我们举一个例子：
```
var arr1 = [1,3,6,7];
var arr2 = [5,arr1,8,9];
控制台日志（arr2）；
// [ 5, [ 1, 3, 6, 7 ], 8, 9 ]
```
我希望它像**[5, 1, 3, 6, 7, 8, 9 ]**这样的单个数组。

我可以使用这个Spread语法来解决这个问题：
```
var arr1 = [1,3,6,7];
var arr2 = [5,...arr1,8,9];
console.log(arr2);// [ 5, 1, 3, 6, 7, 8, 9 ] 
```
Spread 语法的另一个主要用途是复制数组：
```
无功 arr = [1, 2, 3];
var arr2 = arr;
arr2.push(4);
控制台日志（arr2）；
// [ 1, 2, 3, 4 ]
控制台日志（arr）；
// [ 1, 2, 3, 4 ]
```
我只在arr2 中添加了“ 4 ” 。但它也对 arr 进行了更改。

我们可以使用Spread语法解决这个问题，如下所示......
```
无功 arr = [1, 2, 3];
var arr2 = [...arr];
// 像 arr.slice()arr2.push(4);
控制台日志（arr2）；
// [ 1, 2, 3, 4 ]
控制台日志（arr）；
// [ 1, 2, 3]
```
您可以参考MDN文档了解有关 Spread 语法的更多信息。

那么，让我们来看看挑战。
```
函数 frankenSplice(arr1, arr2, n) {
    // 它还活着。它还活着！
    let array2Copy = [...arr2]; 
    array2Copy.splice(n,0, ...arr1);             
    //console.log(array2Copy);
    返回数组2复制；
}
frankenSplice([1, 2, 3], [4, 5, 6], 1);
```
此挑战的主要条件是“在函数执行后不应更改 arr1/arr2”。

因此，创建了一个arr2的副本数组， 并使用 splice****方法将 arr1 添加到名为array2Copy的 arr2 副本中**。**

定论：

->切片方法将
- 从数组中返回选定的元素
- 取 2 个参数
- 不改变原始数组
->拼接方法将
- 返回数组中删除的元素
- 接受多个参数
- 改变原始数组

让我们来探索JavaScript中的Slice()， Splice()和Spread Syntax()

片段：

拼接：

传播语法：

定论：