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

浅拷贝

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;
}
相关推荐
提笔了无痕1 天前
Web中Token验证如何实现(go语言)
前端·go·json·restful
戌中横1 天前
JavaScript——Web APIs DOM
前端·javascript·html
Beginner x_u1 天前
如何解释JavaScript 中 this 的值?
开发语言·前端·javascript·this 指针
HWL56791 天前
获取网页首屏加载时间
前端·javascript·vue.js
烟锁池塘柳01 天前
【已解决】Google Chrome 浏览器报错 STATUS_ACCESS_VIOLATION 的解决方案
前端·chrome
速易达网络1 天前
基于RuoYi-Vue 框架美妆系统
前端·javascript·vue.js
LYS_06181 天前
RM赛事C型板九轴IMU解算(4)(卡尔曼滤波)
c语言·开发语言·前端·卡尔曼滤波
We་ct1 天前
LeetCode 151. 反转字符串中的单词:两种解法深度剖析
前端·算法·leetcode·typescript
yinmaisoft1 天前
JNPF 表单模板实操:高效复用表单设计指南
前端·javascript·html
37方寸1 天前
前端基础知识(JavaScript)
开发语言·前端·javascript