Question

我正在尝试将数组复制到新变量，然后修改该数组。

代码：

    var test = [
        { test: "test1", arr: ["1", "2", "3"] },
        { test: "test2", arr: ["4", "5", "6"] }
    ];

    console.log("test before", test);
    console.log("test before", test[1]);
    console.log("test before", test[1].arr);

    var t2 =  [...test] // used .slice(0) but same result
    t2[1].arr = t2[1].arr.slice(0, 1);

    console.log("test after", test[1].arr);
    console.log("t2", t2[1].arr);

输出：

test before:  
0: {test: "test1", arr: Array(3)} //arr: (3) ["1", "2", "3"]
1: {test: "test2", arr: Array(1)} // arr: (1) ["4"]

test before: 
{test: "test2", arr: Array(3)} //arr: (1) "4"

test before: (3) ["4", "5", "6"]

test after: ["4"]

t2: ["4"]

如您所见，散布运算符/ slice（）正在修改原始值。
我也尝试使用var t2 = Object.Create(test) [结果相同]。

Answer 1

将对象/数组分配给变量时，它不会复制它。我只是设置了对原始对象/数组的引用。您应该使用Object.assign进行浅克隆，而使用JSON.parse(JSON.stringify(obj))进行深克隆
注意：数组实际上是javascript中的对象

    var test = [
        { test: "test1", arr: ["1", "2", "3"] },
        { test: "test2", arr: ["4", "5", "6"] }
    ];
    
    console.log("test before", test);
    console.log("test before", test[1]);
    console.log("test before", test[1].arr);
    
    var t2 =  JSON.parse(JSON.stringify(test)) // used .slice(0) but same result
    t2[1].arr = t2[1].arr.slice(0, 1);
    
    console.log("test after", test[1].arr);
    console.log("t2", t2[1].arr);

但是，此JSON.parse(JOSN.stringify(obj))效率不高，在某些情况下会给出错误的输出。

使用jQuery

$.extend(true, {}, obj);

使用lodash

_.cloneDeep(value)

here您可以找到有关此内容的详细信息

Answer 2

数组扩展（或Array.slice（））只是原始数组的浅表副本，因此子对象仍然相同。

有关对象深层复制的更多详细信息，请查看：How do you clone an Array of Objects in Javascript?

数组Slice（）修改原始数组

2 个答案:

使用jQuery

使用lodash