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

浅拷贝

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;
}
相关推荐
哆啦A梦15883 分钟前
Vue3魔法手册 作者 张天禹 016_vue3中一些特定用法介绍
前端·vue.js·typescript
henry1010101 小时前
DeepSeek生成的网页小游戏 - 迷你高尔夫
前端·javascript·游戏·html
薛一半1 小时前
React的组件
前端·javascript·react.js
广州华水科技2 小时前
水库的单北斗GNSS变形监测系统是什么?主要有哪些应用?
前端
薛一半2 小时前
React三大属性之props
前端·javascript·react.js
Wect2 小时前
LeetCode 105. 从前序与中序遍历序列构造二叉树:题解与思路解析
前端·算法·typescript
烤麻辣烫3 小时前
正则表达式快速掌握
前端·javascript·学习·正则表达式·html
长城20243 小时前
HTML5中可以省略属性值的11个属性总结
前端·html·html5·属性值·省略属性值
木斯佳3 小时前
前端八股文面经大全:小红书前端一面(2026-2-3)·面经深度解析
前端·状态模式
心之语歌4 小时前
flutter 父子组件互相调用方法,值更新
前端·javascript·flutter