ES5 ES6 深拷贝

我不是女神ヾ 2022-11-18 01:56 193阅读 0赞

### ES5 深拷贝 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        
        <script>
            let obj = { 
                name: '小江',
                age: 27,
                info: { 
                    hobby: ['travel', 'piano', {  a: 1 }],
                    career: { 
                        teacher: 4,
                        engineer: 9
                    }
                }
            }
    
            function deepClone(origin, target) { 
                var tar = target || { };
                var toStr = Object.prototype.toString;
                var arrType = "[object Array]";
                for (var k in origin) { 
                    if (origin.hasOwnProperty(k)) { 
                        if (typeof origin[k] === 'object' && origin[k] !== null) { 
                            tar[k] = toStr.call(origin[k]) === arrType ? [] : { };
                            deepClone(origin[k], tar[k]);
                        } else { 
                            tar[k] = origin[k];
                        }
                    }
                }
                return tar;
            };
    
            let newObj = deepClone(obj, { });
            newObj.info.hobby[2].a = 123;
            console.log(obj, '===', newObj);
    
    
        </script>
    </body>
    
    </html>

### ES6 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        
        <script>
        // weakMap 弱引用，删除了键名后，键值会被垃圾回收机制回收
        </script>
    
        <script>
            let obj = { 
                name: '小江',
                age: 27,
                info: { 
                    hobby: ['travel', 'piano', {  a: 1 }],
                    career: { 
                        teacher: 4,
                        engineer: 9
                    }
                }
            };
    
    
            function deepClone(origin, hashMap = new WeakMap()) { 
                if (origin == undefined || typeof origin !== 'object') { 
                    return origin;
                };
                if (origin instanceof Date) { 
                    return new Date(origin);
                };
                if (origin instanceof RegExp) { 
                    return new RegExp(origin);
                };
    
                const hashKey = hashMap.get(origin);
                if (hashKey) { 
                    return hashKey;
                }
    
                let target = new origin.constructor();
                hashMap.set(origin, target);
                for (let k in origin) { 
                    if (origin.hasOwnProperty(k)) { 
                        target[k] = deepClone(origin[k]);
                    }
                };
                return target;
            };
    
            let newObj = deepClone(obj);
            newObj.info.hobby[2].a = 123;
            console.log(obj, newObj);
        </script>
    
    </body>
    
    </html>