浅拷贝与深拷贝-白红宇

一、数据类型

数据分为基本数据类型(String, Number, boolean, Null, Undefined，Symbol)和对象数据类型。

基本数据类型的特点：直接存储在栈(stack)中的数据

对象数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

二、浅拷贝与深拷贝

深拷贝和浅拷贝是只针对Object和Array这样的对象数据类型的。

深拷贝和浅拷贝的示意图大致如下：

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

三、浅拷贝的实现方式

1.直接赋值一个变量

let obj = {username: 'kobe', age: 39, sex: {option1: '男', option2: '女'}};  let obj1 = obj; obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象 console.log(obj1, obj); 复制代码

2.Object.assign()

let obj = {    username: 'kobe'    };let obj2 = Object.assign(obj);obj.username = 'wade';console.log(obj);//{username: "wade"} 复制代码

3.Array.prototype.concat()

let arr = [1, 3, {    username: 'kobe'    }];let arr2=arr.concat();    arr2[2].username = 'wade';console.log(arr);复制代码

修改新对象会改到原对象:

4.Array.prototype.slice()

let arr = [1, 3, {    username: ' kobe'    }];let arr3 = arr.slice();arr3[2].username = 'wade'console.log(arr);复制代码

同样修改新对象会改到原对象:

关于Array的slice和concat方法的补充说明：Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝：

如果该元素是个对象引用(不是实际的对象)，slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

可能这段话晦涩难懂，我们举个例子，将上面的例子小作修改：

let arr = [1, 3, {    username: ' kobe'    }];let arr3 = arr.slice();arr3[1] = 2console.log(arr,arr3);复制代码

四、深拷贝的实现方式

1.JSON.parse(JSON.stringify())

let arr = [1, 3, {    username: ' kobe'}];let arr4 = JSON.parse(JSON.stringify(arr));arr4[2].username = 'duncan'; console.log(arr, arr4)复制代码

原理：用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

let arr = [1, 3, {    username: ' kobe'},function(){}];let arr4 = JSON.parse(JSON.stringify(arr)); arr4[2].username = 'duncan'; console.log(arr, arr4) 复制代码

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数

2.手写递归方法

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

//定义检测数据类型的功能函数    function checkedType(target) {      return Object.prototype.tostring.call(target).slice(8, -1)    }    //实现深度克隆---对象/数组    function clone(target) {      //判断拷贝的数据类型      //初始化变量result 成为最终克隆的数据      let result, targetType = checkedType(target) if (targetType === 'object') { result = {} } else if (targetType === 'Array') { result = [] } else { return target } //遍历目标数据 for (let i in target) { //获取遍历数据结构的每一项值。 let value = target[i] //判断目标结构里的每一值是否存在对象/数组 if (checkedType(value) === 'Object' || checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组 //继续遍历获取到value值 result[i] = clone(value) } else { //获取到value值是基本的数据类型或者是函数。 result[i] = value; } } return result } 复制代码

3.函数库lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

var _ = require('lodash');var obj1 = {    a: 1,    b: { f: { g: 1 } },    c: [1, 2, 3]};var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);// false