es6 note

[leftrk]

Babel 转码器

npm install --save-dev @babel/core

[leftrk]

配置文件.babelrc

该文件用来设置转码规则和插件

{
 "presets": [],
 "plugins": []
}

# 最新转码规则
npm install --save-dev @babel/preset-env

# react 转码规则
npm install --save-dev @babel/preset-react

{
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

[leftrk]

命令行转码

npm install --save-dev @babel/cli

[leftrk]

babel-node

提供一个支持 ES6 的 REPL 环境

npm install --save-dev @babel/node

$ npx babel-node
> (x => x * 2)(1)
2

[leftrk]

@babel/register

实时对require转码

// index.js
require('@babel/register');
require('./es6.js');

[leftrk]

polyfill

API转码

npm install --save-dev core-js regenerator-runtime

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);

[leftrk]

let 命令

暂时性死区
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

[leftrk]

变量的解构赋值

[leftrk]

let [a, b, c] = [1, 2, 3];

let [foo, [[bar], baz]] = [1, [[2], 3]];

let [ , , third] = ["foo", "bar", "baz"];

let [head, ...tail] = [1, 2, 3, 4];

let [x, y, ...z] = ['a'];

[leftrk]

let [x, y, z] = new Set(['a', 'b', 'c']);

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

[leftrk]

默认值

let [x, y = 'b'] = ['a']; // x='a', y='b'

[leftrk]

对象的解构赋值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

[leftrk]

已经声明的变量用于解构赋值

let x;
({x} = {x: 1});

[leftrk]

字符串的扩展

[leftrk]

字符串的遍历器接口for of