本文摘自PHP中文网,作者藏色散人,侵删。
Javascript复制对象的方法:1、把原来对象的属性遍历一遍,赋给一个新的对象;2、将对象变为字符串,然后再变为json对象;3、concat一个空数组;4、通过扩展运算符实现对象的深拷贝;5、通过ES6扩展运算符实现数组的深拷贝。
本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
js如何复制一个对象?
方法一:
把原来对象的属性遍历一遍,赋给一个新的对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var cloneObj = function (obj) {
var newObj = {};
if (obj instanceof Array) {
newObj = [];
}
for ( var key in obj) {
var val = obj[key];
newObj[key] = typeof val === 'object' ? cloneObj(val): val;
}
return newObj;
};
var obj = {a: function (){console.log(this.b.c)},b:{c:1}},
newObj = cloneObj(obj);
newObj.b.c=2;
obj.a();
newObj.a();
|
方法二:
1). 先将对象变为字符串,然后再变为json对象,防止对象的指针指向问题,为深拷贝
2). undefined 和 function 类型的属性会被忽略,而 Date 类型的属性则会被转换为字符串
1 2 3 4 5 | var obj = {a:1,b:2}
var newObj = JSON.parse(JSON.stringify(obj));
newObj.a=3;
console.log(obj);
console.log(newObj);
|
方法三:
针对数组对象的方法,用数组方法concat一个空数组
1 2 3 4 5 6 | var a=[1,2,3];
var b=a;
var c=[].concat(a);
a.push(4);
console.log(b);
console.log(c);
|
方法四:
扩展运算符实现对象的深拷贝
1 2 3 4 5 6 | var obj = {
name: 'FungLeo' ,
sex: 'man' ,
old: '18' } var { ...obj2 } = obj
obj.old = '22' console.log(obj)
console.log(obj2)
|
方法五:
ES6扩展运算符实现数组的深拷贝
1 2 3 | var arr = [1,2,3,4,5] var [ ...arr2 ] = arr
arr[2] = 5console.log(arr)
console.log(arr2)
|
推荐学习:《javascript高级教程》
以上就是Javascript如何复制对象的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript算后端么
javascript如何判断对象是否数组
augularjs基础入门与实践
ajax和javascript之间有什么区别
javascript与java区别是什么
javascript怎么拆分数组项
javascript中this用法有哪些
js如何判断值是否数字
面试常问之javascript变量提升
javascript如何解决url中文乱码问题
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Javascript如何复制对象