JS 数组和对象的深拷贝操作示例


Posted in Javascript onJune 06, 2020

本文实例讲述了JS 数组和对象的深拷贝操作。分享给大家供大家参考,具体如下:

一.数组的深拷贝

let arr = [
 undefined,
 function(){
  console.log(123); 
 },
 true,
 null,
 {
  name:"123",
  age:23
 }
];
// arr作为拷贝对象

1. Array.from()

Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新数组。

let arr1 = Array.from(arr);
arr[0] = 2;
console.log(arr1);
// [ undefined, [Function], true, null, { name: '123', age: 23 } ]

2. Object.assign()

let arr1 = Object.assign([], arr)
arr[0] = 2;
console.log(arr1);
// [ undefined, [Function], true, null, { name: '123', age: 23 } ]

此方法也可用作对象的深拷贝

3. Slice()

let arr1 = arr.slice(0);
arr[0] = 2;
console.log(arr1);
// [ undefined, [Function], true, null, { name: '123', age: 23 } ]

4. Concat()

let arr1 = arr.concat();
arr[0] = 2;
console.log(arr1);
// [ undefined, [Function], true, null, { name: '123', age: 23 } ]

5. 扩展运算符深拷贝

// let [...arr1] = arr; // 这两种都可以
let arr1 = [...arr];
arr[0] = 2;
console.log(arr1);
// [ undefined, [Function], true, null, { name: '123', age: 23 } ]

此方法也可用作对象的深拷贝

二.对象的深拷贝

let obj = {
 name: "a",
 age: 20,
 sex: false,
 user: {
  a: 20,
  n: "b"
 },
 f: function(){
  return 1;
 },
 u: undefined,
 n: null
}

用扩展运算符和Object.assign()方法可以深拷贝对象

let obj1 = Object.assign({}, obj)
obj[age] = 2;
console.log(obj1);
// let obj = { name: "a", age: 20, sex: false,user: {a: 20,n: "b},f: function(){return 1;},u: undefined,n: null}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
JavaScript中的事件处理
Jan 16 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
在VUE style中使用data中的变量的方法
Jun 19 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 #Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
You might like
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript Keycode对照表
2009/10/24 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
中间件分为哪几类
2012/03/14 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书