克隆的意义和常见场景:

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}