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 相关文章推荐
Javascript的匿名函数小结
Dec 31 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
关于JS中prototype的理解
Sep 07 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue router的基本使用和配置教程
2018/11/05 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
详解python中executemany和序列的使用方法
2017/08/12 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python如何删除文件中重复的字段
2019/07/16 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
个人廉洁自律承诺书
2014/03/27 职场文书
运动会演讲稿50字
2014/08/25 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
财务人员岗位职责
2015/02/03 职场文书
管理人员岗位职责
2015/02/14 职场文书
暑期实践个人总结
2015/03/06 职场文书
编写python程序的90条建议
2021/04/14 Python
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python