js实现拷贝,使用普通赋值对象,在操作其中一个对象值的时候,另一个也会更改,不符合需求

因此引入深度拷贝,以下为实现深度拷贝的几种法:

Object.assign

// 合并多个对象
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);

注意: 这个是伪深度拷贝,只能拷贝第一层

递归拷贝

function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{ // 如果不是,就直接赋值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}

... 拼接对象

let obj = {
name: 'admin'
} let obj2 = {
age: 14,
...obj
} console.log(obj2) // { age: 14, name: 'admin' }

js实现深度拷贝的更多相关文章

  1. js的深度拷贝和浅拷贝

    从extend看浅拷贝和深拷贝 请先查看: http://blog.sina.com.cn/s/blog_912389e5010120n2.html

  2. JS 深度拷贝 Object Array

    JS 深度拷贝 Object Array function cloneObj(o) { var isArray = o instanceof Array; var isObject = o insta ...

  3. js 深度拷贝

    js 数据类型 分为2种: 基本数据类型:Undefined.Null.Boolean.Number.String 复杂数据类型:Object.Array.function 他们的区别是在内存中的存储 ...

  4. js 数组的深度拷贝 的四种实现方法

    首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. --------------------------------------------------------------- ...

  5. JS对象的拷贝

    1:对数据进行备份的时候,如果这个数据是基本的数据类型,那么很好办,通过赋值实现复制即可. 赋值与浅拷贝的区别 var obj1 = { 'name' : 'zhangsan', 'age' : '1 ...

  6. JS堆栈与拷贝

    一.堆栈的定义 1.栈是一种特殊的线性表.其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行. 结论:后进先出(Last In First Out),简称为LIFO线性表.栈的应用有:数制 ...

  7. javascript中对数组对象的深度拷贝

    在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况. 如果是简单的一维数组对象,可以使用两个原生方法: 1.splice var arr1 = ['a', 'b', 'c ...

  8. Jquery的深度拷贝和深度克隆

    有人问,拷贝和克隆不都是“复制”的意思吗. 这位看官问的好,一般情况下是一样的,但在jquery中却有些不同.jqurey深度拷贝一般只js对象的复制,是$.extend()方法,jquery深度克隆 ...

  9. c#:如何处理对对象进行深度拷贝

    /// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...

随机推荐

  1. JS-正则表达式常规运用

    限制文本框只能输入0和正数 <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')& ...

  2. ASP.NET Core搭建多层网站架构【14-扩展之部署到IIS】

    2020/02/03, ASP.NET Core 3.1, VS2019, IIS 10, dotnet-hosting-3.1.1-win.exe 摘要:基于ASP.NET Core 3.1 Web ...

  3. 大数据计算引擎之Flink Flink CEP复杂事件编程

    原文地址: 大数据计算引擎之Flink Flink CEP复杂事件编程 复杂事件编程(CEP)是一种基于流处理的技术,将系统数据看作不同类型的事件,通过分析事件之间的关系,建立不同的时事件系序列库,并 ...

  4. GO面向接口

    Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 实例 /* 定义接口 */ type interface_name ...

  5. 吴裕雄--天生自然Numpy库学习笔记:NumPy 广播(Broadcast)

    广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a.shape == ...

  6. nm

    nm是names的缩写,功能是列出目标文件的符号清单,常用来查看动态链接库中的函数. nm选项 -a   按照man手册,仅列出调试信息,实际上却是调试信息+正常信息 -A   增加一列显示目标文件, ...

  7. Docker 之registry私有仓库搭建

    Docker 之registry私有仓库搭建 官方提供的私有仓库docker registry用法 https://yeasy.gitbooks.io/docker_practice/reposito ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:嵌套列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 3_03_MSSQL课程_Ado.Net_登录复习和ExcuteScalar

    SQL注入 ->登陆窗体破解 ->配置文件 ->首先在 app.Config文件中添加 节点,如下: <connectionStrings> <add name=& ...

  10. sprintf 、vsprintf 、_vsntprintf

    转载:https://blog.csdn.net/anye3000/article/details/6593551 sprintf函数的定义为: int sprintf(char *szBuffer, ...