JS中深拷贝和浅拷贝区别?


本文摘自PHP中文网,作者Guanhui,侵删。

JS中深拷贝和浅拷贝区别?

两者的区别在于是否是真正获取了一个对象的复制实体,而不是引用,深拷贝在计算机中开辟了一块内存地址用于存放复制的对象,而浅拷贝仅仅是指向被拷贝的内存地址,如果原地址中对象被改变了,那么浅拷贝出来的对象也会相应改变。

深拷贝

最简单的方法就是

1

2

3

4

5

6

7

8

9

10

11

12

13

14

JSON.parse(JSON.stringify())

function deepCopy(o) {

    return JSON.parse(JSON.stringify(o))

}

var c = {

    age: 1,

    name: undefined,

    sex: null,

    tel: /^1[34578]\d{9}$/,

    say: () => {

        console.log('hahha')

    }

}

// { age: 1, sex: null, tel: {} }

需要注意的是:这种拷贝方法不可以拷贝一些特殊的属性(例如正则表达式,undefine,function)

用递归去复制所有层级属性

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function deepCopyTwo(obj) {

    let objClone = Array.isArray(obj) ? [] : {};

    if (obj && typeof obj == 'object') {

        for (const key in obj) {

            //判断obj子元素是否为对象,如果是,递归复制

            if (obj[key] && typeof obj[key] === "object") {

                objClone[key] = deepCopyTwo(obj[key]);

            } else {

                //如果不是,简单复制

                objClone[key] = obj[key];

            }

        }

    }

    return objClone;

}

浅拷贝

1

object.assign(target,source)

Object.assign 方法只复制源对象中可枚举的属性和对象自身的属性

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性

Object.assign 会跳过那些值为 [null] null 是一个 JavaScript 字面量,表示空值(null or an "empty" value),即没有对象被呈现(no object value is present)。它是 JavaScript 原始值 之一。") 或 undefined 的源对象。

推荐教程:《JS教程》


以上就是JS中深拷贝和浅拷贝区别?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

js简单上传图片预览功能的实例详解

javascript如何设置全局变量

js filter是什么意思

javascript转换成整数方法有哪些?

前端工程师需要掌握哪些知识?

js如何实现计数排序

javascript和js之间有区别吗

js实现滑动进度条

js如何改变css样式

js底层是什么语言

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...