JS 数组和对象的深拷贝操作示例
本文实例讲述了JS数组和对象的深拷贝操作。分享给大家供大家参考,具体如下:
一.数组的深拷贝
letarr=[
undefined,
function(){
console.log(123);
},
true,
null,
{
name:"123",
age:23
}
];
//arr作为拷贝对象
1.Array.from()
Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新数组。
letarr1=Array.from(arr);
arr[0]=2;
console.log(arr1);
//[undefined,[Function],true,null,{name:'123',age:23}]
2.Object.assign()
letarr1=Object.assign([],arr)
arr[0]=2;
console.log(arr1);
//[undefined,[Function],true,null,{name:'123',age:23}]
此方法也可用作对象的深拷贝
3.Slice()
letarr1=arr.slice(0);
arr[0]=2;
console.log(arr1);
//[undefined,[Function],true,null,{name:'123',age:23}]
4.Concat()
letarr1=arr.concat();
arr[0]=2;
console.log(arr1);
//[undefined,[Function],true,null,{name:'123',age:23}]
5.扩展运算符深拷贝
//let[...arr1]=arr;//这两种都可以
letarr1=[...arr];
arr[0]=2;
console.log(arr1);
//[undefined,[Function],true,null,{name:'123',age:23}]
此方法也可用作对象的深拷贝
二.对象的深拷贝
letobj={
name:"a",
age:20,
sex:false,
user:{
a:20,
n:"b"
},
f:function(){
return1;
},
u:undefined,
n:null
}
用扩展运算符和Object.assign()方法可以深拷贝对象
letobj1=Object.assign({},obj)
obj[age]=2;
console.log(obj1);
//letobj={name:"a",age:20,sex:false,user:{a:20,n:"b},f:function(){return1;},u:undefined,n:null}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。