進階路線
image.png
需要知道的就是一點：JavaScript的數(shù)據類型分為基本數(shù)據類型和引用數(shù)據類型。對于基本數(shù)據類型的拷貝，并沒有深淺拷貝的區(qū)別，我們所說的深淺拷貝都是對于引用數(shù)據類型而言的。
5.1淺拷貝
淺拷貝的意思就是只復制引用，而未復制真正的值。
淺拷貝的實現(xiàn)
function Clone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判斷復制的目標是數(shù)組還是對象
for(let keys in source){ // 遍歷目標
if(source.hasOwnProperty(keys)){
targetObj[keys] = source[keys];
}
}
return targetObj;
}
5.2 深拷貝
深拷貝就是對目標的完全拷貝，不像淺拷貝那樣只是復制了一層引用，就連值也都復制了。
只要進行了深拷貝，它們老死不相往來，誰也不會影響誰。
目前實現(xiàn)深拷貝的方法不多，主要是兩種：
1、利用 JSON 對象中的 parse 和 stringify
2、利用遞歸來實現(xiàn)每一層都重新創(chuàng)建對象并賦值
5.2.1 JSON.stringify/parse的方法
- JSON.stringify 是將一個 JavaScript 值轉成一個 JSON 字符串。
- JSON.parse是將一個 JavaScript 值轉成一個 JSON 字符串。
const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false
確實是深拷貝，也很方便。但是，這個方法只能適用于一些簡單的情況。比如下面這樣的一個對象就不適用,undefined、function、symbol 會在轉換過程中被忽略。
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ?}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}
5.2.2 遞歸深拷貝
遞歸的思想就很簡單了，就是對每一層的數(shù)據都實現(xiàn)一次 創(chuàng)建對象->對象賦值 的操作，簡單粗暴上代碼：
function CloneDeep(source){
// 判斷復制的目標書數(shù)組還是對象
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判斷對象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對象或者數(shù)組
if(source[keys] && typeof source[keys] === "object"){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
一個簡單的深拷貝就完成了，但是這個實現(xiàn)還存在很多問題。
- 沒有對傳入參數(shù)進行校驗，傳入 null 時應該返回 null 而不是 {}
- 對于對象的判斷邏輯不嚴謹，因為 typeof null === 'object'
該進之后的寫法
// 判斷是否為對象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source){
// 判斷復制的目標書數(shù)組還是對象
if(!isObject(source)) return source;
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判斷對象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對象或者數(shù)組
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
循環(huán)引用問題
以下這種情況會造成死循環(huán) 導致棧溢出
const obj1 = {
x: 1,
y: 2
};
obj1.z = obj1;
const obj2 = CloneDeep(obj1); \\棧溢出
解決辦法
解決方案很簡單，其實就是循環(huán)檢測，我們設置一個數(shù)組或者哈希表存儲已拷貝過的對象，當檢測到當前對象已存在于哈希表中時，取出該值并返回即可
// 判斷是否為對象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source,hash = new WeakMap()){
// 判斷復制的目標書數(shù)組還是對象
if(!isObject(source)) return source;
if (hash.has(source)) return hash.get(source); // 新增代碼，查哈希表
var targetObj = source.constructor === Array ? [] : {};
hash.set(source, targetObj ); // 新增代碼，哈希表設值
for(let keys in source){
//判斷對象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對象或者數(shù)組
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
破解遞歸爆棧
function cloneDeep(x) {
const root = {};
// 棧
const loopList = [
{
parent: root,
key: undefined,
data: x,
}
];
while(loopList.length) {
// 廣度優(yōu)先
const node = loopList.pop();
const parent = node.parent;
const key = node.key;
const data = node.data;
// 初始化賦值目標，key為undefined則拷貝到父元素，否則拷貝到子元素
let res = parent;
if (typeof key !== 'undefined') {
res = parent[key] = {};
}
for(let k in data) {
if (data.hasOwnProperty(k)) {
if (typeof data[k] === 'object') {
// 下一次循環(huán)
loopList.push({
parent: res,
key: k,
data: data[k],
});
} else {
res[k] = data[k];
}
}
}
}
return root;
}
