JavaScript高级---(7)浅拷贝与深拷贝

x33g5p2x  于2021-09-24 转载在 JavaScript  
字(1.1k)|赞(0)|评价(0)|浏览(376)

一、浅拷贝

在JavaScript中,分为简单数据类型(数字、字符等)和复杂数据类型(对象、数组等),一般简单数据类型被存储在栈内存;而复杂数据类型存储在堆内存,其地址存储在栈内存里面。
所以一般将复杂数据类型赋值给其他变量的时候,一般是将其地址复制,如果对赋值后的数据进行操作,很容易改变原本的复杂数据类型。

我们举个例子,首先定义一个对象,里面有两个简单数据类型和另一个对象

  1. var obj = {
  2. id: 1,
  3. name: "andy",
  4. msg: {
  5. age: 18 // 将地址拷贝
  6. }
  7. };
  8. var o = {};
  9. for (var k in obj) {
  10. // k是属性名
  11. o[k] = obj[k];
  12. }
  13. console.log(o);
  14. o.msg.age = 20;
  15. console.log(o);
  16. console.log(obj);

我们先打印对象o,发现赋值完成:

接下来我们仅改变对象o里面age的属性,观察两个对象的age属性。

我们明明只改变了o的age,为什么obj的也会随着改变呢?这是因为在浅拷贝的情况下,里面复杂数据类型的赋值是地址的值传递,修改一个对象的同时,另一个对象也会改变。下面这张图可以更直观的理解。

js(es6)也为我们提供了浅拷贝的语法糖,同样可以实现浅拷贝,语法如下:
Object.assign(target, …sources)

  1. Object.assign(o, obj);
  2. o.msg.age = 20;
  3. console.log(o);
  4. console.log(obj);

二、深拷贝

深拷贝很简单理解了,就是将赋值后的每一个变量都单独指向,与原先的数据脱离,不再公用变量。
下图有助你的理解:

原生JS递归实现深拷贝:

  1. var obj = {
  2. id: 1,
  3. name: "andy",
  4. msg: {
  5. age: 18
  6. },
  7. color: ['red', 'pink']
  8. };
  9. var o = {};
  10. // 递归实现深拷贝
  11. function deepCopy(newObj, oldObj) {
  12. for (var key in oldObj) {
  13. // 判断数据类型
  14. item = oldObj[key];
  15. if (item instanceof Array) {
  16. newObj[key] = [];
  17. deepCopy(newObj[key], item);
  18. } else if (item instanceof Object) {
  19. newObj[key] = {};
  20. deepCopy(newObj[key], item);
  21. } else {
  22. newObj[key] = item;
  23. }
  24. }
  25. }
  26. deepCopy(o, obj);
  27. o.msg.age = 19;
  28. console.log(o);
  29. console.log(obj);

可以看到修改一个对象的值,另一个对象不受影响。

下一篇:JavaScript高级—(8)正则表达式

相关文章