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. 为 git 设定 socks5 代理

    为 git 设定 socks5 代理 查看当前设定 git config --global -l 为 git 设定全局代理 git config --global http.proxy socks5h ...

  2. 模块学习-json pickle

    json json序列化 import json def sayhi(name): print("hello",name) info = { 'name':'mogu', 'age ...

  3. 实现简单ORM案例

    ORM框架: • 我们希望设计一个可以实现对象和SQL自动映射的框架,但是整体用法和设计比Hibernate简单.砍掉不必要的功能.• 会穿插使用设计模式• 增加 – 将对象对应成sql语句,执行sq ...

  4. Update(Stage4):Spark原理_运行过程_高级特性

    如何判断宽窄依赖: =================================== 6. Spark 底层逻辑 导读 从部署图了解 Spark 部署了什么, 有什么组件运行在集群中 通过对 W ...

  5. POJ 3258 River Hopscotch(二分答案)

    嗯... 题目链接:http://poj.org/problem?id=3258 一道很典型的二分答案的题目,和跳石头太像了!! 这道题的题目很显然,求最小中的最大值,注意这道题石头的位置不是从小到大 ...

  6. nyoj 67

    三角形面积 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 给你三个点,表示一个三角形的三个顶点,现你的任务是求出该三角形的面积   输入 每行是一组测试数据,有6个 ...

  7. win10 安装"pip install orange3" 出现LINK : fatal error LNK1158: cannot run 'rc.exe' 错误的解决办法

    解决办法: 从(本例使用的是64位的python3.6 注意:如果python的版本是32位,则使用x86:如果是64位,则使用x64;) 复制一下两个文件 rc.exe rcdll.dll 到

  8. java 多线程小记

    /*java里面实现多线程一般有两种方式 * 1,继承Thread类,实现run方法 * 2,实现Runnable接口,实现run方法 * start方法可以新建一个线程,创建多线程必须调用此方法 * ...

  9. SpringBoot中普通类无法通过@Autowired自动注入Service、dao等bean解决方法

    无法注入原因: 有的时候我们有一些类并不想注入Spring容器中,有Spring容器实例化,但是我们又想使用Spring容器中的一些对象,所以就只能借助工具类来获取了 工具类: package com ...

  10. nginx 的precontent阶段的ngx_http_try_files_module模块与mirrors模块介绍

    指令介绍 Syntax: try_files file ... uri; try_files file ... =code; Default: — Context: server, location ...