如何构建解构并以浅拷贝方式访问新变量

2022-12-14 03:56:59

深入理解JavaScript 解构：对象没有 Symbol.Iterator 方法也能解构的奥秘

解构的对象，谜一样的存在？

在 JavaScript 中，解构无疑是一种简化数据提取的神奇工具。但当你试图解构一个看似不具备 Symbol.Iterator 方法的对象时，可能会疑惑不解：它怎么能被解构呢？

解构的本质：复制，而非改变

解构是一种赋值操作，它将对象或数组中的数据复制到新的变量中。因此，对解构出来的变量的任何修改都不会影响原始对象。

Symbol.Iterator 的缺失，JavaScript 的妙招

虽然 Symbol.Iterator 方法通常与可迭代对象相关联，但对象在没有该方法的情况下仍可被解构。这是因为 JavaScript 引擎执行解构时，会自动调用 Object.keys() 方法，获取对象的属性名，然后再使用这些属性名创建新的变量。

浅拷贝的警示

虽然解构可以让数据提取变得轻松，但需要注意的是，解构出来的对象是浅拷贝。这意味着新变量和原始对象指向同一个内存地址。如果修改解构出来的对象的属性，原始对象也会受到影响。

示例解析：id 的谜团

const obj = {
  id: 1,
  children: {
    name: 'John',
    age: 10
  }
};

const { id, children } = obj;

id = 2;
children.name = 'Jane';

console.log(obj); // { id: 1, children: { name: 'Jane', age: 10 } }

在这个示例中，解构出 id 和 children 两个变量，并修改了它们的值。但通过打印原始对象，我们发现 id 仍然为 1，children.name 仍然为 'John'。这是因为解构创建了新的变量，它们的修改不会影响原始对象。

深拷贝的方案：spread 语法的魔法

如果需要对对象进行深拷贝，即在修改解构出来的对象时不影响原始对象，可以使用 JavaScript 的 spread 语法。

const obj = {
  id: 1,
  children: {
    name: 'John',
    age: 10
  }
};

const newObj = { ...obj }; // 深拷贝

newObj.id = 2;
newObj.children.name = 'Jane';

console.log(obj); // { id: 1, children: { name: 'John', age: 10 } }
console.log(newObj); // { id: 2, children: { name: 'Jane', age: 10 } }