如果不考虑RegExp, Function, Symbol, 循环引用的问题,那么使用JSON是一个不错的选择。
比如有这样一个对象:
var target = { name: 'fedaily', age: 1, topics: ['react', 'vue', 'css']}var copyTarget = JSON.parse(JSON.stringify(target))console.log(copyTarget) // { name: 'fedaily', age: 1, topics: ['react', 'vue', 'css'] }copyTarget.topics.push('webpack')// target不变console.log(target) // { name: 'fedaily', age: 1, topics: ['react', 'vue', 'css'] }
但是如果需要考虑各种引用类型,以及循环引用等问题,那么还是需要手动实现这些拷贝逻辑,这里参照lodash深拷贝的实现逻辑,但是精简了很多,我们来看看如何做:
const regexpTag = '[object RegExp]'function deepClone(value, stack = new WeakMap()) { if (!isObject(value)) { return value } let result = Array.isArray(value) ? [] : {} // 函数直接返回 if (typeof value === 'function') { return value } // 处理引用类型的拷贝 result = initCloneByTag(value, getTag(value)) // 处理循环引用 if (stack.has(value)) { return stack.get(value) } stack.set(value, result) // 这里没有处理key是Symbol的情况 // for in 不会枚举Symbol的key // 可以通过Object.getOwnPropertySymbols获取所有Symbol的key for (let key in value) { result[key] = deepClone(value[key], stack) } return result}function isObject (value) { const type = typeof value return value != null && (type === 'object' || type === 'function')}function getTag(value) { if (value == null) { return value === undefined ? '[object Undefined]' : '[object Null]' } return Object.prototype.toString.call(value)}function cloneRegExp(regexp) { const result = new regexp.constructor(regexp.source, /\w*$/.exec(regexp)) result.lastIndex = regexp.lastIndex return result}function initCloneByTag(object, tag) { const Ctor = object.constructor // 可以在这里处理 // arrayBuffer, int32array, dataview等情况 switch (tag) { case regexpTag: return cloneRegExp(object) default: return {} }}