JavaScript 深浅拷贝

---

一、数据类型

JavaScript变量包含两种不同数据类型的值：基本类型和引用类型。
基本数据类型：数字类型，字符串类型，布尔类型，空类型，未定义，唯一值；
引用数据类型：数组，函数，对象，set，map。

---

二、存储方式

JavaScript的变量的存储方式：栈（stack）和堆（heap）。
栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址；
堆：动态分配的内存，大小不定，也不会自动释放。里面存放引用类型的值。

---

三、浅拷贝、深拷贝

1.基本数据类型、引用数据类型赋值区别

var str_1 = 'abc'
    var obj_1 = {
        name: 'name',
        age: 20
    }
    var str_2 = str_1
    var obj_2 = obj_1
    str_2 = '123'
    obj_2.name = 'name1'
    console.log(str_1);  //abc
    console.log(str_2);  //123
    console.log(obj_1);  //{name: 'name1', age: 20}
    console.log(obj_2);  //{name: 'name1', age: 20}
    /* 
    基本数据类型：赋值 赋的值是真正的值
    引用数据类型：赋值 赋的是引用类型的地址
     */

---

2.浅拷贝

// 浅拷贝
    var arr=[1,2,3]
    var arr_1=arr
    arr_1.push(4)
    console.log(arr);   //1234   
    console.log(arr_1);    //1234
    // 新数组的改变会影响原数组

---

3.深拷贝

（1）数组深拷贝

a.for循环

// 1.for循环
    var arr_1 = [1, 2, 3]
    var arr_2 = []
    for (var i = 0; i < arr_1.length; i++) {
        arr_2.push(arr_1[i])
    }
    arr_2.push(4)
    console.log(arr_1);  //123 
    console.log(arr_2);  //1234
    // 新数组的改变不会影响原数组

---

b.slice（）

// 2.slice()
    var arr_3 = [1, 2, 3, 4]
    var arr_4 = arr_3.slice(0)
    arr_4.pop(4)
    console.log(arr_3);  //1234
    console.log(arr_4);  //123
    // 新数组的改变不会影响原数组

---

c.concat（）

// 3.concat()
    var arr_5 = [1, 2, 3, 4, 5]
    var arr_6 = arr_5.concat()
    arr_6.unshift(0)
    console.log(arr_5);  //12345
    console.log(arr_6);  //012345
    // 新数组的改变不会影响原数组

---

d.使用JSON.stringify()以及JSON.parse()

// 4.使用JSON.stringify()以及JSON.parse()
    /* 
    var _tmp = JSON.stringify(arr);  // 将数组转换为json字符串形式
    var result = JSON.parse(_tmp);  // 将转换而来的字符串转换为原生js数组
    */
    var arr_8 = [1, 2, 3, 4, 5]
    var arrString = JSON.stringify(arr_8)
    var arr_9 = JSON.parse(arrString)
    arr_9.push(6)
    console.log(arr_8);  //[1, 2, 3, 4, 5]
    console.log(arr_9);  //[1, 2, 3, 4, 5,6]
    // 使用JSON.stringify()以及JSON.parse()不可以拷贝 undefined,function等类型

---

（2）对象深拷贝

a.for循环

// 对象 for( x in ...)
    var num_1 = {
        name: 'name',
        color: 'red'
    }
    var num_2 = {}
    for (x in num_1) {
        num_2[x] = num_1[x]
    }
    num_2.color = 'blue'
    console.log(num_1);  // {name: 'name', color: 'red'} 
    console.log(num_2);  // {name: 'name', color: 'blue'}
    // 新对象的改变不会影响原对象

---

b.使用JSON.stringify()以及JSON.parse()

// 2.使用JSON.stringify()以及JSON.parse()
    /* 
    var _tmp = JSON.stringify(obj);  // 将对象转换为json字符串形式
    var result = JSON.parse(_tmp);  // 将转换而来的字符串转换为原生js对象
    */
    var obj_3 = {
        name: 'name',
        age: 18
    }
    var objString = JSON.stringify(obj_3);
    var obj_4 = JSON.parse(objString)
    obj_4.age = 19
    console.log(obj_3);  // {name: 'name', age: 18}
    console.log(obj_4);  // {name: 'name', age: 19}

---

c.es6 扩展运算符

// 3.es6 扩展运算符
    var obj_5 = {
        name: 'name',
        age: 18
    }
    var obj_6 = { ...obj_5 }
    obj_6.name = 'name_2'
    console.log(obj_5);  // {name: 'name', age: 18}
    console.log(obj_6);  // {name: 'name_2', age: 18}
    // 只能深度拷贝对象的第一层，如果对象中的属性也是对象是没有办法进行深度拷贝

---

d.Object.assign() 对象的合并

// 4.Object.assign() 对象的合并
    // 利用Object.assign(), 第一个参数必须是空对象
    var obj_5 = {
        name: 'name_3',
        age: 17
    }
    var obj_6 = Object.assign({}, obj_5);
    obj_6.age = 20
    console.log(obj_5);  // {name: 'name_3', age: 17}
    console.log(obj_6);  // {name: 'name_3', age: 20}
    // 只能深度拷贝对象的第一层，如果对象中的属性也是对象没有办法进行深度拷贝

---