JS--浅拷贝与深拷贝--方法/详解/实例-CFANZ编程社区

简介

说明

本文用示例介绍JavaScript的浅拷贝与深拷贝的用法和区别。

拷贝也可以称为克隆。

浅拷贝与深拷贝的区别

浅拷贝：拷贝原始类型的值，拷贝对象的引用。

深拷贝：拷贝原始类型的值，拷贝对象的所有内容（每个对象都拥有独立的对象引用）。

浅拷贝

方案1：手动拷贝

let user = {
    name: "John",
    age: 30
};

// 新的空对象
let clone = {};

// 将 user 中所有的属性拷贝到其中
for (let key in user) {
    clone[key] = user[key];
}

clone.name = "Pete";    // 改变了其中的数据
console.log(user.name); // John

方案2：Object.assign

说明

Object.assign可以合并多个对象到一个中。

格式为：Object.assign(dest, [src1, src2, src3...])

实例

let user = {
    name: "Tony"
}

let user1 = {
    age: 30
};

let user2 = {
    sex: "Man"
}

Object.assign(user, user1, user2);
console.log(user);      //{name: 'Tony', age: 30, sex: 'Man'}

深拷贝

说明

浅拷贝在拷贝对象时拷贝的是引用，这样会导致多个对象共用同一个对象的引用。

可以使用lodash这个第三方库来进行深拷贝，其方法为：_.cloneDeep(obj)

实例：复现浅拷贝会共享对象

let user = {
    name: "John",
    sizes: {
        height: 182,
        width: 50
    }
};
let clone = Object.assign({}, user);
console.log(user.sizes === clone.sizes); // true.同一个对象

user.sizes.width = 51;            // 改变其中一个的属性值
console.log(clone.sizes.width);   // 51。另一个也被改变

实例：深拷贝不会共享对象的引用

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>
<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
<script>
let user = {
    name: "John",
    sizes: {
        height: 182,
        width: 50
    }
};
let clone = _.cloneDeep(user);
console.log(user.sizes === clone.sizes); // false。同一个对象

user.sizes.width = 51;            // 改变其中一个的属性值
console.log(clone.sizes.width);   // 50。另一个没有被改变

</script>
</body>
</html>