JS--浅拷贝与深拷贝--方法/详解/实例

柔光的暖阳◎ 2023-10-01 11:06 24阅读 0赞

原文网址：[JS--浅拷贝与深拷贝--方法/详解/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN]

## 简介 ##

**说明**

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

拷贝也可以称为克隆。

**浅拷贝与深拷贝的区别**

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

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

## 浅拷贝 ##

### 方案1：手动拷贝 ###

### 方案2：Object.assign ###

**说明**

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

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

**实例**

## 深拷贝 ##

**说明**

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

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

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

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

<!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>

[JS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122205739