阅读 52

一文彻底搞懂JS对象深浅拷贝(javascript面向对象系列)

1.回顾什么是对象,如何创建一个对象

  var student = {
            name: '张三',
            age: 23,
            study: function() {
                console.log(`${this.name}会从1数到${this.age}`);
            }
        }
  student.study();复制代码

2.回顾基本数据类型

var a = 10;
var b = a;
a = 50;
console.log(b); //100复制代码

3.回顾引用数据类型

let arr = ["小红", "黑马", "尚硅谷"];
let brr = arr;
arr.push("千峰");
console.log(brr); //Array(4) [ "小红", "黑马", "尚硅谷", "千峰" ]复制代码

从上面的例子中可以看出,基本数据类型,是直接赋值,而引用数据类型,他是有自己的地址,而且指向同一个地址

4.对象的浅拷贝(只拷贝第一层的值)三种方法

方法一:for in 循环
        let obj1 = {
            name: "慧点科技",
            age: 20,
        }
        let obj2 = {}
        for (let key in obj1) {
            // 每遍历一个obj1的key属性,就给obj2增加一个同名key属性
            // 值和obj1的值相同
            obj2[key] = obj1[key]
        }
        obj1.name = "智游集团";
        console.log(obj1);
        console.log(obj2);
        console.log(obj2 === obj1); //false证明浅拷贝成功,因为obj1的对象成员改变,obj2的不变
        
方法二:ES6拓展运算符
        let obj3 = {
            name: "华勤",
            age: 20,
        };
        let obj4 = {...obj};
        obj3.name = "远见"
        console.log(obj3);  //Object { name: "远见", age: 20 }
        console.log(obj4);  //Object { name: "华勤", age: 20 }
        console.log(obj3 === obj4);  //false
        
方法三,Object.assign()
        let obj5 = {
            name: "百知",
            age: 20,
        }
        let obj6 = Object.assign({}, obj5);
        obj5.name = "教育";
        console.log(obj5);
        console.log(obj6);
        console.log(obj5 === obj6);  //false复制代码

5.对象的深拷贝(第一层加第二层都可以拷贝)

方法:遍历,判断,递归,创新,赋值
        let oldObj = {
                name: "小明",
                age: 20,
                grade: [10, 20, 30, 40],
                family: {
                    fName: "王"
                }
            }
            // 实现深拷贝
            // 注意:先写Array,因为Array的父类是Object
        let newObj = {}

        function deepClone(newO, old) {
            for (let key in old) {
                let value = old[key]
                if (value instanceof Array) {
                    newO[key] = []
                        // 递归,函数内部调用函数自己
                    deepClone(newO[key], value)
                } else if (value instanceof Object) {
                    newO[key] = {}
                    deepClone(newO[key], value)
                } else {
                    newO[key] = value;
                }
            }
        }
        deepClone(newObj, oldObj)
        oldObj.grade.push(600);
        oldObj.name = "小红"
        console.log(oldObj); //Object { name: "小红", age: 20, grade: (5) […], family: {…} }
        console.log(newObj); //Object { name: "小明", age: 20, grade: (4) […], family: {…} }
        console.log(oldObj === newObj); //false


作者:用户9599343828775
链接:https://juejin.cn/post/7028810191286042637


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐