ES6

---

ES6面试、复习干货知识点汇总

《ECMAScript6标准入门》第三版--读书笔记

{

const MAX = 10;

let a = 1;

var b = 2;

}

a; b;

ES5只有两种申明变量的方式var, function, ES6增加了四种方式：let, const, class, import

解构赋值

let [foo, [[bar], bat]] = [1, [[2], 2]];

默认赋值
[x, y = 'b'] = ['a'];

对象赋值
var { foo, bar } = { foo: 'aaa', bar: 'bbb' };

函数参数的赋值
[[1,2],[3,4]].map(function([a,b]) {
    return a+b;
});

变量解构赋值用途
交换变量的值 [x, y] = [y, x];
提取JSON数据
var jsonData = { id: 42, status: "OK", data: [867, 5309] }; 
let { id, status, data: number } = jsonData; 
console.log(id, status, number);// 42, "OK", [867, 5309]

字符串扩展

var s = 'Hello world!';
s.startsWith('world', 6); // true
s.endsWith('Hello', 5); // true
s.includes('Hello', 6); // false

'hello'.repeat(2) // "hellohello"

padStart 用于头部补全， padEnd 用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'


模板字符串（template string）是增强版的字符串，用反引号标识。

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

Number

Number.isFinite()
Number.isNaN()
Number.parseInt(), Number.parseFloat()
Number.isSafeInteger()

Math对象的扩展
Math.trunc 方法用于去除一个数的小数部分，返回整数部分。
Math.sign 方法用来判断一个数到底是正数、负数、还是零。
Math.cbrt 方法用于计算一个数的立方根。
Math.fround方法返回一个数的单精度浮点数形式。
Math.hypot 方法返回所有参数的平方和的平方根。

函数

rest参数：不定参数    
function foo(...values) {}

箭头函数
var f=v => v

绑定this
foo::bar
var method = ::Object.foo;

数组

...将一个数组转化为逗号分隔的参数序列


Array.from()
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
    console.log(p);
});


Array.of()
Array.of 方法用于将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]


Array.find()
Array.findIndex()
    [1,4,-5,10].find((n) => n < 0); // -5

Array.fill()
Array.entries()
Array.keys()
Array.values()
Array.includes()

Object:

    var target = { a: 1 };
    var source1= { b: 2 };
    var source2= { c: 3 };
    Object.assidn(target, source1, source2);
    target      // {a:1, b:2, c: 3)

Symbol

从根本上防止属性名冲突
    var mySym = Symbol();
    var a = {};
    a.mySym = 'hello';
    a['mySym']      //;hello'
    a[mySym]        //undefined

    Symbol.for('bar') === Symbol.for('bar')     //true
    Symbol('var') === Symbol('bar')             //false
    var s1 = Symbol.for('foo');
    Symbol.keyFor(s1);                          //true
    var s2 = Symbol('foo');
    Symbol.keyFor(s2);                          //undefined

Set和Map

    Set成员值是唯一的
    Map的键值可以是字串，可以是其它值，包括对象

    var s = new Set();
    var s1 = new set("bar", "circle");
    s1.add(3.14);

    [2,3,5,3,2,4].map(x => s.add(x));
    for (let i of s) {
        console.log(i);
    }
    //2,3,5,4

    Array.from(new Set(1,2,3,4))    //转化为数组
    
    var map = new Map();
    map.set("key", "value");
    map.get("key");
    map.has("key");
    map.delete("key");
    map.clear();

    for (let [key, value] of map) {
    }
    for (let [key, value] of map.entries()) {
    }
    for (let key of map.keys()) {
    }
    for (let value of map.values()) {
    }
    
    map.forEach((value, key) => {
    });

Proxy

外部访问该对象，进行过滤和改写
var proxy = new Proxy({}, {
    get: function(target, property) {
        return 35;
    }
});
proxy.time;     //35
proxy.name;     //35
proxy.title;    //35

Reflect

从Reflect对象能查询到语言内部的方法

Promise

将异步操作以同步操作的流程表达出来 ，避免了层层嵌套的回调函数
    var promise = new Promise(function(resolve, reject) {
        // ... some code
        if (/* 异步操作成功 */){
            resolve(value);
        } else {
            reject(error);
        }
    });
Promise.prototype.then()
Promise.prototype.catch()
Promise.all();
Promise.race()

async函数

    function timeout(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }

    async function asyncPrint(value, ms) {
      await timeout(ms);
      console.log(value);
    }

    asyncPrint('hello world', 50);


    async function f() {
      try {
        await new Promise(function (resolve, reject) {
          throw new Error('出错了');
        });
      } catch(e) {
      }
      return await('hello world');
    }
    f()
    .then(v => console.log(v))
    .catch(e => console.log(e))
    // Error：出错了

    //多个异步触发
    let [foo, bar] = await Promise.all([getFoo(), getBar()]);

class

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static getPI() {            //静态函数,函数中的this指向类，而不是实例
        return 3.1415926;
    }
    toString() {
        return this.x + ',' + this.y;
    }
}

Point.getPI();

//向类中添加方法
Object.assign(Point.prototype, {
    toValue() {}
});

new.target属性
构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined

class ColorPoint extends Point {
    constructor() {
        super();
        this.x = 2;
    }
    toString() {
        console.log(x,y);
        super.toString();
    }
}

在静态方法之中，这时super将指向父类, 而不是实例

静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
函数的参数如果是对象的成员，优先使用解构赋值。
单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
js const a = { k1: v1, k2: v2 }; const b = { k1: v1, k2: v2, };
使用扩展运算符（...）拷贝数组。const itemsCopy = [...items];

立即执行函数可以写成箭头函数的形式。
javascript (() => { console.log('Welcome to the Internet.'); })();

ES6样例