js浅拷贝直接赋值_JS深拷贝与浅拷贝

首先明确两个概念&＃xff1a;

• 深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的&＃xff0c;如果只是值类型数据&＃xff0c;则不存在所谓的深拷贝&＃xff1b;

• 浅拷贝只拷贝一层对象的属性&＃xff0c;而深拷贝则递归拷贝了所有层级。

这就引出了另一个基础的概念&＃xff1a;数据类型。

数据类型

通常把数据类型分为 值类型 和 引用类型&＃xff1a;

• 值类型(基本类型)&＃xff1a;字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

• 引用数据类型&＃xff1a;对象(Object)、数组(Array)、函数(Function)。

注&＃xff1a;Symbol 是 ES6 引入了一种新的原始数据类型&＃xff0c;表示独一无二的值。

以Number类型举例

var a &＃61; 1;
var b &＃61; a;    // b: 1
b &＃61; 2;
console.log(a, b);    // a: 1, b: 2


可以看出基本类型并没有什么问题&＃xff0c;接下来看引用数据类型的例子&＃xff1a;

var obj1 &＃61; {id: &＃39;1&＃39;};
var obj2 &＃61; obj1;    // [object Object] { id: 1 }
obj2.id &＃61; 2;
console.log(obj1, obj2);    // [object Object] { id: 2 }, [object Object] { id: 2 }


可以看到&＃xff0c;当修改 obj2的id属性时&＃xff0c;obj1的id属性也同时修改了&＃xff0c;这是因为 Javascript 存储对象都是存在内存里的一块地址&＃xff0c;而简单的浅拷贝或者赋值只是把对象的引用(或者说指针)拷贝给了另一个对象&＃xff0c;无论哪个变量修改&＃xff0c;其实操作的都是内存里的同一个对象。

【补】最新的 ECMAScript 标准定义了 8 种数据类型:

• 7种原始类型&＃xff1a;Boolean、Null、Undefined、Number、BigInt、String、Symbol &＃xff1b;

• 和Object

接着深究&＃xff0c;就牵涉到了栈和堆的概念。

栈和堆

栈指的是栈内存(stack)&＃xff1a;

Javascript中的基本类型按值存在栈内存中&＃xff0c;数据的大小都是确定或者是在一定范围内的&＃xff0c;由系统自动分配和释放&＃xff0c;所以更容易对内存进行管理&＃xff1b;

堆指的是堆内存(heap)&＃xff1a;

Javascript中引用类型如Object、Array、Function等存在于堆中&＃xff0c;指针存放在栈中。当访问引用类型时&＃xff0c;先在栈中找到对应的地址指针&＃xff0c;然后根据指针找到堆中的数据。

底层原理清楚后&＃xff0c;就更能理解数据类型的一些行为了。

实现

明白了数据类型以及栈和堆&＃xff0c;就能很容易的理解深拷贝和浅拷贝&＃xff1a;

• 浅拷贝只会将对象的各个属性进行依次复制&＃xff0c;并不会进行递归复制&＃xff1b;

• 深拷贝不仅将原对象的各个属性逐个复制出去&＃xff0c;而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。

浅拷贝

方法一&＃xff1a;遍历被拷贝对象的属性

function copy(obj) {
  var copyObj &＃61; {};
  for(var key in obj) {
    copyObj[key] &＃61; obj[key];
  }
  return copyObj;
}
var o1 &＃61; {name: &＃39;o1&＃39;}
var o2 &＃61; copy(o1);
console.log(o2);    // [object Object] { name: "o1" }


方法二&＃xff1a;Object.assign

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

var source &＃61; {success: true, count: 1};
var target &＃61; Object.assign({}, source);    // [object Object] { count: 1, success: true }


深拷贝

方法一&＃xff1a;JSON.parse(JSON.stringify(data))

var source &＃61; {success: true, content: {isUserLogin: true}};
var target &＃61; JSON.parse(JSON.stringify(source));    // {success: true, content: {isUserLogin: true}}


但是序列化有很多问题&＃xff1a;

• 如果对象中有函数或undefined&＃xff0c;则有可能将函数丢失&＃xff1b;

• 如果对象中有NaN、Infinity、-Infinity&＃xff0c;则变成null&＃xff1b;

• 如果对象中有Date、Error等对象&＃xff0c;则会变成空对象。

如果确定对象中的数据是“常规”的&＃xff0c;则序列化是最简单实现深拷贝的方法。

方法二&＃xff1a;递归

function deepClone(source) {
  if (source && typeof source &＃61;&＃61;&＃61; &＃39;object&＃39;) {
    var target &＃61; source instanceof Array ? [] : {};
    // var target &＃61; Object.prototype.toString.call(source) &＃61;&＃61;&＃61; &＃39;[object Array]&＃39; ? [] : {};
    for (var k in source) {
      if (source.hasOwnProperty(k)) {
        if (source[k] && typeof source[k] &＃61;&＃61;&＃61; &＃39;object&＃39;) {
          target[k] &＃61; deepClone(source[k]);
        } else {
          target[k] &＃61; source[k];
        }
      }
    }
    return target;
  } else {
    return source;
  }
}


• 首先判断是否为对象&＃xff0c;如果不是&＃xff0c;则直接返回&＃xff1b;

• 如果是对象&＃xff0c;则判断源对象是数组还是对象&＃xff0c;来初始化target&＃xff1b;

• 遍历源对象&＃xff0c;如果熟悉是基本类型&＃xff0c;则直接赋值&＃xff0c;否则就递归调用deepClone函数自身&＃xff1b;

接下来可优化的点&＃xff1a;

1. 如果是Function、Date、RegExp等类型怎么处理&＃xff1b;

2. 如果对象自身的属性指向自身怎么处理&＃xff1b;

3. 考虑遍历的性能&＃xff1b;

第三方库的实现

jQuery

$.clone 和 $.extend

• 在 jQuery 中有一个叫 $.clone() 的方法&＃xff0c;可是它并不是用于一般的 JS 对象的深拷贝&＃xff0c;而是用于 DOM 对象&＃xff0c;无需关注。

• 可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, …)就可以实现深拷贝。

var obj1 &＃61; {success: true, content: {isLogin: true}};
var obj2 &＃61; $.extend({}, obj1);    // 浅拷贝
var obj3 &＃61; $.extend(true, {}, obj1);    // 深拷贝


Lodash

_.clone浅拷贝&＃xff0c;_.clone(obj, true) 等价于深拷贝_.cloneDeep(obj)

Outro

考察的知识点

1. 栈和堆的概念&＃xff1b;

2. 基本数据类型和引用数据类型&＃xff1b;

3. 递归思想&＃xff1b;