Web开发编程网
分享Web开发相关技术

简单理解JavaScript 中的对象拷贝

2017-11-18 来源：WEB前端开发 分类：前端开发 评论(0)

对象是 JavaScript 的基本块。对象是属性的集合，属性是键值对。JavaScript 中的几乎所有对象都是位于原型链顶部 Object 的实例。

介绍

如你所知，赋值运算符不会创建一个对象的副本，它只分配一个引用，我们来看下面的代码：

JavaScript 代码:
  1. let obj = {
  2. a: 1,
  3. b: 2,
  4. };
  5. let copy = obj;
  6.  
  7. obj.a = 5;
  8. console.log(copy.a);
  9. // 结果
  10. // copy.a = 5;

obj 变量是一个新对象初始化的容器。copy 变量指向同一个对象，是对该对象的引用。所以现在有两种方式可以访问这个 { a: 1, b: 2, } 对象。你必须通过 obj 变量或 copy 变量，无论你是通过何种方式对这个对象进行的任何操作都会影响该对象。

不变性（Immutability）最近被广泛地谈论，这个很重要！上面示例的方法消除了任何形式的不变性，如果原始对象被你的代码的另一部分使用，则可能导致bug。

复制对象的原始方式

复制对象的原始方法是循环遍历原始对象，然后一个接一个地复制每个属性。我们来看看这段代码：

JavaScript 代码:
  1. function copy(mainObj) {
  2. let objCopy = {}; // objCopy 将存储 mainObj 的副本
  3. let key;
  4.  
  5. for (key in mainObj) {
  6. objCopy[key] = mainObj[key]; // 将每个属性复制到objCopy对象
  7. }
  8. return objCopy;
  9. }
  10.  
  11. const mainObj = {
  12. a: 2,
  13. b: 5,
  14. c: {
  15. x: 7,
  16. y: 4,
  17. },
  18. }
  19.  
  20. console.log(copy(mainObj));

存在的问题

  1. objCopy 对象具有一个新的 Object.prototype方法，这与 mainObj 对象的原型方法不同，这不是我们想要的。我们需要精确的拷贝原始对象。
  2. 属性描述符不能被复制。值为 false 的 “可写(writable)” 描述符在 objCopy 对象中为 true 。
  3. 上面的代码只复制了 mainObj 的可枚举属性。
  4. 如果原始对象中的一个属性本身就是一个对象，那么副本和原始对象之间将共享这个对象，从而使其各自的属性指向同一个对象。

关于第2点中的 writable 属性：

当 writable 设置为false时，表示不可写，也就是说属性不能被修改。

JavaScript 代码:
  1. var o = {}; // Creates a new object
  2.  
  3. Object.defineProperty(o, ‘a’, {
  4. value: 37,
  5. writable: false
  6. });
  7.  
  8. console.log(o.a); // logs 37
  9. o.a = 25; // No error thrown
  10. // (it would throw in strict mode,
  11. // even if the value had been the same)
  12. console.log(o.a); // logs 37. The assignment didn’t work.
  13.  
  14. // strict mode
  15. (function() {
  16. ‘use strict’;
  17. var o = {};
  18. Object.defineProperty(o, ‘b’, {
  19. value: 2,
  20. writable: false
  21. });
  22. o.b = 3; // throws TypeError: “b” is read-only
  23. return o.b; // returns 2 without the line above
  24. }());

正如上例中看到的，修改一个 non-writable 的属性不会改变属性的值，同时也不会报异常。

详细查看：MDN 文档

——— 愚人码头注，开始 ——

浅拷贝对象

当拷贝源对象的顶级属性被复制而没有任何引用，并且拷贝源对象存在一个值为对象的属性，被复制为一个引用时，那么我说这个对象被浅拷贝。如果拷贝源对象的属性值是对象的引用，则只将该引用值复制到目标对象。

浅层复制将复制顶级属性，但是嵌套对象将在原始（源）对象和副本（目标）对象之间是共享。

使用 Object.assign() 方法

Object.assign() 方法用于将从一个或多个源对象中的所有可枚举的属性值复制到目标对象。

JavaScript 代码:
  1. let obj = {
  2. a: 1,
  3. b: 2,
  4. };
  5. let objCopy = Object.assign({}, obj);
  6. console.log(objCopy);
  7. // Result – { a: 1, b: 2 }

到目前为止。我们创建了一个 obj 的副本。让我们看看是否存在不变性：

JavaScript 代码:
  1. let obj = {
  2. a: 1,
  3. b: 2,
  4. };
  5. let objCopy = Object.assign({}, obj);
  6.  
  7. console.log(objCopy); // result – { a: 1, b: 2 }
  8. objCopy.b = 89;
  9. console.log(objCopy); // result – { a: 1, b: 89 }
  10. console.log(obj); // result – { a: 1, b: 2 }

在上面的代码中，我们将 objCopy 对象中的属性 b 的值更改为 89 ，并且当我们在控制台中 log 修改后的 objCopy 对象时，这些更改仅应用于 objCopy 。我们可以看到最后一行代码检查 obj对象并没有被修改。这意味着我们已经成功地创建了拷贝源对象的副本，而且它没有引用。

Object.assign()的陷阱

不要高兴的太早！ 虽然我们成功地创建了一个副本，一切似乎都正常工作，记得我们讨论了浅拷贝？ 我们来看看这个例子：

JavaScript 代码:
  1. let obj = {
  2. a: 1,
  3. b: {
  4. c: 2,
  5. },
  6. }
  7. let newObj = Object.assign({}, obj);
  8. console.log(newObj); // { a: 1, b: { c: 2} }
  9.  
  10. obj.a = 10;
  11. console.log(obj); // { a: 10, b: { c: 2} }
  12. console.log(newObj); // { a: 1, b: { c: 2} }
  13.  
  14. newObj.a = 20;
  15. console.log(obj); // { a: 10, b: { c: 2} }
  16. console.log(newObj); // { a: 20, b: { c: 2} }
  17.  
  18. newObj.b.c = 30;
  19. console.log(obj); // { a: 10, b: { c: 30} }
  20. console.log(newObj); // { a: 20, b: { c: 30} }
  21.  
  22. // 注意: newObj.b.c = 30; 为什么呢..

 

obj.b.c = 30 ?

这就是 Object.assign() 的陷阱。Object.assign 只是浅拷贝。 newObj.b 和 obj.b 都引用同一个对象，没有单独拷贝，而是复制了对该对象的引用。任何对对象属性的更改都适用于使用该对象的所有引用。我们如何解决这个问题？继续阅读…我们会在下一节给出修复方案。

注意：原型链上的属性和不可枚举的属性不能复制。 看这里：

JavaScript 代码:
  1. let someObj = {
  2. a: 2,
  3. }
  4.  
  5. let obj = Object.create(someObj, {
  6. b: {
  7. value: 2,
  8. },
  9. c: {
  10. value: 3,
  11. enumerable: true,
  12. },
  13. });
  14.  
  15. let objCopy = Object.assign({}, obj);
  16. console.log(objCopy); // { c: 3 }

someObj 是在 obj 的原型链，所以它不会被复制。
属性 b 是不可枚举属性。
属性 c 具有 可枚举(enumerable) 属性描述符，所以它可以枚举。 这就是为什么它会被复制。

深度拷贝对象

深度拷贝将拷贝遇到的每个对象。副本和原始对象不会共享任何东西，所以它将是原件的副本。以下是使用 Object.assign() 遇到问题的修复方案。让我们探索一下。

使用 JSON.parse(JSON.stringify(object));

这可以修复了我们之前提出的问题。现在 newObj.b 有一个副本而不是一个引用！这是深度拷贝对象的一种方式。 这里有一个例子：

JavaScript 代码:
  1. let obj = {
  2. a: 1,
  3. b: {
  4. c: 2,
  5. },
  6. }
  7.  
  8. let newObj = JSON.parse(JSON.stringify(obj));
  9.  
  10. obj.b.c = 20;
  11. console.log(obj); // { a: 1, b: { c: 20 } }
  12. console.log(newObj); // { a: 1, b: { c: 2 } } (一个新的对象)

不可变性: ✓

陷阱

不幸的是，此方法不能用于复制用户定义的对象方法。 见下文。

复制对象方法

方法是一个对象的属性，它是一个函数。在以上的示例中，我们还没有复制对象的方法。现在让我们尝试一下，使用我们学过的方法来创建副本。

JavaScript 代码:
  1. let obj = {
  2. name: ‘scotch.io’,
  3. exec: function exec() {
  4. return true;
  5. },
  6. }
  7.  
  8. let method1 = Object.assign({}, obj);
  9. let method2 = JSON.parse(JSON.stringify(obj));
  10.  
  11. console.log(method1); //Object.assign({}, obj)
  12. /* result
  13. {
  14. exec: function exec() {
  15. return true;
  16. },
  17. name: “scotch.io”
  18. }
  19. */
  20.  
  21. console.log(method2); // JSON.parse(JSON.stringify(obj))
  22. /* result
  23. {
  24. name: “scotch.io”
  25. }
  26. */

结果表明，Object.assign() 可以用于复制对象的方法，而使用 JSON.parse(JSON.stringify(obj)) 则不行。

复制循环引用对象

循环引用对象是具有引用自身属性的对象。让我们使用已学的复制对象的方法来复制一个循环引用对象的副本，看看它是否有效。

使用 JSON.parse(JSON.stringify(object))

让我们尝试使用 JSON.parse(JSON.stringify(object))：

JavaScript 代码:
  1. // 循环引用对象
  2. let obj = {
  3. a: ‘a’,
  4. b: {
  5. c: ‘c’,
  6. d: ‘d’,
  7. },
  8. }
  9.  
  10. obj.c = obj.b;
  11. obj.e = obj.a;
  12. obj.b.c = obj.c;
  13. obj.b.d = obj.b;
  14. obj.b.e = obj.b.c;
  15.  
  16. let newObj = JSON.parse(JSON.stringify(obj));
  17.  
  18. console.log(newObj);

结果是：

很明显，JSON.parse(JSON.stringify(object)) 不能用于复制循环引用对象。

使用 Object.assign()

让我们尝试使用 Object.assign()：

JavaScript 代码:
  1. // 循环引用对象
  2. let obj = {
  3. a: ‘a’,
  4. b: {
  5. c: ‘c’,
  6. d: ‘d’,
  7. },
  8. }
  9.  
  10. obj.c = obj.b;
  11. obj.e = obj.a;
  12. obj.b.c = obj.c;
  13. obj.b.d = obj.b;
  14. obj.b.e = obj.b.c;
  15.  
  16. let newObj2 = Object.assign({}, obj);
  17.  
  18. console.log(newObj2);

结果是：

Object.assign() 适用于浅拷贝循环引用对象，但不适用于深度拷贝。随意浏览浏览器控制台上的循环引用对象树。我相信你会发现很多有趣的工作在那里。

使用展开操作符(…)

ES6已经有了用于数组解构赋值的 rest 元素，和实现的数组字面展开的操作符。看一看这里的数组的展开操作符的实现：

JavaScript 代码:
  1. const array = [
  2. “a”,
  3. “c”,
  4. “d”, {
  5. four: 4
  6. },
  7. ];
  8. const newArray = […array];
  9. console.log(newArray);
  10. // 结果
  11. // [“a”, “c”, “d”, { four: 4 }]

对象字面量的展开操作符目前是ECMAScript 的第 3 阶段提案。对象字面量的展开操作符能将源对象中的可枚举的属性复制到目标对象上。下面的例子展示了在提案被接受后复制一个对象是多么的容易。

JavaScript 代码:
  1. let obj = {
  2. one: 1,
  3. two: 2,
  4. }
  5.  
  6. let newObj = { …z };
  7.  
  8. // { one: 1, two: 2 }

注意：这将只对浅拷贝有效

结论

在 JavaScript 中复制对象可能是相当艰巨的，特别是如果您刚开始使用 JavaScript 并且不了解该语言的方式。希望本文帮助您了解并避免您可能遇到复制对象的陷阱。如果您有任何库或一段代码可以获得更好的结果，欢迎与社区分享。

原文链接：https://scotch.io/bar-talk/copying-objects-in-javascript

未经允许不得转载：WEB开发编程网 » 简单理解JavaScript 中的对象拷贝

相关推荐

WEB开发编程网

谢谢支持，我们一直在努力

安全提示：您正在对WEB开发编程网进行赞赏操作，一但支付，不可返还。