前端的多种克隆方式和注意事项

克隆的意义和常见场景:

1. 意义: 保证原数据的完整性和独立性
2. 常见场景: 复制数据, 函数入参, class构造函数等

浅克隆:

对象常用的浅克隆

1. es6扩展运算符...
2. Object.assign

数组常用的浅克隆

1. es6的扩展运算符...
2. slice=>arr.slice(0)
3. [].concat

深度克隆:

1. 克隆对象的每个层级
2. 如果属性值是原始数据类型, 拷贝其值, 也就是我们常说的值拷贝
3. 如果属性值是引用类型, 递归克隆

深度克隆的方法:

JSON.stringify+JSON.parse

JSON.stringify+JSON.parse的局限性:

1. 只能复制普通键的属性, symbol类型的无能为力
2. 循环引用对象,比如window不能复制
3. 函数,Date,Reg,Blob等类型不能复制
4. 性能差

消息通讯 --BroadcastChannel等等

let chId = 0
function clone(data) {
    chId++
    let cname = `__clone__${chId}`
    let ch1 = new BroadcastChannel(cname)
    let ch2 = new BroadcastChannel(cname)
    return new Promise((resolve)=> {
        ch2.addEventListener('message', ev=>resolve(ev.data), {once: true});
        ch1.postMessage(data)
    })
}

clone({
    a: 'fdfewfjew', 
    b: 1, 
    // c: Symbol('gggg')
})
.then(res=> {
    console.log(res)
})
.catch(err=> {
    console.log(err)
})

消息通讯:

1. window.postMessage
2. BroadcastChannel
3. Shared Worker
4. Message Channel

基于消息通讯的局限:

1. 循环引用对象不能复制, 如:windows
2. 函数不能复制
3. 同步变成异步

手写深度克隆--递归

function arrLengthMoreThanZero(val) {
       return Array.isArray(val) && val.length > 0
    }
    // 非空对象或者数组length大于0的数组
    function isNotNullObjectOrArr (val) {
        if(val == null) return false;
        const isObject = Object.prototype.toString.call(val) === '[object Object]'
        if(isObject && JSON.stringify(val) === '{}') return false;
        return Object.prototype.toString.call(val) === '[object Object]' || arrLengthMoreThanZero(val);
    }
    function deepClone(obj={}) {
        if(!isObject(obj)) {
            return obj
        }
        // 初始化返回结果
        let result;
        // instance of判断是不是数组
        if(obj instanceof Array) {
            result = []
        }
        else {
            result = {}
        }
        // for in循环对象和数组都能使用
        for(let key in obj) {
            // hasOwnProperty=>保证key不是原型的属性
            if(obj.hasOwnProperty(key)) {
                // 递归
                result[key] = deepClone(obj[key])
            }
        }
        return result
    }