口碑好的合肥网站建设,西安网页公司,聊城专业网站建设公司哪家好,简约大气网站设计欣赏我们都知道#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 } ]
