数组一维深拷贝:slice、concat、Array.from

对象一维深拷贝:Object.assign

一、利用扩展运算符...对数组中嵌套对象进行深拷贝

var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=[]; arr.forEach(item=>{
var {...obj}=item;
arr2.push(obj);
})
arr2[1].d=7 console.log(arr,arr2)

二、利用lodash库的cloneDeep方法

var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=_.cloneDeep(arr) arr2[1].d=7;
console.log(arr,arr2)

三、JSON.parse(JSON.stringify(objectToClone)) #这种方法能解决绝大部分业务

var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=JSON.parse(JSON.stringify(arr)); arr2[1].d=7;
console.log(arr,arr2)

注:第一这种方法要求对象中的属性值不能是函数、undefined以及symbol值,第二无法拷贝对象原型链上的属性和方法

四、通过递归自定义函数实现深拷贝

function deepCopy (obj) {
// 创建一个新对象
let result = {}
temp = null
key = null
let keys = Object.keys(obj)
keys.map((item, index) => {
key = item
temp = obj[key]
// 如果字段的值也是一个对象则递归操作
if (temp && typeof temp === 'object') {
result[key] = deepCopy(temp)
} else {
result[key] = temp
} })
return result
}
let obj1 = {
x: {
a: 1
},
y: undefined,
z: function test (c, d) {
return c+d
},
u: Symbol('test')
}
let obj2 = deepCopy(obj1)
obj2.x.a = 3
console.log(obj1)
console.log(obj2) 结果:
{ x: { a: 1 },
y: undefined,
z: [Function: test],
u: Symbol(test) }
{ x: { a: 3 },
y: undefined,
z: [Function: test],
u: Symbol(test) }
 

// 未完待续

js对象深拷贝的更多相关文章

  1. js对象深拷贝、浅拷贝

    浅拷贝1 //浅拷贝1 let obj01 = { name: 'Lily', age: '20', time: ['13', '15'], person: { name: 'Henry', age: ...

  2. js对象深拷贝与浅拷贝

    浅拷贝 把a赋值给b,a与b指向相同的内存,修改b值,a也会跟着改变. var a = "aa"; var b = a; b = "bb"; 这个时候a也变成了 ...

  3. 原生js 对象深拷贝

    经常需要copy一个对象,又怕拷贝有问题,那下面这段就很方便啦,不用担心copy只是一个引用了. /** @ values 需要copy的变量 */ function deepClone(values ...

  4. js 对象深拷贝

    /* *p需要拷贝的对象 * */ var deepCopy=function(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] ...

  5. 一篇文章彻底说清JS的深拷贝/浅拷贝

    一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...

  6. js对象进行浅复制,深拷贝的方法

    js对象浅拷贝和深拷贝详解   本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷 ...

  7. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  8. js对象的直接赋值、浅拷贝与深拷贝

    最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...

  9. 也来玩玩 javascript对象深拷贝,浅拷贝

    经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...

随机推荐

  1. pyautogui_pdf内容提取到excel内_3

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  2. 用 Vue 开发一个简单的答题应用(一)

    Vue 之类的 MVVM 框架,能帮助我们用更少的代码实现复杂的业务. 为了简单一点,开发计划分成三阶段: 一,数据写死,实现基本的答题效果.支持多种题型. 二,使用本地存储保存数据,支持题目录入的功 ...

  3. Spring架构简单描述

    原文:https://www.shiyanlou.com/courses/document/212 Spring 概述 1. Spring 是什么 Spring是一个开源的轻量级Java SE(Jav ...

  4. Windows环境墙内搭建Go语言集成开发环境

    1 安装go环境 太简单略 2 安装vs code 找到微软的官方网站,下载Visual Studio Code,官网地址https://code.visualstudio.com/ 安装完成后进入V ...

  5. 解决IntelliJ IDEA无法读取配置*.properties文件的问题

    idea对这些配置的文件方式很明显和eclipse是不同的.在idea中有一个 Content Roots的概念.需要为每一个folder配置相应的Content Roots.Content Root ...

  6. Bleve代码阅读(二)——Index Mapping

    引言 Bleve是Golang实现的一个全文检索库,类似Lucene之于Java.在这里通过阅读其代码,来学习如何使用及定制检索功能.也是为了通过阅读代码,学习在具体环境下Golang的一些使用方式. ...

  7. LeetCode -Reverse Pairs

    my solution: class Solution { public: int reversePairs(vector<int>& nums) { int length=num ...

  8. JavaScript之获取表格目标数据(TableDom.getTableData())

    [声明:  1.博文原创 未经同意转载必究,欢迎相互交流] [声明:  2.博主未知情况下转载,需显著处注明博文来源] [声明:  3.谢谢尊重劳动成果,谢谢理解与配合~] 一.背景 在生产过程和生活 ...

  9. HNOI2018游记

    第一次参加本省省选,结果又是一次划水 Day 0 喝了一个小时鸡汤 大家看看人家钱学森(sheng) 竞赛生要多发展些爱好 不要一考完就fake,那种下考说"大佬AC辣!太强啦!月莫月莫月莫 ...

  10. 交换机console口连接

    http://www.webkaka.com/info/archives/knowledge/2010/08/30452/