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

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位插入一个array()作为数组元素,同时删除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输入两个字符串(柠檬和猕猴桃),同时删除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

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

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

乙concats [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项.

在这种情况下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(从零开始索引),要删除的元素数,以及rest将在该起始索引处添加任何参数.

现在你很清楚拼接,所以让我们一步一步地更清楚地理解这些陈述.

以下声明

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

所有其他答案都正确地描述了splice方法和传播操作员行为,但没有人试图纠正您对结果的误解.

你所看到的实际,是返回值的splice方法,这是包含已删除元素的数组,这两个方法调用,没有.这就是为什么你得到一个空数组的结果.

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