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

浅拷贝

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;
}
相关推荐
水煮白菜王9 分钟前
商用地图全面收费?从天地图到开源生态的替代路线
前端·javascript·高德地图·amap·开源地图
程序员黑豆10 分钟前
鸿蒙应用开发:网络请求三种方式详解(http / rcp / axios)
前端·harmonyos
黄敬峰15 分钟前
前端路由到底是个啥?React Router v7 从零到一,大白话一次讲透
前端·面试
先吃饱再说26 分钟前
从多页到单页:前端路由的演进与 React Router
前端·react.js·前端框架
北墨NoLimit27 分钟前
TRAE Work实战:把办公Agent竞品调研从2-3天压到32分钟,有完整指令模板
前端·人工智能·数据可视化
颜进强33 分钟前
Calude Code - 25 CodeGraph:让 AI 真正读懂你的代码库
前端·后端·ai编程
七牛开发者33 分钟前
Agent 小知识|长任务不重来:Agent 状态保存的工程设计
前端·javascript·后端
weixin_431600441 小时前
做 Agent 会用到的 Node API(3):异步与流
前端·学习·ai·agent·ai编程
程序员黑豆1 小时前
鸿蒙应用开发之生命周期方法完全指南
前端·harmonyos
一点一木1 小时前
第 23 届 ChinaJoy 刚结束,我把 965 个展台做成了 3D 云展馆
前端·人工智能