ES6 中的解构赋值 + 展开运算符快速复制对象及解决浅拷贝问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对对象进行复制操作。在 ES6 中，我们可以使用解构赋值和展开运算符来快速复制对象，并解决浅拷贝问题。

解构赋值

解构赋值是一种快速获取数组或对象中属性的方式。在 ES6 中，我们可以使用解构赋值来快速复制对象。

对象解构赋值可以快速获取对象中的属性，并将其赋值给变量。例如：

const obj = { foo: 'bar', baz: 42 };
const { foo, baz } = obj;
console.log(foo); // 'bar'
console.log(baz); // 42

我们可以将其用于快速复制对象：

const obj = { foo: 'bar', baz: 42 };
const newObj = { ...obj };
console.log(newObj); // { foo: 'bar', baz: 42 }

数组解构赋值可以快速获取数组中的元素，并将其赋值给变量。例如：

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

我们可以将其用于快速复制数组：

const arr = [1, 2, 3];
const newArr = [...arr];
console.log(newArr); // [1, 2, 3]

展开运算符可以将一个对象或数组展开成多个参数或元素。在 ES6 中，我们可以使用展开运算符来快速复制对象，并解决浅拷贝问题。

使用展开运算符可以快速复制对象：

const obj = { foo: 'bar', baz: 42 };
const newObj = { ...obj };
console.log(newObj); // { foo: 'bar', baz: 42 }

浅拷贝问题指的是只复制了对象的第一层属性，如果对象中有嵌套对象，那么嵌套对象就没有被复制。例如：

const obj = { foo: { bar: 'baz' } };
const newObj = { ...obj };
console.log(newObj); // { foo: { bar: 'baz' } }

在这个例子中，虽然我们使用了展开运算符，但是嵌套对象并没有被复制，所以 newObj.foo 和 obj.foo 指向同一个对象。

为了解决这个问题，我们可以使用 JSON.parse 和 JSON.stringify 来实现深拷贝：

const obj = { foo: { bar: 'baz' } };
const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj); // { foo: { bar: 'baz' } }

这样就可以实现深拷贝了。

在 ES6 中，我们可以使用解构赋值和展开运算符来快速复制对象，并解决浅拷贝问题。解构赋值可以快速获取数组或对象中的属性，展开运算符可以将一个对象或数组展开成多个参数或元素。使用这些技术可以让我们更加高效地处理对象和数组。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6515a6d295b1f8cacde18c2f