深拷贝与浅拷贝

目录

如何实现深拷贝

JSON.parse(JSON.stringify(xxx))（不能拷贝对象中的方法）

递归的方法实现深浅拷贝

ES6 新增 ... 展开方式实现深拷贝

使用lodash工具库实现深拷贝

---

深拷贝：将内存地址中存放的数据完整的克隆下来，

放入到新开辟的内存空间中。

浅拷贝：①拷贝基本数据类型：直接拷贝实体数据

②拷贝复杂数据类型：只能拷贝引用地址，拷贝不到实体数据

如何实现深拷贝

JSON.parse(JSON.stringify(xxx))（不能拷贝对象中的方法）

   let obj1 = {
            a: NaN,
            b: undefined,
            name: 'zjl',
            age: 23,
            fn: function () {
                return this.name;
            }
        }
        let obj2 = JSON.parse(JSON.stringify(obj1))
        console.log(obj1, obj2);

递归的方法实现深浅拷贝

 function deepClone(obj) {
            var temp;
            //浅拷贝
            if (obj == undefined || typeof obj !== 'object') {
                temp = obj;
            }
            // 数组
            if (Object.prototype.toString.call(obj) === '[object Array]') {
                temp = [];
                for (var i = 0; i < obj.length; i++) {
                    temp[i] = deepClone(obj[i]);
                }
            }
            // 对象
            if (Object.prototype.toString.call(obj) === '[object Object]') {
                temp = {};
                for (var attr in obj) {
                    temp[attr] = deepClone(obj[attr]);
                }
            }
            return temp;
        }

ES6 新增 ... 展开方式实现深拷贝

  let arr1 = [1,2,3]
  let arr2 = [...arr1]
  arr2[0] = 'zjl'
  console.log(arr1,arr2);

使用lodash工具库实现深拷贝

1、下载lodash工具库 npm i lodash
2、引入lodash   const _ = require('lodash')
代码示例：
​
    let obj1 = {
        nuname:'zjl',
        age:23,
        fn:()=>{
            console.log(1);
        }
    }
    let deep = _.cloneDeep(obj1);
    let obj2 = deep
    obj2.nuname = '妲己'
    console.log(obj1);//{ nuname: 'zjl', age: 23, fn: [Function: fn] }
    console.log(obj2);//{ nuname: '妲己', age: 23, fn: [Function: fn] }