周元-ES6、ESNext规范及编译工具简介

# 周元-ES6、ESNext规范及编译工具简介

# ECMAScript ES6 ESNext

JS：

直接运行在浏览器的脚本语言
弱类型
脚本语言

V8 context解释环境

IE Netscape ECMAScript 262 ECMA-262 ES

1995年5月，Brendan Eich 只用了10天，就设计完成了JS这种语言的第一版：

基本语法：借鉴 C 语言和 Java 语言。
数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。
正则表达式：借鉴 Perl 语言。
字符串和数组处理：借鉴 Python 语言。

JavaScript 的编程风格是函数式编程和面向对象编程的一种混合体。

取名：Mocha => LiveScript => JavaScript

ECMAScript 和 JavaScript 的关系是，ECMAScript 是一个简单的 JavaScript 标准规范，JavaScript 是 ECMAScript 的一种实现。

ECMAScript，新功能的演进是由一个叫 TC39 (opens new window) 这么个组织在统筹协调和推进的。

[ES6](https://es6.ruanyifeng.com/的特性比较多，在 ES5 发布近 6 年（2009-11 至 2015-6）之后才将其标准化

箭头函数

// 错误做法
class PauseMenu extends React.Component{
  componentWillMount() {
    AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
  }
  componentWillUnmount() {
    AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
  }
  onAppPaused(event) {}
}


// 正确做法
class PauseMenu extends React.Component {
  constructor(props) {
    super(props);
    this._onAppPaused = this.onAppPaused.bind(this);
  }
  componentWillMount() {
    AppStateIOS.addEventListener('change', this._onAppPaused);
  }
  componentWillUnmount(){
    AppStateIOS.removeEventListener('change', this._onAppPaused);
  }
  onAppPaused(event){}
}

不论是箭头函数还是bind，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

async/await

// 这段代码中，循环本身依旧保持同步，并在在内部异步函数之前全部调用完成。
async function process(array) {
  array.forEach(async i = >{
    await doSomething(i);
  });
}

//  await可以和 for...of循环一起使用，以串行的方式运行异步操作
async function process(array) {
  for await(let i of array) {
    doSomething(i);
  }
}

正则表达式命名捕获组

// 这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。
const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
match = reDate.exec('2018-04-30'),
year = match[1],
month = match[2],
day = match[3];


// ES2018允许命名捕获组使用符号 ?<name>，在打开捕获括号 (后立即命名
const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
match = reDate.exec('2018-04-30'),
year = match.groups.year,
month = match.groups.month,
// 04  day    = match.groups.day;  

// 命名捕获也可以使用在 replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式：
const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
d = '2018-04-30',
usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

可选链

ES11新特性（2020）

var name = user ? .info ? .name;
var age = user ? .info ? .getAge ? . ();

可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。根据上面可以看出，用可选链可以大量简化类似繁琐的前置校验操作，而且更安全。

# Babel

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel的作用：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
源码转换（codemods）

React: babel => jsx => js

@babel/preset-react

# ES6项目实战

重点：

VueTree组件的封装: Ref类的抽离

# 备注

# 讲义

ES6 规范 (opens new window)

上次更新: 7/6/2023, 7:44:05 PM