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

qq_42750608

已于 2023-09-28 14:11:54 修改

阅读量482

点赞数

分类专栏： JavaScript面试问题克隆文章标签： javascript 开发语言 ecmascript

于 2023-09-27 20:36:05 首次发布

本文链接：https://blog.csdn.net/qq_42750608/article/details/133362971

版权

JavaScript面试问题同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

克隆

2 篇文章 0 订阅

订阅专栏

本文探讨了克隆在IT中的重要性，包括浅克隆（如ES6扩展运算符）、深度克隆（如JSON.stringify+JSON.parse）以及消息通讯中的克隆方法。还介绍了手写深度克隆函数和其限制，如处理循环引用和特殊类型对象的问题。

摘要由CSDN通过智能技术生成

克隆的意义和常见场景:

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

浅克隆:

对象常用的浅克隆

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

数组常用的浅克隆

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

深度克隆:

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

深度克隆的方法:

JSON.stringify+JSON.parse

eg:JSON.parse(JSON.stringify(对象或数组))

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

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

消息通讯 --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)
})

消息通讯:

window.postMessage
BroadcastChannel
Shared Worker
Message Channel

基于消息通讯的局限:

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

手写深度克隆--递归

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
    }