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

浅拷贝

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;
}
相关推荐
AlienZHOU3 小时前
DeepSeek Harness 插件:HTML 实时可视化编辑
前端·agent·deepseek
剪刀石头布啊6 小时前
javascript手动实现继承
前端
Elias不吃糖6 小时前
Langfuse 入门:Trace、Prompt、Dataset、Experiment、Evaluator
前端·python·prompt·langfuse
vipbic6 小时前
一个前端的 9 天重构:我是怎么用 Codex 重做航栈的
前端·javascript·后端
Eason_Lou8 小时前
【无标题】
前端·vue.js·html
_codemonster8 小时前
npm run dev 是在开发模式运行,怎么在生产环境运行
前端·npm·node.js
kyriewen9 小时前
我受够了复制报错去问 AI,花一下午给控制台做了个调试助手
前端·javascript·ai编程
IT_陈寒10 小时前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion10 小时前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计