知识串联：从数据拷贝开始思考能涉及到的知识点

文章大纲

变量与内存的关系

在js中，内存空间一般分为栈(stack)、堆(heap)：

栈一般存储规则、占用空间小且大小基本固定的数据，所以基本数据类型一般基本数据类型存储在栈中
堆一般存储不规则、占用空间大且大小不固定的数据，所以一般引用数据类型存储在堆中

引用数据类型一般都会在栈中存储一个引用地址，因此，当我们访问一个引用数据类型的时候，其实首先访问的是这个数据存储在栈中的引用地址，然后通过这个地址才最终访问到真正的数据

const a = 1
const b = {
  b1:1,
  b2:2
}

内存空间

为什么需要对数据进行拷贝?

let a = 1
let b = {
  b1:1,
  b2:2
}

const c = a
const d =b

a = 2
b.b1=1.1

内存空间

可以发现，虽然d在栈中新开辟了一个空间，但是它指向的堆内存指针和b是一样的，因此，当修改堆内存里的数据时，相应的d也会更改.

但是很多时候我们需要他们和基本数据类型一样，是互相独立的，互不影响，此时我们就需要拷贝一份堆数据，然后将新数据的指针指向这个新的堆数据

思考：为什么写vue模板时，data要求是一个函数呢？

// test1
var a = {
  test1:1,
  test2:2
}
var b = a
var c = a
console.log(b === c) // true

// test2
var a = function (){
  return {
    test1:1,
    test2:2
  }
}
var b = a()
var c = a()
console.log(b === c) // false

可以发现，当我们创建对象时通过在函数内返回对象的方式去创建，能够保证每一次的赋值都是一个新鲜的互不影响的对象，因此在vue模板中的data通过函数的方式创建数据，可以保证多个地方引用相同的模板时，互相之间的数据不会互相影响

引用类型的拷贝

一般我们在谈论拷贝时，都会想到浅拷贝和深拷贝；

浅拷贝，就是只拷贝对象的第一层数据，如果第二层还存在引用类型，则依然会有问题的，我理解的应用场景：
- 明确的知道我要拷贝的对象是一个简单的，只有一层的数据
- 虽然对象比较复杂，但是明确的知道只会更改第一层简单的，不存在第二层的变量数据，这时浅拷贝会有一丢丢的性能提升
深拷贝，就是将一个对象完全的拷贝出来，无论层级多深，多复杂，一般为公司util方法的时候，使用的都是深拷贝

浅拷贝的实现

方法一：Object.assign

const obj = {a:1,b:2};
const cloneObj = Object.assign({}, obj);

提示：Object.assign 方法只会拷贝源对象自身的并且可枚举的属性,使用源对象的[[Get]]和目标对象的[[Set]],因此如果要拷贝的对象包含继承属性和不可枚举属性,则这些属性将不可被拷贝

方法二：通过解构赋值的方式

const obj = {a:1,b:2};
const cloneObj = {...obj};

提示： 展开语法和Object.assign()的行为一致

深拷贝的实现

方法一：JSON.parse

JSON.stringify会将数据转换成JSON字符串的形式，存储在栈中，然后再通过JSON.parse重新转换成对象，存储在堆中。通过转换成字符串的方式，巧妙地重新生成了一份对象的副本

const obj = {
    a:{a1:1,a2:2},
    b:{b1:1,b2:2}
  };
const cloneObj = JSON.parse(JSON.stringify(obj));

如此简单的深拷贝，还是有使用限制的：

对于诸如Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失或变化。

var obj = {
  a: function() {}, // 丢失
  b: new RegExp(/ab+c/, 'i'),
  c: 123,
  d: new Set([1,2,3])
}
console.log(JSON.parse(JSON.stringify(obj)))
// {
//   b:{},
//   c:123,
//   d:{}
// }

如果对象内部存在循环引用关系，则会报错

var obj = {
  a:1
}
var obj2 = {
  b: obj
}
obj.c = obj2
console.log(JSON.parse(JSON.stringify(obj)))
// Uncaught TypeError: Converting circular structure to JSON

如果对象的层级太深，则会栈溢出

var obj = {}, cur = obj;
for (let i = 0; i < 10000; i++) {
  cur.next = {}
  cur = cur.next
}
JSON.parse(JSON.stringify(obj))
// RangeError: Maximum call stack size exceeded

因此如果能够明确知道要拷贝的对象结构及复杂度，则可以考虑是否使用此方式。
延伸：实现JSON.stringify函数

方法二：递归

// 面试够用版
function deepClone(obj){
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return new Date(obj)

  if (typeof obj !== "object" || obj === null) return obj;

  let newObj=Array.isArray(obj)?[]:{}

  for(var attr in obj){
      if (Object.prototype.hasOwnProperty.call(obj, attr)) {
          newObj[attr]=deepClone(obj[attr])
      }
  }
  return newObj
}

但是，这个递归版的深拷贝还是会有方法一的问题：

存在循环引用的情况会爆栈RangeError: Maximum call stack size exceeded
对象层次太深也会爆栈RangeError: Maximum call stack size exceeded

解决递归是循环引用的问题

通过Map或者别的方式存储已经遍历过的对象，然后在每次递归时判断map中有没有存储过，如果存储过就返回存储的对象，这样就可以解决循环引用问题

function deepClone(obj, map = new Map()){
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return new Date(obj)

  if (typeof obj !== "object" || obj === null) return obj;

  let newObj=Array.isArray(obj)?[]:{}
  if (map.get(obj)) {
    return obj;
  }
  map.set(obj, newObj);

  for(var attr in obj){
      if (Object.prototype.hasOwnProperty.call(obj, attr)) {
          newObj[attr]=deepClone(obj[attr], map)
      }
  }
  return newObj
}

解决层级太深爆栈的问题一

理论上用尾调用的方式递归是可以解决这个问题的。
尾调用优化:es6规范规定，只要实现了尾调用，那么在递归里面就不会出现栈溢出报错。
但现实是，很多浏览器都没有实现这个规范，依然会出现栈溢出报错，尾调用还有一个限制条件就是必须要在严格模式下才生效。
v8引擎曾实现过这一功能，但后来又删除了调用优化，因为尾递归优化会破坏函数的调用栈信息。同时TC39 也在寻找新的语法来显式指明需要使用尾递归优化。

解决层级太深爆栈的问题二：DFS||BFS

理论上，所有的递归都可以通过迭代的方式实现，而迭代的方式就不会出现栈溢出的问题，只不过实现迭代方式的难易程度不一样！
在深拷贝这个问题上，我们可以通过栈+迭代的方式来实现：深度优先遍历(DFS)或广度优先遍历(BFS) ，实现原理差不多，我们以BFS举例：来源

function getEmpty(o){
    if(Object.prototype.toString.call(o) === '[object Object]'){
        return {};
    }
    if(Object.prototype.toString.call(o) === '[object Array]'){
        return [];
    }
    return o;
}
function deepCloneBFS(origin) {
  let queue = []; // 栈存储解构
    let map = new Map(); // 记录出现过的对象，用于处理环

    let target = getEmpty(origin);
    if(target !== origin){
        queue.push([origin, target]);
        map.set(origin, target);
    }

    while(queue.length){
        let [ori, tar] = queue.shift();
        for(let key in ori){
            // 处理环状
            if(map.get(ori[key])){
                tar[key] = map.get(ori[key]);
                continue;
            }

            tar[key] = getEmpty(ori[key]);
            if(tar[key] !== ori[key]){
                queue.push([ori[key], tar[key]]);
                map.set(ori[key], tar[key]);
            }
        }
    }
    return target;
}

结构化克隆算法

MDN由HTML5规范定义的用于复制复杂JavaScript对象的算法,可以避免无限遍历循环，支持的数据类型也比较多，但是，目前应该只有内置的api实现了此功能，所以如果需要使用这个功能就需要借助内置API，间接实现克隆！Channel Messaging API的Channel Messaging接口的实现兼容性算是比较好的。
[图片上传失败...(image-473666-1627546631737)]

node 序列化API（v8.0.0版本以上）

node 提供了一个序列化API可以和HTML结构化克隆相媲美，用法也比较简单

const buf = v8.serialize(obj);
const clone = v8.deserialize(buf);

console.log(clone);

immerjs的另辟蹊径

其实上面的方法都有一个问题，那就是，无论我们有没有使用数据，都会对所有数据进行一次遍历，对于庞大的数据来说，性能并不是特别好，因此可以考虑通过Proxy代理方式的方式对用到的对象进行拷贝，没有用到的部分，依然是同一份数据。
Immer就是通过这样的思想，以最小的成本实现了 js 的不可变对象

最后

最好的克隆方法，取决于使用环境和对象的复杂度。

知识串联：从数据拷贝开始思考能涉及到的知识点

知识串联：从数据拷贝开始思考能涉及到的知识点

变量与内存的关系

为什么需要对数据进行拷贝?

思考：为什么写vue模板时，data要求是一个函数呢？

引用类型的拷贝

浅拷贝的实现

方法一：Object.assign

方法二：通过解构赋值的方式

深拷贝的实现

方法一：JSON.parse

方法二：递归

解决递归是循环引用的问题

解决层级太深爆栈的问题一

解决层级太深爆栈的问题二：DFS||BFS

结构化克隆算法

node 序列化API（v8.0.0版本以上）

immerjs的另辟蹊径

最后

参考

推荐阅读更多精彩内容

知识串联：从数据拷贝开始思考能涉及到的知识点

变量与内存的关系

为什么需要对数据进行拷贝?

思考：为什么写vue模板时，data要求是一个函数呢？

引用类型的拷贝

浅拷贝的实现

方法一：Object.assign

方法二：通过解构赋值的方式

深拷贝的实现

方法一：JSON.parse

方法二： 递归

解决递归是循环引用的问题

解决层级太深爆栈的问题一

解决层级太深爆栈的问题二：DFS||BFS

结构化克隆算法

node 序列化API（v8.0.0版本以上）

immerjs的另辟蹊径

最后

参考

推荐阅读更多精彩内容

方法二：递归