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

浅拷贝

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;
}
相关推荐
我的div丢了肿么办12 分钟前
顶部区域固定,左侧区域滚动,右侧区域滚动,彼此独立
前端·css
雪芽蓝域zzs17 分钟前
第四十六节:顶部【驾驶舱】独立大屏页面实现
前端·javascript·vue.js
IMPYLH26 分钟前
HTML 的 <select> 元素
前端·html
爱丶不疚30 分钟前
Electron:Module 与 Service 的职责边界与加载时序编排
前端·electron·nestjs
三十而立洋35 分钟前
深入浅出 Nginx:从核心原理到实战指南
前端·前端工程化
giszhc38 分钟前
腾讯地图瓦片接入方案:一个 Bun 代理,让 Mapbox / Leaflet / OpenLayers 通用
前端·后端
摸鱼仙人~39 分钟前
Vue 应用完整启动链路
前端·vue.js·软件工程
前端·柱子40 分钟前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端·html
爱丶不疚41 分钟前
Electron: 缓存机制有哪些?能控制的又有哪些
前端·electron·v8
计算机魔术师42 分钟前
一边喊安全一边烧钱竞赛:AI「减速」倡议背后的两副面孔
前端