class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`hi, my name is ${this.name}`);
  }
  static create(name) {
    return new Person(name);
  }
}
const tom = Person.create("tom");
tom.say();

2. 繼承

class Student extends Person {
  constructor(name, number) {
    super(name, number);
    this.number = number;
  }
  hello() {
    super.say();
    console.log(`my school number is ${this.number}`);
  }
}

const s = new Student("jack", " 100");
s.hello();

10. Set Map

10.1 Set

我們通過Array.from()或者展開運(yùn)算符可以將Set轉(zhuǎn)化為數(shù)組

const arr = [1, 2, 3, 4, 5]
const result = Array.from(new Set(arr))
// or
const result = [...new Set(arr)]

10.2 Map

與對象類似击你，是一個(gè)鍵值對集合玉组，目的是為了解決對象只能用字符串作鍵值
在es5中谎柄，普通對象如果鍵不是字符串，那么鍵就等于輸入鍵的toString()結(jié)果作為鍵惯雳，es6開始對象支持用字符串或Symbol來作為鍵值朝巫。而在Map中，任意類型數(shù)據(jù)都可作為鍵

// 普通對象
const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{ a: 1 }] = 'value'
// 如果鍵不是字符串石景，那么鍵就等于輸入鍵的toString()結(jié)果作為鍵
console.log(Object.keys(obj)) // ['true', '123', '[object Object]']

// Map 任意類型數(shù)據(jù)都可作為鍵
const m = new Map();
const tom = { name: "tom" };
m.set(tom, 90);
console.log(m);
console.log(m.get(tom));

11. Symbol

es6開始對象支持用字符串或Symbol來作為鍵值劈猿，symbol最主要的作用就是為對象添加獨(dú)一無二的屬性名

Symbol()===Symbol // false
// Symbol 描述符
Symbol('foo')
Symbol('bar')

11.1 利用Symbol來實(shí)現(xiàn)私有成員

// a.js ======================================
const name = Symbol();
const person = {
  [name]: "zce",
  say() {},
};

// b.js =======================================
// Symbol是唯一的，外面的Symbol與定義時(shí)的不一樣
// person[Symbol()]
person.say();

11.2 如何獲取Symbol

1. 通過Symbol.for()傳入標(biāo)識符獲取

const s1 = Symbol.for('foo') // 傳入標(biāo)識符
const s2 = Symbol.for('foo')
console.log(s1 === s2) // true
Symbol('foo') === Symbol('foo') // false

注意潮孽，傳入的標(biāo)識符應(yīng)該是字符串揪荣，如果不是字符串，會默認(rèn)轉(zhuǎn)為字符串往史，所以以下代碼是相等的

Symbol.for(true) === Symbol.for('true')

11.3 擴(kuò)展方法

const obj0 = {};
console.log(obj0.toString()); // [object Object]

const obj1 = {
  [Symbol.toStringTag]: "Xobject",
};
console.log(obj1.toString()); // [object Xobject]

11.4 獲取Symbol鍵值

普通的for in仗颈、Object.keys()、JSON.stringify()是獲取不到Symbol的鍵值的椎例，我們需要通過Object.getOwnPropertySymbols獲取挨决，所以Symbol特別適合設(shè)置對象私有成員

const obj = {
  [Symbol()]: "symbol value",
  foo: "normal value",
};

for (var key in obj) {
  console.log(key); // foo
}
console.log(Object.keys(obj)); //  'foo' ]
console.log(JSON.stringify(obj)); // {"foo":"normal value"}
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol() ]

12. for of

for of可以通過break跳出循環(huán)，在代碼中建議使用for of订歪。但是我們可以發(fā)現(xiàn)凰棉，for of不支持對象，因?yàn)閷ο鬀]有實(shí)現(xiàn)Iterable接口陌粹，我們在Iterable會詳細(xì)講解。
實(shí)現(xiàn)Iterable接口就是for..of的前提,也就是說福压，只要該種數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)了(可迭代接口)Iterable,那么就可以使用for of

const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
  console.log(item); // 1,2,3,4,5
  if (item > 100) {
    break;
  }
}

const m = new Map();
m.set("foo", "123");
m.set("bar", " 345");
for (const [key, value] of m) {
  console.log(key, value);
}

13. Iterable(迭代器)

13.1 每一個(gè)可迭代數(shù)據(jù)原型上都有一個(gè)Symbol.iterator方法

const set = new Set(["foo", "bar", "baz"]);
const iterator = set[Symbol.iterator]();
console.log(iterator.next()); // { value: 'foo', done: false }
console.log(iterator.next()); // { value: 'bar', done: false }
console.log(iterator.next()); // { value: 'baz ', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
console.log(iterator.next()); // { value: undefined, done: true }

13.2 給對象添加迭代器

給對象添加迭代器以后掏秩，就可以使用for of循環(huán)了

const obj = {
    store: ['foo', 'bar', 'baz'],
    [Symbol.iterator]: function () {
        let index = 0
        const _self = this
        return {
            next: function () {
                const result = {
                    value: _self.store[index],
                    done: index >= _self.store.length
                }
                index++
                return result
            }
        }
    }
}

13.3 迭代器應(yīng)用

遍歷結(jié)構(gòu)

const todos = {
    life: ['吃皈', '睡覺', '打豆豆'],
    learn: ['語文', '數(shù)學(xué)', '外語'],
    work: ['喝茶'],
    // 普通模式，通過each模式
    each: function (callback) {
        const all = [].concat(this.life, this.learn, this.work)
        for (const item of all) {
            callback(item)
        }
    },
    // 迭代器模式
    [Symbol.iterator]: function () {
        const all = [...this.life, ...this.learn, ...this.work]
        let index = 0
        return {
            next: function () {
                return {
                    value: all[index],
                    done: index++ >= all.length
                }
            }
        }
    }
}

// 使用each
todos.each(function (item) {
    console.log(item)
})

// 使用迭代器
for(const item of todos) {
  console.log(item)
}

14. Generator(生成器)

解決異步嵌套

14.1 應(yīng)用

1. 使用Generator實(shí)現(xiàn)迭代器

// 以上一節(jié)例子為例
[Symbol.iterator]: function* () {
        const all = [...this.life, ...this.learn, ...this.work]
        // let index = 0
        // return {
        //     next: function () {
        //         return {
        //             value: all[index],
        //             done: index++ >= all.length
        //         }
        //     }
        // }
        for (const item of all) {
            yield item
        }
    }

2. 發(fā)號器

function* createIdMaker() {
    let id = 1
    while (true) {
        yield id++
    }

}

const idMaker = createIdMaker()
console.log(idMaker.next().value)
console.log(idMaker.next().value)
console.log(idMaker.next().value)
console.log(idMaker.next().value)

15. es2016

15.1 includes

indexof不能查找數(shù)組中的NaN(掘金遍歷數(shù)組的文章)

15.2 指數(shù)運(yùn)算

計(jì)算2的10次方

// es5: 
Math.pow(2, 10)
// es7: 
2 ** 10

16. es2017

16.1 對象擴(kuò)展

Object.values() // 對象值的數(shù)組
Objece.entries // 對象鍵值對數(shù)組

1. 通過Objece.entries 可以使對象用for of 循環(huán)

const obj = {
    foo: 'foo',
    bar: 'bar'
}
for (const [item, index] of Object.entries(obj)) { 
    console.log(index, item)
}

2. 將對象轉(zhuǎn)為Map形式對象

new Map(Object.entries(obj))

3. Object.getOwnPropertyDescriptors
   以下問題荆姆，當(dāng)拷貝一個(gè)對象時(shí)蒙幻，對象中的getter屬性被當(dāng)作了普通屬性，所以修改p2中firstName的值胆筒，fullName沒有變化邮破，這時(shí)我們可以通過Object.getOwnPropertyDescriptors解決

const p1 = {
    firstName: 'Lei',
    lastName: 'Wang',
    get fullName() {
        return this.firstName + ' ' + this.lastName
    }
}
console.log(p1.fullName) // Lei Wang

const p2 = Object.assign({}, p1)
p2.firstName = 'Zhao'
console.log(p2.fullName) // Lei wang

const descriptors = Object.getOwnPropertyDescriptors(p1)
const p2 = Object.defineProperties({}, descriptors)
p2.firstName = 'Zhao'
console.log(p2.fullName) // zhao wang

16.2 padStart、padEnd