一些问题

// 赋值1let obj1 = {    a: 1,    b: 2}let obj2 = obj1obj2.a = 3console.log(obj1) // ?console.log(obj2) // ?

-

// 赋值2let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }}let obj2 = obj1obj2.a = 3obj2.c.q = 7console.log(obj1) // ?console.log(obj2) // ?

-

// 浅拷贝1let obj1 = {    a: 1,    b: 2}let obj2 = Object.assign({}, obj1)obj2.a = 3console.log(obj1) // ?console.log(obj2) // ?

-

// 浅拷贝2let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }}let obj2 = Object.assign({}, obj1)obj2.a = 3obj2.c.q = 7console.log(obj1) // ?console.log(obj2) // ?

-

// 深拷贝let _ = require('lodash');let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }};let obj2 = _.cloneDeep(obj1);obj2.a = 3obj2.c.q = 7console.log(obj1) // ?console.log(obj2) // ?

JS数据类型及相干概念

数据类型

JS有两种数据类型：根本类型、援用类型。
根本类型：String Number Boolean undefined null symbol
援用类型：Object Array Function Date

数据在内存中的存储

JS定义变量的时候，变量会被存入内存栈中，但根本类型和援用类型的存储有区别：
根本类型存储在栈内存中；
援用类型存储在堆内存中，栈中存储了指向数据的指针（内存地址）。
即：定义一个新变量拷贝数据时，根本类型是拷贝原始数据，援用类型则不是。

正是因为这个问题，老手容易遇到一个问题：拷贝一个对象（援用类型）后，对新对象进行批改，再应用原对象后会发现原对象也变了。
解决这个问题的方法是学习赋值、浅拷贝和深拷贝的应用场景，不同场景灵活处理援用类型。

对象的赋值、浅拷贝、深拷贝

赋值没有创立新对象，仅仅是拷贝了原对象的指针。
浅拷贝是创立一个新对象，这个对象仅对原对象的属性进行拷贝，属性值是根本类型时，拷贝的是原数据，属性值是援用类型时，拷贝的是指针。因而，如果原对象的属性有援用类型数据，无论批改新对象还是原对象的援用类型数据，另一个都会随之扭转。
深拷贝也是创立一个新对象，但不仅对原对象的属性进行拷贝，还在堆内存中开拓一个新的地址用来存储新对象，所以新对象和原对象没有关联，批改其中一个另一个不会变动。

问题解答

// 赋值1let obj1 = {    a: 1,    b: 2}let obj2 = obj1obj2.a = 3console.log(obj1) // {a: 3, b: 2}console.log(obj2) // {a: 3, b: 2}

-

// 赋值2let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }}let obj2 = obj1obj2.a = 3obj2.c.q = 7console.log(obj1) // {a: 3, b: 2, c: {q: 7}}console.log(obj2) // {a: 3, b: 2, c: {q: 7}}

-

// 浅拷贝1let obj1 = {    a: 1,    b: 2}let obj2 = Object.assign({}, obj1)obj2.a = 3console.log(obj1) // {a: 1, b: 2}console.log(obj2) // {a: 3, b: 2}

-

// 浅拷贝2let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }}let obj2 = Object.assign({}, obj1)obj2.a = 3obj2.c.q = 7console.log(obj1) // {a: 1, b: 2, c: {q: 7}}console.log(obj2) // {a: 3, b: 2, c: {q: 7}}

-

// 深拷贝let _ = require('lodash');let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }};let obj2 = _.cloneDeep(obj1);obj2.a = 3obj2.c.q = 7console.log(obj1) // {a: 1, b: 2, c: {q: 6}}console.log(obj2) // {a: 3, b: 2, c: {q: 7}}

应用场景

原对象仅应用一次（被批改也不产生副作用），用赋值。

原对象需屡次应用（被批改会导致后续应用数据不精确），且属性只有根本类型，无援用类型，用浅拷贝。

原数据需屡次应用（被批改会导致后续应用数据不精确），且属性含有援用类型，用深拷贝。

浅拷贝的实现

Object.assign()

如下面的例子，Object.assign()是浅拷贝

concat

es5的浅拷贝办法

扩大运算符

es6的浅拷贝办法

slice

JS数组的办法

let arr1 = [1, 2, { username: 'Kobe' }];let arr2 = arr.slice();arr2[2].username = 'Wade'console.log(arr1[2]); // { username: 'Kobe' }console.log(arr2[2]); // { username: 'Wade' }

lodash的clone()

let _ = require('lodash');let obj1 = {    a: 1,    b: 2,};var obj2 = _.clone(obj1);

手写实现

function shallowClone(source) {    var target = {};    for(var i in source) {        if (source.hasOwnProperty(i)) {            target[i] = source[i];        }    }    return target;}let obj1 = {...}let obj2 = shallowClone(obj1)

深拷贝的实现

JSON.parse(JSON.stringfy())

let obj1 = {a: 1, b: 2}let obj2 = JSON.parse(JSON.stringify(obj1))

留神：慎用，因为如果对象中有办法，这样深拷贝会失落办法。如：

let obj1 = {a: 1, b: 2, c: function() {return '看办法在不在'}}let obj2 = JSON.parse(JSON.stringify(obj1))console.log(obj1); // {a: 1, b: 2, c: ƒ}console.log(obj2); // {a: 1, b: 2}

lodash的deepClone()

let _ = require('lodash');let obj1 = {    a: 1,    b: 2,    c: {        q: 6    }};let obj2 = _.cloneDeep(obj1);

jquery.extend()

// 用法：$.extend(deepCopy, target, object1, [objectN]) // 第一个参数为true,就是深拷贝let $ = require('jquery');let obj1 = {    a: 1,    b: 2,    c: {q: 6}};let obj2 = $.extend(true, {}, obj1);

手写实现

深拷贝的原理是递归遍历对象，直到只有根本类型时再拷贝。

点击浏览手写深拷贝代码