数组一维深拷贝: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. CentOS 7下Samba服务部署

    Samba,是种用来让UNIX系列的操作系统与微软Windows操作系统的SMB/CIFS(Server Message Block/Common Internet File System)网络协议做 ...

  2. java代码示例(5)

    /** * 需求分析:从键盘输入5名学员某门课程的笔试成绩,并求出五门成绩的总成绩和平均成绩 * @author chenyanlong * 日期:2017/10/14 */ package com. ...

  3. GUI程序开发的流程(随时删除的源码)

    1.继承JFrame 2.定义需要的组件 3.创建组件 4.设置布局管理器 5.添加组件 6.显示窗体 --------------------------------------------- 小代 ...

  4. Nginx插件之openresty反向代理和日志滚动配置案例

    Nginx插件之openresty反向代理和日志滚动配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.openresty介绍 1>.Nginx介绍 Nginx是一款 ...

  5. Nginx 403 forbidden多种原因及故障模拟重现

    访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 1 index index.php index.html  ...

  6. pyppeteer 报错-无法连接到浏览器

    问题 程序报错: Failed to connect to browser port: http://127.0.0.1:57899/json/version 原因 虽然pyppeteer在首次启动时 ...

  7. 设置MyBatis在控制台打印SQL语句

    在调试阶段,打印SQL会极大方便开发者.MyBatis有提供配置,只需要在MyBatis的配置文件mybatis-config.xml中<configuration>节点下,添加如下配置: ...

  8. 浅析 Bigtable 和 LevelDB 的实现

    在 2006 年的 OSDI 上,Google 发布了名为 Bigtable: A Distributed Storage System for Structured Data 的论文,其中描述了一个 ...

  9. DOM盒子模型

    获取行间样式 style.height //获取行间样式高度 xx.currentStyle.height //计算后的样式高度 IE低版本 getComputedStyle().height //获 ...

  10. 第k个素数

    题目描述 Output the k-th prime number. 输入描述: k≤10000 输出描述: The k-th prime number. #include <iostream& ...