javascript - 我可以使用解构来创建深层复制吗?

标签 javascript ecmascript-6 destructuring

基本上我想获得一个深拷贝,它不会使用解构来更改我的主要对象。

let a = {
    name: 'lala', 
  testArray: [1,2,3], 
  object: {
    name: 'object', 
    array: [4,5,6]
  }
};

const {name, testArray, object} =  a;

object.array = [...object.array, 0];
console.log(a.object.array);

let b = {
  object2: {
    name: 'object', 
    array: [4,5,6]
  }
};

const object2 =  {...b.object2};
object2.array = [...object2.array, 0];

console.log(b.object2.array);

我制作了一个 jsfiddle(为了更容易复制)提供我编写的代码。

https://jsfiddle.net/5z71Lbja/

问题是,当我使用第一种方法(解构)更改“子”对象时,主对象的数组也会更改。第二种方法效果很好,但我很好奇是否可以使用解构获得相同的结果。

最佳答案

你不能通过解构来创建新对象,不是。您只能挑选源中存在的值,无法对它们执行转换。 (您可以更改所使用的变量名称,但无法转换值。)我经常想这样做,但您不能(至少目前不能)。

有多种简单的方法可以做到这一点,但实际上最简单的方法是单独制作数组的浅拷贝。

一个更简单的例子:

const obj = {
  foo: "bar",
  array: [1, 2, 3]
};

const {foo} = obj;
const array = obj.array.slice(); // or: = [...obj.array];

obj.array[0] = "one";
console.log(obj.array[0]); // "one"
console.log(array[0]);     // 1

关于javascript - 我可以使用解构来创建深层复制吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57166214/

相关文章:

javascript - Jquery 函数处理程序复杂

javascript - .hover 和 div 出现干扰

javascript - Gridster 未捕获类型错误和可拖动

javascript - 解构语法数组项和余数

haskell - 一次解构一个列表的两个元素 (Clojure)

Javascript 矩阵赋值在填充情况下的行为与使用循环创建矩阵的情况不同。为什么?

reactjs - 如何使用 react 从 three.js 模块导入 TrackballControls?

javascript - 解构嵌套对象

javascript - ReactJS:为什么我的文本区域值总是呈现不可见?

clojure - Clojure 中复杂的数据操作