展开语法如何影响数组拼接

Question

我找到了下面的代码，不知道A和B有什么区别：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

一个

fruits.splice(2,0,["Lemon", "Kiwi"]);

乙

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var A = fruits.splice(2, 0, ["Lemon", "Kiwi"]);
var B = fruits.splice(...[2, 0].concat(["Lemon", "Kiwi"]));

console.log(A)
console.log(B)

Answer 1

根据函数签名中的 doc：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

在 B 中：

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

因为[2,0].concat(["Lemon", "Kiwi"])表示[2,0,"Lemon", "Kiwi"].

因此 fruits.splice(...[2,0,"Lemon", "Kiwi"]); 使用扩展运算符 (...) 变为 fruits.splice(2,0,"Lemon", "Kiwi");。

上面的代码是从索引 2 添加 "Lemon"、"Kiwi"，但不删除 0 项。

在这种情况下2是start索引，deleteCount是0，item1是"Lemon"，item2 是 "Kiwi".

现在在 A:

fruits.splice(2,0,["Lemon", "Kiwi"]);

您说的是从索引 2 添加 ["Lemon", "Kiwi"]，删除 0 项。在这种情况下 2 是 start 索引，deleteCount 是 0，item1 是 ["Lemon", "Kiwi"].

Answer 2

A 将 ["Lemon", "Kiwi"] 视为一项并将其插入给定索引

["Banana", "Orange", ["Lemon", "Kiwi"], "Apple" , "Mango"];

B concats [2,0] 和 ["Lemon", "Kiwi"] 然后将它们作为逗号分隔的参数传递给 splice

fruits.splice(2,0,"Lemon", "Kiwi");

如下修改数组

["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

Answer 3

不使用点差，B 是：

fruits.splice( 2, 0, "Lemon", "Kiwi" );

concat有点乱，也可以写成：

fruits.splice( ...[ 2, 0 ], ...[ "Lemon", "Kiwi" ] );

或者：

fruits.splice( ...[ 2, 0, "Lemon", "Kiwi" ] );

Answer 4

首先你需要了解拼接是如何工作的

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

它需要开始（从零开始的索引）、要删除的元素数，其余的任何参数都将添加到该起始索引处。

现在你对拼接已经很清楚了，所以为了更清楚地理解这些语句，请逐步放手。

下面的语句

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

拼接后变为

fruits.splice(...[2,0,"Lemon", "Kiwi"]);

展开后变成

fruits.splice(2,0,"Lemon", "Kiwi");

然后 splice 将从索引 2 获取结果并删除任何内容（如给定零）并添加其余参数，即 "Lemon" 和 "Kiwi"

所以你得到 ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

其中

fruits.splice(2,0,["Lemon", "Kiwi"]);

拼接将从索引 2 中获取结果并删除任何内容（同样为零）并添加其余参数，即“["Lemon", "Kiwi"]”

所以你得到["Banana", "Orange", ["Lemon", "Kiwi"], "Apple", "Mango"]

希望对您有所帮助。

Answer 5

首先，语句 A 和语句 B 会产生不同的结果。

在 Statement A 中，您在位置 2 插入一个数组 (["Lemon", "Kiwi"]) 作为数组元素，同时删除 0 个项目。因此，您要在位置 2 的另一个字符串数组中插入一个字符串数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];


fruits.splice(2,0,["Lemon", "Kiwi"]);

console.log(fruits);

不过，Statement B更有趣。为了完全理解它，首先像这样注销它的核心部分：

console.log(...[2,0].concat(["Lemon", "Kiwi"]));  // basic array concatenation then spread

如您所见，它生成了 2 0 Lemon Kiwi。然后它作为参数传递给 fruits.splice(..here..)。根据 array#splice 它将在位置 2 处输入两个字符串 (Lemon & Kiwi)，同时删除 0 个元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));
// is same as fruits.splice(2, 0, 'Lemon', 'Kiwi')

console.log(fruits);

注意：

array#splice 更新原始数组.
Statement A 在父字符串数组中插入一个 array (IE ["Lemon", "Kiwi"]) 而 Statement B 插入 父字符串数组中的两个字符串 (IE 'Lemon', 'Kiwi').

Answer 6

所有其他答案都正确地描述了 splice 方法和传播运算符的行为，但 none 试图纠正您对结果的误解。

你实际看到的，是splice方法的return值，也就是an包含已删除元素的数组 ，在您的两个方法调用中都是 none。这就是为什么你得到一个空数组作为结果。

要查看调用 splice 方法的行为，您需要在每次调用后记录 fruits 数组（而不是 return 值 的方法），这在你的情况下并不是很有用，因为你对 fruits 数组的期望在第二次调用中不成立。

展开语法如何影响数组拼接

How does the spread syntax affect array splice

javascript

arrays

spread-syntax