首页 > Web开发 > 详细

js 深拷贝和浅拷贝

时间:2021-06-17 20:18:52      阅读:27      评论:0      收藏:0      [点我收藏+]

1、浅拷贝

    const obj = {
        name: ‘张三‘,
        age: 18,
        friend: {name: ‘小夏‘}
    }

    const newObj = obj
    obj.age = 20
    console.log(obj.age)  // 20
    console.log(newObj.age) // 20

直接用等于的方式进行拷贝,但是如果直接改变一个对象的某个属性,另一个对象对应属性值也会跟着改变

2、深拷贝

方法1

思路:如果不是对象、数组或为null 直接拷贝,若是对象或数组则循环拷贝每个属性,这样拷贝出来的变量和之前的变量改变值不会互相影响

    const obj = {
        name: ‘张三‘,
        age: 18,
        friend: {name: ‘小夏‘}
    }

    function deepClone(obj) {
        if(typeof(obj) != ‘object‘ || typeof(obj) == null) {
            return obj
        }else {
            let result
            if(obj instanceof Array) { // 数组
                result = []
            }else { // 对象
                result = {}
            }
            for(let key in obj) {
                // 若直接等于,改变某个的friend另一个也会改变,故用递归
                //  result[key] = obj[key]
                result[key] = deepClone(obj[key])
            }
            return result
        }
    }
    let newObj = deepClone(obj)
    newObj.age = 20
    console.log(obj.age)  // 18
    console.log(newObj.age) // 20

方法二

思路:判断是否是对象或数组,若是转成json字符串再转过,若不是直接返回

    const obj = {
        name: ‘张三‘,
        age: 18,
        friend: {name: ‘小夏‘}
    }

    function deepClone(obj) {
        if(typeof(obj) != ‘object‘ || typeof(obj) == null) {
            return obj
        }else {
            return JSON.parse(JSON.stringify(obj))
        }
    }
    let newObj = deepClone(obj)
    newObj.age = 20
    console.log(obj.age)  // 18
    console.log(newObj.age) // 20

 

js 深拷贝和浅拷贝

原文:https://www.cnblogs.com/pyx-blog/p/14894739.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!