數(shù)組的深拷貝和淺拷貝
淺拷貝：
var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("數(shù)組的原始值：" + arr + "<br />");//Export:數(shù)組的原始值：One,test,Three
document.writeln("數(shù)組的新值：" + arrto + "<br />");//Export:數(shù)組的新值：One,test,Three
像上面的這種直接賦值的方式就是淺拷貝，很多時候，這樣并不是我們想要得到的結(jié)果溉奕，其實我們想要的是arr的值不變
方法0
for 循環(huán)實現(xiàn)數(shù)組的深拷貝
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
}
方法一：js的slice函數(shù)
對于array對象的slice函數(shù)吮炕，
返回一個數(shù)組的一段。（仍為數(shù)組）
arrayObj.slice(start, [end])
參數(shù)
arrayObj
必選項掸茅。一個 Array 對象。
start
必選項。arrayObj 中所指定的部分的開始元素是從零開始計算的下標(biāo)缩赛。
end
可選項。arrayObj 中所指定的部分的結(jié)束元素是從零開始計算的下標(biāo)撰糠。
說明
slice 方法返回一個 Array 對象酥馍，其中包含了 arrayObj 的指定部分。
slice 方法一直復(fù)制到 end 所指定的元素阅酪，但是不包括該元素旨袒。如果 start 為負，將它作為 length + start處理术辐，此處 length 為數(shù)組的長度砚尽。如果 end 為負，就將它作為 length + end 處理辉词，此處 length 為數(shù)組的長度必孤。如果省略 end ，那么 slice 方法將一直復(fù)制到 arrayObj 的結(jié)尾瑞躺。如果 end 出現(xiàn)在 start 之前敷搪，不復(fù)制任何元素到新數(shù)組中兴想。
舉個栗子??
var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("數(shù)組的原始值：" + arr + "<br />");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtoo + "<br />");//Export:數(shù)組的新值：One,set Map,Three
方法二：js的concat方法
concat() 方法用于連接兩個或多個數(shù)組。
該方法不會改變現(xiàn)有的數(shù)組购啄，而僅僅會返回被連接數(shù)組的一個副本襟企。
語法
arrayObject.concat(arrayX,arrayX,......,arrayX)
說明
返回一個新的數(shù)組。該數(shù)組是通過把所有 arrayX 參數(shù)添加到 arrayObject 中生成的狮含。如果要進行 concat() 操作的參數(shù)是數(shù)組顽悼，那么添加的是數(shù)組中的元素，而不是數(shù)組几迄。
var arr = ["One","Two","Three"];
舉個栗子??
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("數(shù)組的原始值：" + arr + "<br />");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtooo + "<br />");//Export:數(shù)組的新值：One,set Map To,Three
方法三
ES6擴展運算符實現(xiàn)數(shù)組的深拷貝
var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
對象的深拷貝和淺拷貝
方法0
萬能的for循環(huán)實現(xiàn)對象的深拷貝
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
}
方法一
轉(zhuǎn)換成json再轉(zhuǎn)換成對象實現(xiàn)對象的深拷貝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))
方法二
擴展運算符實現(xiàn)對象的深拷貝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)
補充一個數(shù)組去重的方法
function dedupe(array) {
return [...new Set(array)]
}
var arr = [1,2,2,3,3,4,4,5,5]
console.log(dedupe(arr))
大佬原文鏈接https://blog.csdn.net/FungLeo/article/details/54931379
自己在寫微信小程序的時候遇見了蔚龙，數(shù)組里面套對象的情況，拷貝數(shù)組之后映胁，改變了里面對象的屬性木羹，查了網(wǎng)上的深拷貝數(shù)組的方法，發(fā)現(xiàn)無軟用解孙，無意中意識到坑填，里面的對象是淺拷貝，隨將二者合一
栗子??
var list = that.data.list;
var liss = copyArr(list)
function copyArr(arr){
var res = []
for (var i = 0;i < arr.length; i++){
var {...obj} = arr[i]
res.push(obj)
}
return res
}
