淺拷貝和深拷貝的概念及方法

淺拷貝

只拷貝第一層的值，其他後面拷貝的是地址。

示例

使用u盤在一臺電腦上拷貝文件，使用淺拷貝拷貝的相當於快捷方式。

第一層兩個內容不一樣，其他每層都是指向同一個文件

實現淺拷貝的方法

Object.assign (實現淺拷貝)

let obj = {
user:{
name:
"
jack"
}
}
//assign實現淺拷貝
let copyObj = Object.assign({},obj)
copyObj.user.name = 'tom'
console.log(obj.user.name);
console.log(copyObj.user == obj.user);//true

Array.prototype.concat

let arr = [
{name:'jack'}
]
//利用concat方法實現對應的淺拷貝
let copyArr = arr.concat()
console.log(arr[0] == copyArr[0]);
console.log(copyArr == arr); //false

 Array.prototype.slice

//slice 截取方法
let sliceArr = arr.slice(0)
console.log(arr[0] == sliceArr[0]);
console.log(sliceArr == arr); //false...

...擴展運算符實現

//開闢一個新的變數
let newArr = [...arr]
console.log(newArr[0] == arr[0]);
console.log(newArr == arr); //false

使用第三方的插件 lodash.js _.clone方法實現

//實現淺拷貝
let obj1 = {
user:{
name:
"
jack"
}
}
let copyObj1 = _.clone(obj1)
console.log(copyObj1.user == obj1.user);//true
console.log(copyObj1 == obj1);//false

深拷貝

每層都進行值拷貝

示例

使用u盤在一臺電腦上拷貝文件，將文件所有複製一份，在粘貼一份。這倆份文件除了值是一致的，其
他都不一樣。倆者的地址是獨立的。

實現方式

使用字元串轉換（序列化 JSON.stringify 和反序列化 JSON.parse）

let obj = {
users:[{
name:
'
jack'
}]
}
//每層都只拷貝值 每層的地址都不一樣
// 字元串轉換 序列化和反序列化
let copyObj = JSON.parse(JSON.stringify(obj))
console.log(copyObj == obj); //false
console.log(copyObj.users == obj.users); //false
console.log(copyObj.users[0] == obj.users[0]); //false
console.log(copyObj.users[0].name == obj.users[0].name); //true

使用lodash 裡面_.cloneDeep

//使用第三方lodash _.cloneDeep方法實現
let cloneObj = _.cloneDeep(obj)
console.log(cloneObj == obj); //false
console.log(cloneObj.users == obj.users); //false
console.log(cloneObj.users[0] == obj.users[0]); //false
console.log(cloneObj.users[0].name == obj.users[0].name); //true

使用遞歸實現對應的深拷貝（面試題）

思路

• 根據傳入的對象 進行判斷 如果不是對象直接賦值

• 如果是對象就要先創建一個對象 那麼就需要判斷是數組還是對象 如果是數組創建數組 如果是對象就創建對象

• 如果是數組獲或者是對象 取出裡面的值進行遞歸賦值

function deepClone(target) {
//如果傳入的目標對象是空就直接返回
if (!target) return {}
let copyObj = {} //接收拷貝好的對象
//根據typeOf的返回值進行判斷 判斷是否為對象
if (typeof target == 'object') {
//判斷是否為數組
copyObj = target instanceof Array ? [] : {}
//遍歷所有的key加入到對應的copyObj裡面
for (let key in target) {
//將對應的值和key加入到對應的copyObj裡面
copyObj[key] = deepClone(target[key])
}
} else {
copyObj = target //直接賦值
}
return copyObj
}