【JavaScript】拷贝对象的几种方式与对比

#工作中拷贝对象是常有的事，我们需要分清楚深浅拷贝，一般来说要做的都是深拷贝，不然会有关联影响#

解构赋值

es6新语法，简洁是简洁，但是需要注意深拷贝只针对第一层

使用方式：{...obj}

let stu = {
    name: 'aaa',
    age: 18,
    info: {
        grade: 5,
        class: 4,
    },
    say: function() {
        console.log('hello');
    }
}

let stu1 = {...stu};
stu1.info.grade = 2;

这里原对象的grade也会被更改

JSON.parse()和JSON.stringify()

let stu2 = JSON.parse(JSON.stringify(stu))
console.log(stu2) // { name: 'aaa', age: 18, info: { grade: 2, class: 4 } }

无法复制函数，因为函数不是JSON格式的一部分

递归复制

function deepCopy(obj) {
    // 处理原始类型和null
    if (typeof obj !== 'object' || obj == null) return obj;
    // 如果是对象或数组，则创建新对象
    let newObj;
    if (Array.isArray(obj)) {
        newObj = [];
    } else {
        newObj = {};
    }
    // 遍历原始对象的所有属性，并对每个属性执行深拷贝
    for (let key in obj) {
        newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
}
let stu3 = deepCopy(stu);

前面两种方式的缺陷都弥补了，但这么写实在是有点繁琐，而且其实还需要完善哈哈哈

lodash.cloneDeep

终极爸爸来了，借助工具

const lodash = require('lodash');

let stu4 = lodash.cloneDeep(stu)

简洁的不能再简洁了，记得要先安装一下依赖噢~

原文地址：https://blog.csdn.net/weixin_45718102/article/details/142835051

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！