es6的深拷贝和浅拷贝

最新推荐文章于 2022-12-28 19:29:28 发布

弗兰克的天空

最新推荐文章于 2022-12-28 19:29:28 发布

阅读量287

点赞数

分类专栏：网站前端

本文链接：https://blog.csdn.net/frank_fong/article/details/97246453

版权

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //1.浅拷贝 ====================
        const obj1 = {
            a: {
                b: 1
            }
        };
        const obj2 = Object.assign({}, obj1); //将obj1拷贝至obj2

        obj1.a.b = 2; //修改obj1
        console.log(obj2.a.b); //输出：2；obj2会跟着被修改

        //2.同名属性的替换 ====================
        const target = {
            a: 1,
            b: 2
        }
        const source = {
            b: 'hello'
        }
        Object.assign(target, source)
        console.log(target); //输出：{ a: 1,  b: 'hello'}

        //3.数组的处理 ====================
        console.log(Object.assign([1, 2, 3], [4, 5])); //输出：[4, 5, 3]；
        //Object.assign把数组视为属性名为 0、1、2 的对象，因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。

        //4.取值函数的处理 ====================
        const src = {
            get foo() {
                return 1
            }
        };
        const tgt = {};

        console.log(Object.assign(tgt, src)); //输出：{ foo: 1 }
        //只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

        //克隆对象 ====================
        function clone(origin) {
            return Object.assign({}, origin);
        };
        let obj3 = {
            a: 1
        };
        let obj4 = clone(obj3);
        obj3.a = 2;
        console.log(obj3); //输出：{a: 2}
        console.log(obj4); //输出：{a: 1}
        //上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。
        //不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码：
        /*
        function clone(origin) {
            let originProto = Object.getPrototypeOf(origin);
            return Object.assign(Object.create(originProto), origin);
        }
        */


    </script>

</body>

</html>

弗兰克的天空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es6的深拷贝和浅拷贝

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫

专栏目录