JS深拷贝

学习一下vuex的deepCopy源码
https://github.com/vuejs/vuex/blob/dev/src/util.js#L22

注释

我直接把第29行用的find函数放到里面了, 这样好看一点

/**
 * 深拷贝
 * @param {*} obj 拷贝对象(object or array)
 * @param {*} cache 缓存数组
 */
function deepCopy (obj, cache = []) {
  // typeof [] => 'object'
  // typeof {} => 'object'
  if (obj === null || typeof obj !== 'object') {
    return obj
  }
  // 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环
  /**
   * 类似下面这种
   * var a = {b:1}
   * a.c = a
   * 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
   */
  const hit = cache.filter(c => c.original === obj)[0]
  if (hit) {
    return hit.copy
  }

  const copy = Array.isArray(obj) ?  [] :   {}
  // 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它
  cache.push({
    original: obj,
    copy
  })
  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key], cache)
  })

  return copy
}

学习

1.28行的if obj is hit, it is in circular structure

一开始没理解什么是循环结构, 后来在MDN的一个文章中看到了, 就类似于下图这样的循环结构

image

2.typeof方法对应的是基本类型

检测数组和对象返回都是'object'

image

注: 如果要区分数组和对象, 使用使用 Array.isArray 或者 Object.prototype.toString.call

3.基本原理

就是使用递归对数组或者对象进行每一项的复制, 数组当做对象时, 下标即为key

image

深拷贝的另一个简单的方法

直接使用JSON.parse(JSON.stringify(Object))来进行
缺点: 如果对象或者数组里有函数什么的, 就会出问题啦

image

当然对于函数可以使用JSON.stringify()和JSON.parse()的第二个参数进行转换

function stringifyRep(key, value) {
  if (typeof value === "function") {
    return `${value}`;
  }
  return value;
}
function parseRep(key, value) {
  return eval(value);
}
var a = {
  b: () => 1 + 1
}
var aa = JSON.parse(JSON.stringify(a, stringifyRep), parseRep)

image.png

最后

更多小方法, 可以查看https://github.com/klren0312/daliy_knowledge/issues