JSON
这种方式有弊端,只能解析JSON数据,会丢失其他类型的数据。
JSON.parse(JSON.strigify(value))
JSON.stringify({a: () => {}}) === '{}' // true
jQuery.extend
这是jQuery.extend源代码,如果出现循环引用的问题,会直接报栈溢出错误 Uncaught RangeError: Maximum call stack size exceeded
jQuery.extend = jQuery.fn.extend = function () {
var options,
name,
src,
copy,
copyIsArray,
clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false
// Handle a deep copy situation
if (typeof target === 'boolean') {
deep = target
target = arguments[1] || {}
// skip the boolean and the target
i = 2
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== 'object' && !jQuery.isfunction(target)) {
target = {}
}
// extend jQuery itself if only one argument is passed
if (length === i) {
target = this
--i
}
for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
src = target[name]
copy = options[name]
// Prevent never-ending loop
if (target === copy) {
continue
}
// Recurse if we're merging plain objects or arrays
if (
deep &&
copy &&
(jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))
) {
if (copyIsArray) {
copyIsArray = false
clone = src && jQuery.isArray(src) ? src : []
} else {
clone = src && jQuery.isPlainObject(src) ? src : {}
}
// Never move original objects, clone them
target[name] = jQuery.extend(deep, clone, copy)
// Don't bring in undefined values
} else if (copy !== undefined) {
target[name] = copy
}
}
}
}
// Return the modified object
return target
}
有以下两个注意点
- 注意循环引用
数组存储对象值,避免循环引用的问题。 - 除了对象和数组外的其他
typeof
为object
的数据类型处理
下面是我的实现,不过对其他数据类型处理不完整,做的比较好的是lodash,这是他的源码
function deepCloneWrap (value) {
let mapCache = []
function deepClone (value) {
if(value instanceof Date) return new Date(value);
if(value instanceof RegExp) return new RegExp(value);
if (typeof value !== 'object') return value
if (mapCache.length) {
for (let i = 0,len = arr.length; i < len; ++i) {
if (mapCache[i][0] === value) {
return mapCache[i][1]
}
}
}
// 直接取constructor,就不用判断是数组还是对象。
let cloneVal = new value.constructor()
mapCache.push([value, cloneVal])
for (let k in value) {
cloneVal[k] = deepClone(value[k])
}
return cloneVal
}
return deepClone(value)
}
let a = {b:{c:1}}
a.x = a
let newA = deepCloneWrap(a)
console.log(newA)
用WeakMap,弱引用。
function deepClone (value, hash = new WeakMap()) {
if(value instanceof Date) return new Date(value);
if(value instanceof RegExp) return new RegExp(value);
if (typeof value !== 'object') return value
if (hash.get(value)) return hash.get(value)
let cloneVal = new value.constructor()
hash.set(value, cloneVal)
for (let k in value) {
cloneVal[k] = deepClone(value[k], hash)
}
return cloneVal
}
let b = {b:{c:1}}
b.x = b
let newB = deepClone(b)
console.log(newB)