ES10难吗？你只需要10分钟
栏目: JavaScript · 发布时间: 5年前
内容简介：2019年6月4日，ES10正式draft已对外发布了。浏览器因版本的不同对Javascript标准会有兼容性问题，JavaScript的新的方法都不能使用。等到你能大批量使用的时候，版本早就迭代更多的很多新方法新属性了。那么如何保持队形，不掉队，能在stag3 or stag 4阶段的时候就推进新方法在前端应用呢？ 不用担心，笔者已替你们整理踩好坑，花个10分钟来看一下，你就可以在前端玩转ES10了！！简单来说，每一年，官方就会发布一次新的ECMAScript（以下简称ES）规范提案。也就是说，那些被TC
写在前面的话
2019年6月4日，ES10正式draft已对外发布了。浏览器因版本的不同对Javascript标准会有兼容性问题，JavaScript的新的方法都不能使用。等到你能大批量使用的时候，版本早就迭代更多的很多新方法新属性了。那么如何保持队形，不掉队，能在stag3 or stag 4阶段的时候就推进新方法在前端应用呢？ 不用担心，笔者已替你们整理踩好坑，花个10分钟来看一下，你就可以在前端玩转ES10了！！
JS标准的制定–TC39和ECMA
简单来说，每一年，官方就会发布一次新的ECMAScript（以下简称ES）规范提案。也就是说，那些被TC39采纳并通过Stage 4的提案将会出现在当年正式发布的ES规范中，处于其他Stage的提案可能就会被废弃或者推迟到下一年了。
TC39是什么？
TC39是一个推动Javascript发展的委员会，由 各个主流浏览器厂商的代表 构成。从制定标准到落地是一个漫长的过程，而TC39就是制定ES标准、标准生成的流程，并实现。
TC39制定标准的流程是什么？
TC39的提案流程：tc39.es/process-doc…
The stages of TC39 process
如何追踪最新标准的提案进度？
查看最新提案流程进度的github地址: github.com/tc39/propos…
通过Stage 4，且被包括在ES10的提案
总览
| Index | Proposals | Expected Published Year |
|---|---|---|
| 1 | Optional catch binding |
2019 |
| 2 | JSON superset | 2019 |
| 3 | Symbol.prototype.description |
2019 |
| 4 | Function.prototype.toString revision |
2019 |
| 5 | Object.fromEntries |
2019 |
| 6 | Well-formed JSON.stringify |
2019 |
| 7 | String.prototype.{trimStart,trimEnd} |
2019 |
| 8 | Array.prototype.{flat,flatMap} |
2019 |
详细解说
ES10之前，try{}catch语法中会强制默认绑定异常变量，ES10提案中，可省略掉此变量。
2. JSON superset
ES10之前，U+2028(行分隔符)和U+2029(段分隔符)都会导致ECMA字符串解析的终止，导致使用时会带来SyntaxError异常。ES10提案中，ECMA可支持识别了。
3.Symbol.prototype.description
访问Symbol描述，ES10之前，唯一方法是将符号转换成字符串，ES10提案中提供了getter Symbol.prototype.description来直接访问"Symbol description"：
MDN上的浏览器兼容信息：
4.Function.prototype.toStringrevision 现在返回更精确，包括空格、注释
5.Object.fromEntries
Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。是Object.entries()的反转。
MDN上的浏览器兼容信息：
6.Well-formed JSON.stringify
如果输入 Unicode 格式但是超出范围的字符，原先会直接返回格式错误的字符串，ES10会输出转义序列，并以UTF-8表示：
7.String.prototype.{trimStart,trimEnd}
trimStart 去除字符串的开头的空白部分， trimEnd 去除字符串的尾部的空白部分：
MDN上的浏览器兼容信息：
8.Array.prototype.{flat,flatMap}
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map 和 深度值1的flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
MDN上的浏览器兼容信息：
现阶段，各大 工具 对ES10的支持性
提案通过，距离发布乃至市场上的各大工具支持都还有一段很长的时间要走。。。（很多浏览器的高版本已经支持了，可参考上节的详细解说里的浏览器兼容性）
Node.js
不同版本对ES2015, ES2016, ES2017, ES2018, ES2019支持程度：node.green/
对于 Object.fromEntries，string trimming, Array.prototype.{flat, flatMap}，node.js V12.1.0及以上是100%支持。
Babel
Babel，是目前业内比较优秀的ES 语法转换器。从6开始建议使用 babel-preset-env 这个能根据环境进行自动配置的预设。到了 babel7（2019-03-19发布的最新版本是v7.4.0），我们就可以完全告别这几个历史预设了: preset-es2015/es2016/es2017/latest，子模块都迁移到了@babel下，如这里的babel-preset-env 变成@babel/preset-env。 @babel/preset-env目前最大支持是es2017的转化，明年预计发布es2018。
现在如何在前端兼容使用ES10呢？
Babel
这里不得不提到的一个概念是 babel-polyfill。
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码。
举例来说，ES6在 Array 对象上新增了 Array.from 方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用 babel-polyfill ，为当前环境提供一个垫片。
在Babel7以后，由于修改了命名空间为@babel, 所以需要引入的是@babel/polyfill，Babel 6及以下还是使用 babel-polyfill 即可(因为babel-polyfill实际上是包含了 regenerator runtime and core-js 的模块，混乱使用会造成polyfill会找不到core-js模块的位置)
具体修复步骤参考如下：
Step 1: 执行 npm install @babel/polyfill --save (由于需要运行在你所有source code之前，所以需要安装在dependency而不是devDependency)
Step 2: 如果你是用webpack构建的前端项目，只需在webpack.config.js的entry添加 ‘@babel/polyfill’
Note: @babel/polyfill 默认只会包含 Stage 4的提案部分，如果你需要其他stage的提案(或者当前版本的polyfill还没同步stage4的所有最新提案)，需要额外引入 core-js。
Demo参考链接：github.com/JeanZhao/ES…
PS: 感兴趣的同学可以移步这里查看怎么升级Babel7: babeljs.io/docs/en/v7-…
lodash
如果你不想升级babel或引入额外的babel库件，不妨试试lodash。对于array、number、objects、string等等，除了babel,还有一种工具也可以通过降低它们的使用难度让 JavaScript 变得更简单，从而达到解决ES10里的兼容问题。
如 lodash 提供了_flatten()来处理ES10里stag-4的flat。同样可以解决这个问题。
具体修复步骤参考如下：
Step 1: 执行 npm install lodash --save
Step 2: 在使用的地方 import _ from 'lodash'; 然后就可按照 如Demo里使用的lodash是4.17.11版本，官网使用教程 来查看。
Demo参考链接：github.com/JeanZhao/ES…
简易修改
如果你的项目非常原始(可能历史比较悠久，项目比较庞大)，没有使用babel, lodash, 或者线上环境比较严格，也不允许你更新以上的任何第三方库件。这里还有一种解救方案。
读源码！读源码！读源码！
重要的事情说三遍！
比如flat, 本质上来说，就是递归加数组拼接（reduce+concat）,你可以根据你的需求来自定义 flatten函数的逻辑：
好了，以上就是这次的分享了，欢迎大家批评指正！谢谢~
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深度解析淘宝运营
刘涛 / 电子工业出版社 / 2015-9-1 / 49.00元
淘宝运营，仅有知识是不够的，还需要有系统的运营思路。为帮助广大电商从业者以及众多中小卖家更好地运营店铺，《深度解析淘宝运营》全面阐述了整个店铺运营的重点环节，包括淘宝搜索规则、打造爆款、店铺规划、客户服务、直通车、钻石展位、数据分析等内容。具体操作步骤翔实，并且结合笔者的实际操作经验，将各个环节最本质的一面透彻展现给读者，结合理论与实战，尽可能向读者展示一个最真实的运营核心。《深度解析淘宝运营》没......一起来看看 《深度解析淘宝运营》 这本书的介绍吧!
