陣列和物件的深拷貝、淺拷貝
阿新 • • 發佈:2019-02-13
陣列的淺拷貝
首先看一下程式碼:
let arr1=[1,3,3];
let arr2 = arr1;
console.log(arr2);//[ 1, 3, 3 ]
arr1[1]=8;
console.log(arr2)//[ 1, 8, 3 ]
在js中,陣列和物件的複製如果使用=號來進行復制,那只是淺拷貝,如上,arr的修改,會影響arr2的值,這顯然在絕大多數情況下,並不是我們所需要的結果。
陣列深拷貝
for迴圈實現:
var arr = [1,2,3,4,5] var arr2 = copyArr(arr) function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push(arr[i]) } return res }
如上,通過對陣列的for迴圈,即可實現對陣列的深拷貝了。
slice 方法實現陣列的深拷貝
這個程式碼實現非常簡單。原理也比較好理解,他是將原陣列中抽離部分出來形成一個新陣列。我們只要設
置為抽離全部,即可完成陣列的深拷貝。程式碼如下:
var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr) //[ 1, 2, 5, 4, 5 ]
console.log(arr2)//[ 1, 2, 3, 4, 5 ]
concat 方法實現陣列的深拷貝
這個程式碼也非常簡單,原理更加粗暴。它是用於連線多個數組組成一個新的陣列的方法。那麼,我們只要
連線它自己,即可完成陣列的深拷貝。程式碼如下:
var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr) //[ 1, 2, 5, 4, 5 ]
console.log(arr2)//[ 1, 2, 3, 4, 5 ]
ES6擴充套件運算子實現陣列的深拷貝
OK,以上之前講的方法全部過時了,用下面的方法實現陣列的深拷貝是最簡單的。
var arr = [1,2,3,4,5] var [ ...arr2 ] = arr arr[2] = 5 console.log(arr) //[ 1, 2, 5, 4, 5 ] console.log(arr2)//[ 1, 2, 3, 4, 5 ]
物件的深拷貝
for迴圈
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
obj.name="banggan";
console.log(obj);//{ name: 'banggan', sex: 'man', old: '18' }
console.log(obj2);//{ name: 'FungLeo', sex: 'man', old: '18' }
ES6實現
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18' }
var { ...obj2 } = obj
obj.name="banggan";
console.log(obj);//{ name: 'banggan', sex: 'man', old: '18' }
console.log(obj2);//{ name: 'FungLeo', sex: 'man', old: '18' }
物件和陣列的深拷貝實現
function copy(obj){
if(obj instanceof Array){
var [...buf]=obj;
return buf;
}else if(obj instanceof Object){
var{...buf}=obj;
return buf;
}else{
return obj;
}
}