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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
chrome原生方法之数组
Nov 30 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
JS代码实现页面切换效果
Jan 10 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
eclipse php wamp配置教程
2016/06/30 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
自主招生自荐信范文
2013/12/04 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
我为自己代言广告词
2014/03/18 职场文书
关于学习的演讲稿
2014/05/10 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
庆七一活动简报
2015/07/20 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书