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. NAT穿透的详细讲解及分析

    原文地址:http://bbs.pediy.com/thread-131961.htm 一.什么是NAT?为什么要使用NAT?NAT是将私有地址转换为合法IP地址的技术,通俗的讲就是将内网与内网通信时 ...

  2. 关于报错:Warning: Cannot modify header information - headers already sent by (output started at

    8月5日,第一个项目即将完成,测试时,发现登录功能会出现小问题:记住密码的时候会报错 Warning: Cannot modify header information - headers alrea ...

  3. 《Web安全攻防 渗透测试实战指南》 学习笔记 (四)

    Web安全攻防 渗透测试实战指南   学习笔记 (四) Nmap                                       Network  Mapper    是一款开放源代码的网 ...

  4. PyQt5窗口操作大全

    1.多窗口交互-使用信号与槽函数'''如果一个窗口和一个窗口交互,尽量不要访问窗口B的控件:应该访问与信号绑定的槽函数,从而降低窗口之间的耦合度 例:如果A直接访问B窗口的控件,一旦B窗口的控件发生改 ...

  5. windows 配置hadoop环境

    在idea运行spark程序的时候报错:java.io.IOException: Could not locate executable null\bin\winutils.exe in the Ha ...

  6. 杭电 2096 小明A+B

    小明A+B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. python搭建后台服务

    后端 # coding:utf-8 # 2019/10/22 16:01 # huihui # ref: from flask import Flask, abort, request, jsonif ...

  8. 安装go和goland

    1.建议去go语言中文网下载,网址:https://studygolang.com/dl ,下图是下载页面及包介绍 2.Windows版安装 3.在cmd命令行窗口输入“go version”可以查看 ...

  9. 前缀和-Big Water Problem (牛客)

    链接:https://ac.nowcoder.com/acm/problem/15164 题目描述 给一个数列,会有多次询问,对于每一次询问,会有两种操作: 1:给定两个整数x, y, 然后在原数组的 ...

  10. float元素上-margin的用法

    css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序). 标准情况下我们用float 时候是这样的. -margin通俗点说 ...