Js的深拷贝和浅拷贝

一、数据类型

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型object(object、array、function、data)。

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

var a = 100;
b = a; // 栈内存会开辟一个新的内存空间，此时b和a都是相互独立的
b = 200;
console.log(a); // 100

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

var message = {

            name: "Steven",

            age: 24

        };

        var Data = Message;

        Message.age = "25";

        console.log(Data.age);  // 25

        console.log( Message.age); // 25

深浅拷贝原理图

二、实现浅拷贝的方法

1.Object.assign()

const obj = Object.assign(target, source);

2.扩展运算符…

const a = { aaa: 1, bbb: 2, ccc: [1, 2, 3] };
const b = {...a }
console.log(b); //{ aaa: 1, bbb: 2, ccc: [ 1, 2, 3 ] }

3.Array的concat()，concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

4.Array的slice()，slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变

const a = [1, 2, { 3: 'a' }];
const b = a.slice();
console.log(b); //[ 1, 2, { '3': 'a' } ]

三、深拷贝的方法

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

// 递归方式实现深拷贝
function DeepCopy(obj) {
    var return_obj = {};
    for (let key in obj) {
       if (Object.prototype.toString.call(obj[key]) === '[Object Object]') {
         return_obj[key] = DeepCopy(obj[key]);  
       } else {
        return_obj[key] = {...obj[key]};  // es6的扩展运算符，处理当前层次赋值为深拷贝
       }
   }
   return return_obj;
}

2.第三方库可以使用loadash

let  fun = require('lodash'); 
let a = [1, 2, {3 : 'a' }]; 
let b = fun.cloneDeep(a)