ES6: 概览

[xvno]

关于 ES6

ECMAScript 2016, 2017

• stage-0 Strawman
• stage-1 Proposal
• stage-2 Draft
• stage-3 Candidate
• stage-4 Finished

一般到达 stage-2 就一位置能通过

Babel 转码器

参照 这里

配置 .babelrc

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

presets

• @babel/preset-env
• @babel/preset-stage-0
• @babel/preset-react
• @babel/preset-typescript

安装模块

nig @babel/core @babel/cli
nid @babel/preset-env @babel/preset-react

{
    "presets": [
        "@babel/env",
        "@babel/preset-react",
        {
            "targets": {
                "chrome": "70",
                "firefox": "60",
                "safari": "11.1"
            }
        }
    ],
    "plugins": []
}

[xvno]

特性

• 声明方式
• 解构赋值
• 默参
• 字符串: 模板字串&新方法
• 正则表达式
• 展开操作符: ...

[xvno]

新的声明方式 let, const 以及随之而来的块级作用域

1. 块级作用域
2. 无变量提升
3. 暂时性死区
4. const 的常量特性
5. 迄今为止, 凑齐了 6 种声明方式: var, function, let, const, import, class

[xvno]

解构赋值 Destructuring

按照一定的规则, 从对象或数组中取值为变量赋值:

// # Object
let obj = {name: 'vno', yob: '2000'};
let {name, yob, it} = obj; // name: 'vno, yob: '2000', it: undefined
// const { ipcMain, BrowserWindow } = require('electron');
const {log} = console;

// ## 模式解构
let {name: nickname, yob: birth} = obj; // nickname: 'vno', birth: '2020'

// # Array
let [a, b, c, d] = [1,2,3]; // a: 1, b: 2, c: 3, d: undefined
let [j, k] = false; // Thrown:...
let [e, f] = new Set(['a', 'b', 'c']); // e: 'a', f: 'b'

// # 字符串
let {length: len} = 'abcde'; // len:5
let [a, b, c] = 'abcde'; // a: 'a', b: 'b', c: 'c'

// # 函数参数
function add([x, y]) {
    return x+y;
}

[[0,1], [1,2]].map([a,b] => a+b);

// # 综合
// ## 1
let comp = {
    kw: [ 'vno', { name: 'Obama'}],
    yob: 2020
}
let { kw: [keyword, {name: president}], yob: year} = comp; // keyword='vno', president='Obama', year=2020

// ## 2
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); //obj: {prop:123}, arr: [true]

// ## 3
[a, b] = [b, a]; // 用来写排序算法哦

// ## 4 

for(let [kw, yob] of comp) {
    ...
}

1. 解构不成功, 变量值便为 undefined
2. 如果被解构实体不是数组或对象, 会报错
3. Set也可以解构, 其实具有Iterrator接口的数据结构都可以采用数组的解构赋值方式

[xvno]

参数默认值(默参)

function presidentSay(name='Donald M.F. Trump', words) {
    let say = new Cowsay(name);
    say(words);
}

let [a = 1, b = 0] = anArray;

[xvno]

字符串:

模板字串, tag模板

let cap = `Hello, ${nickname}!`;

tag`Hello, ${nickname}`

实例方法:

• includes()
• startsWith()
• endsWidth()
• repeat(times: Number)
• padStart()
• padEnd()
• trimStart()
• trimEnd()
• matchAll()

[xvno]

正则表达式

RegExp构造函数, 第二参数的设定

修饰符 y

实例属性 .flags [i, g, y, u]

后行断言

/\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
/\d+(?!%)/.exec('that’s all 44 of them of 30% of the whole population')                 // ["44"]

/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
/(?<!\$)\d+/.exec('it’s is worth about €90/$110')                // ["90"]

具名组匹配

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

const matchObj = RE_DATE.exec('2020-03-27');
const year = matchObj[1]; // 2020
const month = matchObj[2]; // 03
const day = matchObj[3]; // 27

const RE_DATE = /(?<year>\d{4})-(?<month>\d{1,2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('2020-3-27');
const year = matchObj.groups.year; // 2020
const month = matchObj.groups.month; // 03
const day = matchObj.groups.day; // 27

解构赋值和替换

let re = /(?<year>\d{4})-(?<month>\d{1,2})-(?<day>\d{2})/u;
'2020-3-27'.replace(re, '$<day>/$<month>/$<year>')

引用

• 使用 \k<组名> 在正则表达式内部引用某个“具名组匹配”
• 使用 \i在正则表达式内部引用某个“组匹配”, i为组号

正则匹配index, indices

[xvno]

数字

1. 二进制 0b 或 0B
2. 八进制 0o 或 0O
3. Number.isFinite(), Number.isNaN -> isNaN()
4. Number.parseInt(), Number.parseFloat(); 跟 parseInt, parseFloat是同样一个函数
5. Number.isInteger()
6. Number.EPSILON true === (Math.abs(0.3 - 0.1 - 0.2) < Number.EPSILON)
7. Math对象的扩展:
8. BigInt 数字后面带n, 123456789987654321n

Math对象的扩展:

• .trunc()
• .cbrt()
• .sign()
• .hypot() // 平方根(平方求和)
• .clz32()

对数方法

• .expm1(x) // e**x - 1，即 Math.exp(x) - 1
• .log1p(x) // Math.log(1+x)
• .log10(x)
• .log2(x)

双曲函数

指数函数 **, e**2

Math.trunc(val): 把val转换为Number, 在去除小数部分, 失败则NaN

Math.trunc(1.5); // 1
Math.trunc(0.5); // 0
Math.trunc(-1.5); // -1
Math.trunc(-0.5); // -0

Math.trunc('1.5'); // 1
Math.trunc(true); // 1
Math.trunc(false); // 0
Math.trunc(null); // 0

Math.trunc(undefined); // NaN
Math.trunc(NaN); // NaN
Math.trunc('abc'); // NaN

[xvno]

函数的扩展

• 参数赋值
• rest参数
• function.name
• Arrow Function

参数

1. 默参
2. 解构赋值 + 默参
3. 函数 .length属性: 参数总数 - 默参个数

rest参数

function add(...args) {
    for(let i of args) {
        console.log(i);
    }
}

箭头函数

1. 使用外部作用域的this
2. 不能当做构造函数, new免疫
3. 无arguments, 但可以使用rest参数
4. 不能使用yield, 即不能当做Generator函数

[xvno]

Iterator接口

• 能够使用 for...of 进行遍历
• 一个数据结构只要部署了 Symbol.iterator 方法，就被视为具有 iterator 接口，就可以用 for...of 循环遍历它的成员。

[Symbol.iterator] 方法

obj.prototype[Symbol.iterator] = function() {
    return {
        next () {
            return {done: false, value}
        }
    }
}

给一个类实现Iterator接口

class A{
    constructor(name, dob){
        this.name = name;
        this.dob = dob;
    }
}
A.prototype[Symbol.iterator] = function() {
    const z = this;
    const keys = Object.keys(z);
    let i = 0;
    let len = keys.length;
    let key = null; 

    return {
        next() {
            if(i < len) {
                key = keys[i++];
                return {done: false, value: {key, value: z[key]} };
            } else {
                return {done: true, value: undefined};
            }
        }
    }
}

let a = new A('xvno', 2020);

for(let i of a) {
    console.log(i);
}

原生具备Iterator接口的数据结构:

ES6 中默认部署了 Symbol.Iterator 的数据类型包括: MASS TAN: Map, Array, Set, String, TypedArray, arguments, DOM Node List, Generator

• Array
• Map
• Set
• String
• NodeList
• 函数的arguments
• TypedArray

Array, Set, Map 都有 entries(), keys(), values() 方法.

调用Iterator接口的情况

1. 解构赋值
2. 扩展运算符
3. yield*
4. for...of: Array.from(), Map(), Set(), WeakMap(), WeakSet(), Promise.all(), Promise.race()
5. Generator

一个对象如果声明了正确的 [Symbol.iterator](){}方法(记为I), 即表明该对象是 iterable, 而当前对象的I方法就是该对象的遍历器生成函数, 执行I函数返回当前对象的遍历器(Iterator).

let obj = {
    [Symbol.iterator]() {
        let z = this;
        let keys = Object.keys(z);
        let idx = 0;
        let len = keys.length;

        return {
            next () {
                if(idx >= len) {
                    return { done: true};
                } else {
                    let key = keys[idx++];
                    let val = z[key];
                    return {
                        value: {[key]: val}
                    }
                }
            }
        }
    }
}

obj.name = 'vno'
obj.yob = 2020;

let iter = obj[Symbol.iterator]();

console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

[xvno]

for...in 和 for...of

for...in

• 遍历目标的id: 数组的下标, 对象的key
• 会遍历手动添加的属性键以及原型链上的键
• 不适合遍历数组, 数组用 .forEach

for...of

• 只会遍历自身属性
• Array, String, Map, Set, arguments, NodeList 友好