浅/深拷贝

浅拷贝

• 只复制最外部一层，基础数据类型的值和引用数据类型的地址

        let obj1 = {
            a: 1,
            b: {
                n: 2
            }
        };

        // 浅拷贝 1
        function shallowClone(obj) {
            const newObj = {};
            for (let i in obj) {
                if (Object.hasOwnProperty.call(obj, i)) {
                    newObj[i] = obj1[i]
                }
            }
            return newObj;
        }
        let obj2 = shallowClone(obj1);

        // 浅拷贝 2 ES6 扩展运算符
        // let obj2 = {
        //     ...obj1
        // };

        // 浅拷贝 3 Object.assign()
        // let obj2 = Object.assign(obj1);

        // obj2.a = 1111;     // 因为是基本数据类型，存值，所以互不影响
        // obj2.b.n = 2222;   // 因为是应用数据类型，指向同一个地址，所以 obj2.b 的值修改时会影响 obj1.b

        console.log(obj1, obj2);
        console.log(obj1.b === obj2.b); // true

深拷贝

• 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据。

• JSON.parse(JSON.stringify(obj))，一般情况下推荐，其中 obj 只能是 Number、String、 Boolean、 Array、扁平对象，即那些能够被 JSON 直接表示的数据结构。

        let obj1 = {
            a: 1,
            b: [1, 2],
            c: {
                x: 3
            },
            d: /^\d+$/,
            e: null,
            f: undefined,
            g: function () {}
        };

        // 判断变量的类型
        function getType(obj) {
            var type = Object.prototype.toString.call(obj);
            var map = {
                '[object Boolean]': 'boolean',
                '[object Number]': 'number',
                '[object String]': 'string',
                '[object Undefined]': 'undefined',
                '[object Null]': 'null',
                '[object Object]': 'object',
                '[object Function]': 'function',
                '[object Array]': 'array',
                '[object Date]': 'date',
                '[object RegExp]': 'regExp'
            }
            if (obj instanceof Element) { //判断是否是dom元素，如div等
                return "element";
            }
            return map[type];
        }

        //深拷贝函数
        function deepClone(obj) {
            let cloneObj;
            let type  = getType(obj);
            console.log(obj,type)
            if (type === 'array') {
                cloneObj = [];
                for (let i = 0; i < obj.length; i++) {
                    cloneObj.push(deepClone(obj[i]));
                }
            } else if (type === 'object') {
                cloneObj = {};
                for (let i in obj) {
                    cloneObj[i] = deepClone(obj[i]);
                }
            } else {
                return obj;
            }
            return cloneObj;
        }

        let obj3 = deepClone(obj1);
        console.log(obj1, obj3);
        console.log(obj1.f === obj3.f);

lodash 深拷贝

掘金