和生活爱辽宁下载安装,沈阳企业网站排名优化,大学生网页设计期末作品代码,WordPress的好处我们都知道#xff0c;数组也是属于对象#xff0c;在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组#xff0c;就不能只是变量之前的赋值拷贝#xff0c;这样他们将共享同一个引用#xff0c;而数组又具有可变性#xff0c;所以无法将原数组和拷贝的数组的数…我们都知道数组也是属于对象在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组就不能只是变量之前的赋值拷贝这样他们将共享同一个引用而数组又具有可变性所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝使得原数组和拷贝数组的数据分隔开来。
浅拷贝
1.展开运算符
只支持简单结构的拷贝 let number [1, 2, 3, 4, 5]let copy [...number]copy.push(0)console.log(copy, copy)//[1, 2, 3, 4, 5, 0]console.log(number, number)//[1, 2, 3, 4, 5]let arr [{name: zhangsan,age: 18},{name: lisi,age: 19}]let copyArr [...arr]copyArr[0].name wangwuconsole.log(copyArr, copyArr)//[ { name: wangwu, age: 18 }, { name: lisi, age: 19 } ]console.log(arr, arr)//[ { name: wangwu, age: 18 }, { name: lisi, age: 19 } ]
2.Array.concat方法
只支持简单结构的拷贝 const number [1, 2, 3, 4, 5]const copy number.concat()copy.push(0)console.log(copy, copy)//[1, 2, 3, 4, 5, 0]console.log(number, number)//[1, 2, 3, 4, 5]const arr[{name:zhangsan,age:18},{name:lisi,age:19}]let arrCopyarr.concat()arrCopy[0].namewangwuconsole.log(arrCopy,arrCopy)//[ { name: wangwu, age: 18 }, { name: lisi, age: 19 } ]console.log(arr,arr)//[ { name: wangwu, age: 18 }, { name: lisi, age: 19 } ]
深拷贝
1.JSON.parse(JSON.stringify(arr))
支持简单结构和复杂结构的深层拷贝 let number[1,2,3,4,5]let copyJSON.parse(JSON.stringify(number))copy.push(0)console.log(copy,copy)//[1, 2, 3, 4, 5, 0]console.log(number,number)//[1, 2, 3, 4, 5]const arr[{name:zhangsan,age:18},{name:lisi,age:19}]let arrCopyJSON.parse(JSON.stringify(arr))arrCopy[0].namewangwuconsole.log(arrCopy,arrCopy)//[ { name: wangwu, age: 18 }, { name: lisi, age: 19 } ]console.log(arr,arr)//[ { name: zhangsan, age: 18 }, { name: lisi, age: 19 } ]
2. Array.slice方法
支持简单结构和复杂结构的深层拷贝 let numbers[1,2,3,4,5]let numbersCopynumbers.slice()numbersCopy.push(6)console.log(numbersCopy,numbersCopy)//[1, 2, 3, 4, 5, 6]console.log(numbers,numbers)//[1, 2, 3, 4, 5]let arr[{name:zhangsan,age:18},{name:lisi,age:19}]let arrCopyarr.slice()arrCopy.push({name:wangwu,age:20})console.log(arrCopy,arrCopy)//[ { name: zhangsan, age: 18 }, { name: lisi, age: 19 }, { name: wangwu, age: 20 } ] console.log(arr,arr)//[ { name: zhangsan, age: 18 }, { name: lisi, age: 19 } ]
3.Array.map方法
支持简单结构和复杂结构的深层拷贝 let numbers[1,2,3,4,5,8]let copynumbers.map(itemitem)copy.push(9)console.log(copy,copy)//[1, 2, 3, 4, 5, 8, 9]console.log(numbers,numbers)//[1, 2, 3, 4, 5, 8]const arr[{name:zhangsan,age:18},{name:lisi,age:19}]const arrCopyarr.map(itemitem)arrCopy.push({name:wangwu,age:20})console.log(arrCopy--,arrCopy)//[ { name: zhangsan, age: 18 }, { name: lisi, age: 19 }, { name: wangwu, age: 20 } ]console.log(arr--,arr)//[ { name: zhangsan, age: 18 }, { name: lisi, age: 19 } ]
Array.from方法
支持简单结构和复杂结构的深层拷贝 const number[1,2,3,4,5]const copyArray.from(number)copy.push(10)console.log(copy,copy)//[1, 2, 3, 4, 5, 10]console.log(number,number)//[1, 2, 3, 4, 5]let arr[{hobby:xxx,age:18},{hobby:yyy,age:19}]const arrCopyArray.from(arr)arrCopy.push({hobby:zzz,age:20})console.log(arrCopy,arrCopy)//[ { hobby: xxx, age: 18 }, { hobby: yyy, age: 19 }, { hobby: zzz, age: 20 } ]console.log(arr,arr)//[ { hobby: xxx, age: 18 }, { hobby: yyy, age: 19 } ]
