前端数据拷贝(浅拷贝、深拷贝)

浅拷贝

1 直接赋值

2 扩展运算符(...)

3 abject.assign()

Object.assign({}, obj);

4 slice和concat

slice 截取数组

concat 拼接数组

深拷贝

1 JSON.parse(JSON.stringify(待拷贝对象))

2 使用第三方库 Lodash

javascript 复制代码
const _ = require('lodash');

let obj = {
    name: 'demo',
    age: 26
}

let obj2 = _.cloneDeep(obj);
obj2.name = "demo_new";

console.log(obj); // {name: "demo", age: 26}
console.log(obj2); // {name: "demo_new", age: 26}

3 手写一个深拷贝

javascript 复制代码
function deepClone (obj) {
    if (typeof obj !== 'object' || obj == null) {
        return obj;
    }
    
    let deepCloneObj = Array.isArray(obj) ? [] : {}
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            deepCloneObj[key] = deepClone(obj[key]);
        }
    }
    
    return deepCloneObj;
}
相关推荐
Ehtan_Zheng6 分钟前
Android 17 变更说明
前端
西门吹-禅24 分钟前
【iFlow 处理agents】
前端·chrome
css趣多多28 分钟前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
一切顺势而行1 小时前
python 文件目录操作
java·前端·python
014-code1 小时前
Vue3 性能优化实战
前端·vue.js·性能优化
css趣多多2 小时前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
哆啦A梦15882 小时前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦15883 小时前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
广州华水科技3 小时前
单北斗变形监测在大坝安全和地质灾害预警中的应用与优势
前端
阿珊和她的猫3 小时前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式