克隆的意义和常见场景:
- 意义: 保证原数据的完整性和独立性
- 常见场景: 复制数据, 函数入参, 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}
