本文采用知识共享 署名-相同方式共享 4.0 国际 许可协议进行许可。
访问 https://creativecommons.org/licenses/by-sa/4.0/ 查看该许可协议。

ES6

1) 变量关键字

1.1) let

let实现了作用域

1.2) const

const实现了常量

2) 字符串扩展

2.1) includes()

是否include了传入str

2.2) startsWith()

传入str是否在头部

2.3) endsWith()

传入str是否在尾部

2.4) 模板标记

`构建字符串，中可任意换行

3) 解构表达式

3.1) Array解构[]

let arr = [1, 3, 5];
let [a,b] = arr;
console.log(a, b);

3.2) 对象解构{}

let obj = {name: "Wars", cat: "wcat"};
let {name, cat} = obj;
console.log(name, cat);
let {name:n, cat:c} = obj;
console.log(n, c);

4) 函数优化

4.1) 函数形参默认值

function func(a, b = 10) {
    return a + b;
}
console.log(func(1));

4.2) 箭头函数

// 等价于上
let func2 = (a, b=10) => a + b;
console.log(func2(1));
// 无形参
let func5 = () => console.log('func5')
// 单形参
let func3 = a => a + 10;
console.log(func3(1));
// 多行实现
let func4 = a => {
    return a + 10;
}
console.log(func4(1));

4.3) 对象嵌套函数简写以及箭头函数结合解构

let person = {
    name : "Wars",
    func1: function(){
        console.log(this.name, );
    },
    // 不能使用this
    func2 : () => console.log(person.name),
    // 忽略key
    func3(){
        console.log(this.name);
    }
}
// 结合解构
({name}) => {
    console.log(name);
}

5) Map和Reduce

5.1) Map

拿出Array中每个元素执行传入函数，将返回值产生一个新Array

    let arr3 = ['1', '2', '3'];
    let arr4 = arr3.map(s => parseInt(s));
    console.log(arr4);

5.2) Reduce

reduce(func(a, b), [initvar])
形参1接受一个函数，a为初始值，b为Array下一个参数，不定义
形参2时初始值为Array[0]，反之b为Array[0]，函数返回值充当
下一个a，遍历完所有元素reduce返回结果

    let arr5 = [1, 2, 3];
    let result0 = arr5.reduce((a, b) => a + b, 0);
    console.log(result0)

6) 扩展运算符

...array，将一个array转成一个参数序列

let func6 = (a, b) => a+b;
let arr7 = [1, 2];
console.log(func6(...arr7));
// 数组合并
let arr8 = [...arr7, 3];
console.log(arr8);
// 结合解构
let [ax, ...axs] = arr8;
console.log(ax, axs);
// 字符串转array
console.log([..."array"]);

7) Promise容器

可以理解为一个异步操作容器，并提供了回调用于外部访问

const promise = new Promise(function(resolve, reject) {
    // ..........
    if (true){
        resolve("OK");
    }else{
        reject("ERROR");
    }
});
// 获取成功回调
promise.then(function(value) {
    console.log(value)
}).catch(function(error) {
    console.log(error)
});

8) Set和Map

Map和Object的区别：map的key可以是任意类型，obj只能是str

// Set
let set = new Set();
set.add(1); // 添加
// 使用Array初始化
set = new Set([1, 2, 3, 4]);
set.clear();    // 晴空
set.has(1); // 是否存在
set.delete(1);  // 删除为1元素
set.forEach(func);// 遍历元素
set.size;   // 元素个数，非函数
// Map
let map = new Map([ // 构造函数接受嵌套数组
     ["k1", "v1"]
    ,["k2", "v2"]
]);
// 接收Set
map = new Map(
    new Set([
         ["k1", "v1"]
        ,["k3", "v3"]
    ])
);
map = map; // 接收map

map.clear();    // 清空
map.delete(key);// 删除
map.has(key);   // 是否存在
map.size;   // 元素个数，非函数
map.forEach((k,v) => {});    // 遍历
map.values();   // 获取Value迭代器
map.keys(); // 获取key迭代器
map.entries();  // 获取entries迭代器

9) Class

class Person{
    constructor(name, age = 18) {
        this.name = name;
        this.age = age;
    }

    getName(){
        return this.name;
    }

    static isAdult(age) {
        if(18 <= age) {
            return true;
        }
            return false;
    }
}

class User extends Person{
    constructor() {
        super("name", 16);
    }
}

10) Generator函数

异步编程解决方案
通过function* 定义，函数体使用yield定义内部状态

functoin* gen() {
    // before
    yield "before";
    // body
    yield "body";
    // after
    yield "after";
    return "done";
}

let g = gen();
console.log(g.next()); // value: before, done: false
console.log(g.next()); // value: body, done: false
console.log(g.next()); // value: after, done: false
console.log(g.next()); // value: done, done: true
console.log(g.next()); // value: undefined, done: true

11) Decorator修饰器

SE7引入Decorator是一个函数，用来修改类的行为

@T // 该类似于注解东西表示引用该类
class User{
    constructor() {
    }
}

function T(target) {
    target.name = "Wars";
}

11.1) 转码器

用于把高规范代码转成SE5代码

• Babel
• Traceur