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

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

首先，语句 A 和语句 B 将生成不同的结果。

在Statement A中，您将一个数组 (["Lemon", "Kiwi"]) 作为数组元素插入到位置 2，同时删除 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 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

根据函数签名中的文档：

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个项目。

在这种情况下，2start索引，deleteCount0，item1"Lemon"，item2"Kiwi"。

现在在 A 中：

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

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

Answer 4

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

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

要查看调用splice方法的行为，您需要在每次调用后记录fruits数组(而不是方法的返回值)，这在您的情况下并没有多大用处，因为您对fruits数组的期望在第二次调用中并不成立。

Answer 5

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

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 中获取水果并删除任何内容(给定零)并添加其余参数，即"柠檬"和"猕猴桃">

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

其中如

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

拼接将从索引 2 中获取果实并删除任何内容(再次给定零)并添加其余参数，即"["柠檬"、"猕猴桃"]">

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

我希望它有所帮助。

Answer 6

不使用点差，B 为：

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

concat有点令人困惑，它也可以写成：

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

或：

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