js 浅拷贝有大用

 

如题

 像浅拷贝、深拷贝这类的知识点咱们应该都明白是怎么回事，大部分都是在面试的时候会被问到。大多让你实现一个深拷贝。现实中咱们都用比较暴力直接的手段 JSON stringify.

一句话就搞定，管他性能不性能的。不过写了这么多代码，深拷贝用的确实不怎么多。反而浅拷贝用的比较多，尤为是 Object.assign 被大量使用。

固然我并非想分享他的实现远离。而是想说下我忽然感受到浅拷贝有个亮点。

 不知道你们有没有听过，共享结构这个词。

意思是一个新的对象的结构和旧对象的结构一至，是从原始对象直接复制过来的。固然不是说直接负值的，而是使用上面的Object.assign 实现的。

其结果是产生一个新对象。

 

浅拷贝的做用在于对于简单类型能够直接复制其值，对于复杂类型 复制的是一个对象具柄，也就是两个对象指向的是同一块内存区域。

 

好了，经过这种方式产生的两对象，有什么用呢？  咱们能够很方便的检测到 新旧两个对象的差别，也就是哪一个key的值不一样，能够经过一层便利就能够对比出来。

这个时候能够脑补下画面，声明一个对象 aaa，里面包含 两个key ，一个是title 表示标题，一个是list 表示列表 一个数组 【1，2，3】，而后使用Object.assign，进行浅拷贝一个新对象。

新对象和原对象作比较 即使是两个对象的内容没有作任何改变，可是两对象是彻底不等的。由于是生成了一个新对象。可是当咱们比较下两个对象的list的时候，是彻底相等的。

 

第二部。再使用 Object.assign 对愿对象进行生成一个新对象，这个时候 咱们增长第三个参数，是一个对象 ，key 是list  【1，2】。

好，获得结果  比较两个对象的list，是彻底不等的。由于指向了不一样的饮用地址。不知道咱们上面这么描述是否清洗，你们脑补的怎样了。

 

脑补成功了吗，是否是以为这个特性很6，那么咱们本身就能够写一个获取新旧对象的差别方法了。返回差别的key的列表。是吧？

另外说下 脑补，

学技术脑补仍是很重要的。没有电脑的时候就要靠脑子进行预演。

 

应用场景

那这个特性的应用场景有哪些呢？这个我也说很差，你们能够本身想下本身曾作过的项目。  我这里能想到的场景有2个

1. 好比咱们要一个小程序的查询列表页面，这个页面包含不少的条件。有的在当前页面，有的须要跳转页面设置条件，这个时候就须要在回到页面后进行判断条件是否有变化，有变化就从新请求数据渲染页面。

2. 我想到了redux里的reducer这个纯函数，reducer得到state和action两个对象，无论state有无变化都会返回一个新对象。这里使用的就是这个特性。

 

共享结构实现的方法

 1.上面说的 object.assgin

2. 扩展运算符 

3. 若是你们知道的话能够告诉哈

 

总结下：

本节就是介绍了下浅拷贝的妙用，以及提到的一个名字 “共享结构”，以及他的使用场景。固然这种主要是对简单对象，层级也就2层把。层级太多的话复杂度就增长了。具体是否能适用就看具体的场景了。

 

家里电脑卡，错别字较多，还有代码回头补上。

 

以上也能够在 喜马拉雅 上 订阅 “大前端开发解惑” 进行收听