惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Troy Hunt's Blog
T
The Exploit Database - CXSecurity.com
Microsoft Security Blog
Microsoft Security Blog
V
Visual Studio Blog
F
Fortinet All Blogs
博客园_首页
P
Proofpoint News Feed
V
Vulnerabilities – Threatpost
The Cloudflare Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
H
Heimdal Security Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
A
About on SuperTechFans
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
AI
AI
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
Security Affairs
The Register - Security
The Register - Security
S
Security @ Cisco Blogs
Hugging Face - Blog
Hugging Face - Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
Schneier on Security
Schneier on Security
WordPress大学
WordPress大学
Google DeepMind News
Google DeepMind News
GbyAI
GbyAI
T
Tailwind CSS Blog
Hacker News: Ask HN
Hacker News: Ask HN
W
WeLiveSecurity
D
Docker
L
LangChain Blog
B
Blog RSS Feed
The Last Watchdog
The Last Watchdog
Cloudbric
Cloudbric
TaoSecurity Blog
TaoSecurity Blog
N
Netflix TechBlog - Medium
酷 壳 – CoolShell
酷 壳 – CoolShell
I
InfoQ
The Hacker News
The Hacker News
AWS News Blog
AWS News Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
宝玉的分享
宝玉的分享
I
Intezer
云风的 BLOG
云风的 BLOG
V2EX - 技术
V2EX - 技术
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO

博客园 - follaw

知识点记录 websocket 入门 30分钟学会JS AST,打造自己的编译器 这么多小程序,会微信小程序就够了 2019年-感谢一路相随 2019年学习以及输出计划 不要让自己的技能沦为大众化 新年福利-领取2019前端学习资料和电子书 事件循环进阶:macrotask与microtask 放弃setInterval-说说定时器 从Event Loop谈JS的运行机制 css加载是否会阻塞dom树渲染 简单理解下浏览器渲染页面流程 浏览器内核中各个线程之间的关系 Browser进程和浏览器内核(Renderer进程)的通信过程 babel 的一些记录 mac nvm install 小程序云开发补充 浏览器内核-渲染进程
js 浅拷贝有大用
follaw · 2019-01-10 · via 博客园 - follaw

如题

 像浅拷贝、深拷贝这类的知识点我们应该都明白是怎么回事,大部分都是在面试的时候会被问到。大多让你实现一个深拷贝。现实中我们都用比较暴力直接的手段 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层把。层级太多的话复杂度就增加了。具体是否能适用就看具体的场景了。

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

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