使用扩展运算符深度复制数组的语法

Question

我知道可以通过以下方式深度复制对象和数组，

使用对象：方式 1：JSON方式

const obj1 = {
        id: 5,
        names: {
            first: 'tinu',
            last: {
                other: 'k'
            }
        }
    };
    
    //Deep copy way 1: JSON way
    const obj2  = JSON.parse(JSON.stringify(obj1));
    
    // Modify the nested 2nd object
    obj2.names.last.other = 'f';
    
    console.log(obj1); // Prints { id: 5, names: { first: 'tinu', last: { other: 'k' } } }
    console.log(obj2); // Prints { id: 5, names: { first: 'tinu', last: { other: 'f' } } }

With Objects: Way2: Spread syntax way

const obj1 = {
    id: 5,
    names: {
        first: 'tinu',
        last: {
            other: 'k'
        }
    }
};

//Deep copy way 2: Spread syntax way
const obj2 = {...obj1, names: {...obj1.names, last: {...obj1.names.last}}};

// Modify the nested 2nd object
obj2.names.last.other = 'f';

console.log(obj1); // Prints { id: 5, names: { first: 'tinu', last: { other: 'k' } } }
console.log(obj2); // Prints { id: 5, names: { first: 'tinu', last: { other: 'f' } } }

使用数组：方式 1：JSON方式

  const array1 = [['a'], 'b', 'c'];
    
    // Deep copy way 1: JSON way
    const array2  = JSON.parse(JSON.stringify(array1));
    
    //Modify the nested 2nd array
    array2[0].push('pushed');
    
    console.log(array1);
    console.log(array2);

什么是扩展语法方式 数组到深拷贝？

Answer 1

对于每个嵌套数组，将其替换为 [...originalArrayReference]。如果您必须替换特定的索引，请先在该索引前后对外部数组进行切片：

const array1 = [['a'], 'b', 'c'];
    
const array2  = [[...array1[0]], ...array1.slice(1)];

//Modify the nested 2nd array
array2[0].push('pushed');

console.log(array1);
console.log(array2);

更复杂的例子：

const origArr = [
  [
    'foo',
    'bar'
  ],
  [
    'bar',
    'baz',
    ['nested1', 'nested2', 'nested3'],
    'baz',
    'buzz'
  ],
  'buzz'
];

const newArr = [
  [...origArr[0]],
  [
    ...origArr[1].slice(0, 2),
    [...origArr[1][2]],
    ...origArr[1].slice(0, 3)
  ],
  origArr[2]
];
console.log(newArr);

使用扩展运算符深度复制数组的语法

Syntax for deep copying an array with the spread operator

javascript

deep-copy

ecmascript-6