Question

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

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

A

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

B

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

首先，语句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..)。根据{{3}}，它将在位置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 2

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

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

B连接[2,0]和["Lemon", "Kiwi"]，然后将它们作为逗号分隔的参数传递给拼接，例如

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

如下所示修改数组

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

Answer 3

根据函数签名中的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");）成为...。

在上述代码中，您说的是从索引"Lemon"中添加"Kiwi"，2，并删除0个项目。

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

现在在A：

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

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

Answer 4

首先，您需要了解接头的工作原理

array.splice（start [，deleteCount [，item1 [，item2 [，...]]]]）

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

现在，您对拼接处很清楚，因此，请逐步放开对这些说明的更清楚的了解。

以下声明

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

串联后变为

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

传播后变为

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

然后，拼接将从索引2中获取结果，不删除任何内容（给定为零），并添加其余参数，例如“ Lemon”和“ Kiwi”

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

与

相同

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

拼接将从索引2中获取结果，不删除任何内容（再次为零），并添加其余参数，即“ [“”柠檬“，”奇异果“]”

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

希望对您有帮助。

Answer 5

所有其他答案正确地描述了splice方法并传播了运算符的行为，但是没有一个答案能纠正您对结果的误解。

您实际上看到的是splice方法的返回值，它是 包含已删除元素的数组 在两个方法调用中都不是。这就是为什么您得到一个空数组的原因。

要查看调用splice方法的行为，您需要在每次调用后记录fruits数组（而不是方法的返回值），该数组位于您的case并没有太大用处，因为您对fruits数组的期望在第二次调用中不成立。

Answer 6

不使用点差，B为：

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

concat有点令人困惑，它也可能被写为：

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

或者：

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

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

6 个答案: