js中的浅拷贝和深拷贝

122 阅读1分钟

浅拷贝和深拷贝的概念

浅拷贝:它是把原来的变量地址给了另一个,他们是会相互影响,其中一个改变会影响另一个的改变,它们之间的地址都是同一个地址,所以它们会互相影响。浅拷贝也称为引用拷贝。

深拷贝:它会先开辟新的空间,然后把要拷贝的属性和方法复制进去,使这个对象指向这个地址。它们之间就不会互相影响,因为它们指向不同的地址与浅拷贝不同,它们虽然属性、方法一样,但它们是两个不一样的个体。 深拷贝也称为值拷贝。

  • 浅拷贝的几种方法

    1.使用 for in 循环进行浅拷贝


let obj = {

    id: 1,

    name: '张三',

    msg: {

        age: 18

    }

};

let o = {};

for (const key in obj) {

    o[key] = obj[key];

}

console.log(o);

    2.使用ES6中的语法 assign


let obj = {

    id: 1,

    name: '张三',

    msg: {

        age: 18

    }

};

let o = {};

Object.assign(o, obj);

console.log(o);

    3.使用 扩展运算符 ...


let obj = {

    id: 1,

    name: '张三',

    msg: {

        age: 18

    }

};

let o = {

    ...obj

};

console.log(o);

    4.只适用于数组concat


let arr1 = [1, 3, {

    id: 1,

    name: '张三',

    msg: {

        age: 18

    }

}];

let arr2 = arr1.concat();

console.log(arr2);

5.也只适用于数组slice


let arr1 = [1, 3, {

    id: 1,

    name: '张三',

    msg: {

        age: 18

    }

}];

let arr2 = arr1.slice();

console.log(arr2);

  • JSON.parse(JSON.stringify()) 深拷贝方法

let obj = {

    id: 1,

    name: '张三',

    msg: {

        age: 18,

        name: '李四',

        msgs: {

            age: 19,

            name: '王五'

        }

    }

};

let o = JSON.parse(JSON.stringify(obj));

console.log(o);

 2.使用 递归 的方法


let obj = {

    id: 1,

    name: '张三',

    msg: {

        age: 18,

        name: '李四',

        msgs: {

            age: 19,

            name: '王五'

        }

    }

};

let o = {};

function fn(newObj, oldObj) {

    for (let key in oldObj) {

        let item = oldObj[key];

        if (item instanceof Array) {

            newObj[key] = [];

            fn(newObj[key], item)

        } else if (item instanceof Object) {

            newObj[key] = {};

            fn(newObj[key], item);

        } else {

            newObj[key] = item;

        }

    }

}

fn(o, obj);

console.log(o);