js 数组对象深拷贝
深拷贝和浅拷贝的区别
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力
为什么要使用深拷贝?
我们希望在改变新的数组(对象)的时候,不改变原数组(对象)
深拷贝的要求程度
我们在使用深拷贝的时候,一定要弄清楚我们对深拷贝的要求程度:是仅“深”拷贝第一层级的对象属性或数组元素,还是递归拷贝所有层级的对象属性和数组元素?
怎么检验深拷贝成功
改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组
深拷贝数组(只拷贝第一级数组元素)
深拷贝数组
1.直接遍历
var array = [1, 2, 3, 4];
function copy (array) {let newArray = []for(let item of array) {newArray.push(item);}return newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
2. slice()和concat()
深拷贝对象
1.直接遍历
var obj = {name: '彭湖湾',job: '学生'
}function copy (obj) {let newObj = {};for (let item in obj ){newObj[item] = obj}return newObj;
}var copyObj = copy(obj);
copyObj.name = '我才不是彭湖湾呢! 哼 (。・`ω´・)';
console.log(obj); // {name: "彭湖湾", job: "学生"}
console.log(copyObj); // {name: "我才不是彭湖湾呢! 哼 (。・`ω´・)", job: Object}
2.ES6的Object.assign
var obj = {name: '彭湖湾',job: '学生'
}
var copyObj = Object.assign({}, obj);
copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)';
console.log(obj); // {name: "彭湖湾", job: "学生"}
console.log(copyObj); // {name: "我才不叫彭湖湾呢! 哼 (。・`ω´・)", job: "学生"}
Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target
3.ES6扩展运算符:
var obj = {name: '彭湖湾',job: '学生'
}
var copyObj = { ...obj }
copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)'
console.log(obj.name) // 彭湖湾
console.log(copyObj.name) // 我才不叫彭湖湾呢! 哼 (。・`ω´・)
扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
4.Jquery浅拷贝 var copiedObject = jQuery.extend({}, originalObject)
如果改变了originalObject,copiedObject 也会变。
对多层嵌套对象,很遗憾,上面四种方法,都会失败:
深拷贝(拷贝所有层级)
1.不仅拷贝第一层级,还能够拷贝数组或对象所有层级的各项值
2. 不是单独针对数组或对象,而是能够通用于数组,对象和其他复杂的JSON形式的对象
1.JSON.parse(JSON.stringify(obj))
当obj为对象时,这个方法会省略那些值为 functions 和 undefined 的属性,值为null还返回null
当obj为数组时,如果数组里有function 、undefined、null,序列化后都变成null
2.手动写递归
var array = [{ number: 1 },{ number: 2 },{ number: 3 }
];
function copy (obj) {var newobj = obj.constructor === Array ? [] : {};if(typeof obj !== 'object'){return;}for(var i in obj){newobj[i] = typeof obj[i] === 'object' ?copy(obj[i]) : obj[i];}return newobj
}
var copyArray = copy(array)
copyArray[0].number = 100;
console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
3.jQuery深拷贝 var copiedObject = $.extend(true, {}, originalObject)
参考文档
https://www.cnblogs.com/penghuwan/p/7359026.html
js 数组对象深拷贝相关推荐
- android 接收js对象数组,java怎么接收js 数组对象数组对象
java怎么接收js 数组对象数组对象 [2021-02-04 22:25:34] 简介: php数组转js数组对象的方法:首先获取[$arr]数组:然后使用函数[json_encode()]将数组 ...
- 微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习 本节主要介绍JS中的数组. 3-2.1 数组的声明 数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
- js 数组对象的操作方法
js 数组对象的操作方法 在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行, ...
- JS数组对象——英文按照首字母进行排序sort()、localeCompare()
JS数组对象--英文按照首字母进行排序(sort.localeCompare) 上期回顾 场景复现 sort()方法与localeCompare 实例应用 上期回顾 文章内容 文章链接 JS数组对象- ...
- vue js 数组对象去重方法
一.根据数组中唯一的值去重, cur原数组, next要添加的数据 this.warnSiteWords.push({one:this.valueUrl,two:this.valueName}); l ...
- js数组对象递归转换树_使用手刹批量转换视频目录树以递归流式传输到Xbox360
js数组对象递归转换树 I've got many many gigs of 640x480 video of the kids and family taken on my Flip Ultra a ...
- JS数组对象去重,ES6最简数组去重
JS数组对象去重,ES6最简数组去重 // 测试数据 // 比如我们处理 value 的去重 var arrList = [{key: 1, value: "aaa"},{key: ...
- js数组中深拷贝的方法
一.什么是浅拷贝 在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用"="来直接把一个数组赋值给一个变量,如 1 var a=[1,2,3]; 2 var b=a; 3 ...
- js数组对象按照中文拼音排序
今天遇到一个需求如图所示,下拉框按照中文拼音排序,而我们下拉框给的都是接口传过来的对象,所以要想排序,还是稍微需要处理一下的 话不多说,我们先看一个demo,根据这个demo,我们就能完成,我们想要的 ...
最新文章
- Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法)...
- fft 重叠加法_FFT重叠相加法 参数如何定 h M?
- 金蝶云如何html5登录,第三方系统单点登录到金蝶云指南V2
- android杀死进程
- linux Telnet远程登录
- 看完这篇文章后,妈妈再也不用担心我搞不懂java中的接口和监听器啦
- ios游戏开发 Sprite Kit教程:初学者 3
- 做独立app需要哪些东西?
- 东芝抢先一步,推出了全球首款16TB容量的硬盘MG08系列
- php校园一卡通系统
- 测试用例之QA有话说
- 【良心推荐两款软件】eDiary记笔记软件+截图识别文字软件
- 在网页上使用苹方字体
- 自建服务器同步软件,黑群晖自建anki服务器电脑anki软件设置同步
- Padavan老毛子的二级路由,怎样设置与主路由在同一网段
- OpenCV: Mat属性step,size,step1,elemSize,elemSize1一次搞清
- 电动汽车模型的各模块的Simulink模型,包括驾驶员模块
- moxa串口服务器显示灯,moxa串口服务器连接设置
- DVI,HDMI接口显示器无显示的解决
- 单轴滑轨实验台实现的运动控制(2)