ES6常用知识点总结(下)

1
2
3
4
5
6
7
8
9
10
11
    function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    var hw = helloWorldGenerator();
    hw.next()  // { value: 'hello', done: false }
    hw.next()// { value: 'world', done: false }
    hw.next()// { value: 'ending', done: true }
    hw.next() // { value: undefined, done: true }
复制代码

1
2
3
4
5
6
7
    function* demo() {
      console.log('Hello' + yield); // SyntaxError
      console.log('Hello' + yield 123); // SyntaxError
      console.log('Hello' + (yield)); // OK
      console.log('Hello' + (yield 123)); // OK
    }
复制代码

1
2
3
4
5
    function* demo() {
      foo(yield 'a', yield 'b'); // OK
      let input = yield; // OK
    }
复制代码

1
2
3
4
5
6
7
8
    var myIterable = {};
    myIterable[Symbol.iterator] = function* () {
      yield 1;
      yield 2;
      yield 3;
    };
    [...myIterable] // [1, 2, 3]
复制代码

1
2
3
4
5
6
    function* gen(){
      // some code
    }
    var g = gen();
    g[Symbol.iterator]() === g   // true
复制代码

1
2
3
4
5
6
7
8
9
10
11
    function* f() {
      for(var i = 0; true; i++) {
        var reset = yield i;
        if(reset) { i = -1; }
      }
    }
    var g = f();
    console.log(g.next()) // { value: 0, done: false }
    console.log (g.next()) // { value: 1, done: false }
    console.log (.next(true) )// { value: 0, done: false } 执行i=-1，然后i++变成了0
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function* foo(x) {
      var y = 2 * (yield (x + 1));
      var z = yield (y / 3);
      return (x + y + z);
    }
    var a = foo(5);
    console.log(a.next()) // Object{value:6, done:false}
    console.log(a.next()) // Object{value:NaN, done:false}，此时的y等于undefined
    console.log(a.next()) // Object{value:NaN, done:true}
    var b = foo(5);
    console.log(b.next()) // { value:6, done:false }
    console.log(b.next(12)) // { value:8, done:false } 此时的y=2*12 
    console.log(b.next(13)) // { value:42, done:true } 5+24+13
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    //例子1
    function* dataConsumer() {
      console.log('Started');
      console.log(`1. ${yield}`);
      console.log(`2. ${yield}`);
      return 'result';
    }
    let genObj = dataConsumer();
    genObj.next();// Started。执行了 console.log('Started');和`1. ${yield}`这两句
    genObj.next('a') // 1. a。执行了 console.log(`1. ${yield}`);和`2. ${yield}`这两句
    console.log(genObj.next('b') )   //2.b    {value: "result", done: true}。执行了console.log(`2. ${yield}`);和return 'result';这两句
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    //例子2
    function* dataConsumer() {
      console.log('Started');
      yield 1;
      yield;
      var a=yield;
      console.log("1. "+a);
      var b=yield;
      console.log("2. "+b);
      return 'result';
    }
    let genObj = dataConsumer();
    console.log( genObj.next())
    console.log(genObj.next());
    console.log(genObj.next('a'))
    console.log( genObj.next('b'));
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    function* foo() {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
      return 6;
    }
    for (let v of foo()) {
      console.log(v);
    }
    // 1 2 3 4 5
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    function* numbers () {
      yield 1
      yield 2
      return 3
      yield 4
    }
    // 扩展运算符
    [...numbers()] // [1, 2]
    // Array.from 方法
    Array.from(numbers()) // [1, 2]
    // 解构赋值
    let [x, y] = numbers();
    x // 1
    y // 2
    // for...of 循环
    for (let n of numbers()) {
      console.log(n)
    }
    // 1,2
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    var g = function* () {
      try {
        yield;
      } catch (e) {
        console.log('内部捕获', e);
      }
    };
    var i = g();
    i.next();
    try {
      i.throw('a');//被内部捕获，所以下面的代码还能正常运行
      i.throw('b');//被外部捕获
    } catch (e) {
      console.log('外部捕获', e);
    }
    // 内部捕获 a
    // 外部捕获 b
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var g = function* () {
      while (true) {
        yield;
        console.log('内部捕获', e);
      }
    };
    var i = g();
    i.next();
    try {
      i.throw('a');//被外部捕获，所以下面的代码不运行了
      i.throw('b');
    } catch (e) {
      console.log('外部捕获', e);
    }
    // 外部捕获 a
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    function* gen() {
      try {
        yield 1;
      } catch (e) {
        console.log('内部捕获');
      }
    }
    
    var g = gen();
    g.throw(1);
    // Uncaught 1
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    var gen = function* gen(){
      try {
        yield console.log('a');
      } catch (e) {
        // ...
      }
      yield console.log('b');
      yield console.log('c');
    }
    var g = gen();
    g.next() // a
    g.throw() // b
    g.next() // c
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var gen = function* gen(){
      yield console.log('hello');
      yield console.log('world');
    }
    
    var g = gen();
    g.next();
    
    try {
      throw new Error();
    } catch (e) {
      g.next();
    }
    // hello
    // world
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    function* g() {
      yield 1;
      console.log('throwing an exception');
      throw new Error('generator broke!');//中断函数的运行
      yield 2;
      yield 3;
    }
    
    function log(generator) {
      var v;
      console.log('starting generator');
      try {
        v = generator.next();
        console.log('第一次运行next方法', v);
      } catch (err) {
        console.log('捕捉错误', v);
      }
      try {
        v = generator.next();
        console.log('第二次运行next方法', v);//因为上面代码调用时报错了，所以不会执行该语句
      } catch (err) {
        console.log('捕捉错误', v);
      }
      try {
        v = generator.next();
        console.log('第三次运行next方法', v);
      } catch (err) {
        console.log('捕捉错误', v);
      }
      console.log('caller done');
    }
    log(g());
    // starting generator
    // 第一次运行next方法 { value: 1, done: false }
    // throwing an exception
    // 捕捉错误 { value: 1, done: false }
    // 第三次运行next方法 { value: undefined, done: true }
    // caller done
复制代码

1
2
3
4
5
6
7
8
9
10
    function* gen() {
      yield 1;
      yield 2;
      yield 3;
    }
    var g = gen();
    g.next()        // { value: 1, done: false }
    g.return('foo') // { value: "foo", done: true } //
    g.next()        // { value: undefined, done: true }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function* numbers () {
      yield 1;
      try {
        yield 2;
        yield 3;
      } finally {
        yield 4;
        yield 5;
      }
      yield 6;
    }
    var g = numbers();
    g.next() // { value: 1, done: false }
    g.next() // { value: 2, done: false }
    g.return(7) // { value: 4, done: false }
    g.next() // { value: 5, done: false }
    g.next() // { value: 7, done: true }
    g.next() // { value: undefined, done: true }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    function* foo() {
        yield 'a';
        yield 'b';
    }
    function* bar() {
      yield 'x';
      yield* foo(); //
      yield 'y';
    }
    // 等同于
    function* bar() {
      yield 'x';
      yield 'a';
      yield 'b';
      yield 'y';
    }
    // 等同于
    function* bar() {
      yield 'x';
      for (let v of foo()) {
        yield v;
      }
      yield 'y';
    }
    for (let v of bar()){
      console.log(v);
    }
    // "x"   // "a"   // "b"   // "y"
    function* inner() {
        yield 'hello!';
    	return "test"
    }
    function* outer1() {
      yield 'open';
      yield inner();
      yield 'close';
    }
    var gen = outer1()
    console.log(gen.next().value) // "open"
    var test=gen.next().value // 返回一个遍历器对象
    console.log(test.next().value) //"hello"
    console.log(test.next().value)// "test"
    console.log(gen.next().value) // "close"
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function* concat(iter1, iter2) {
      yield* iter1;
      yield* iter2;
    }
    // 等同于
    function* concat(iter1, iter2) {
      for (var value of iter1) {
        yield value;
      }
      for (var value of iter2) {
        yield value;
      }
    }
复制代码

1
2
3
4
5
    function* gen(){
      yield* ["a", "b", "c"];
    }
    console.log(gen().next()) // { value:"a", done:false }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    function* foo() {
      yield 2;
      yield 3;
      return "foo";
    }
    
    function* bar() {
      yield 1;
      var v = yield* foo();
      console.log("v: " + v);
      yield 4;
    }
    var it = bar();
    it.next()
    // {value: 1, done: false}
    it.next()
    // {value: 2, done: false}
    it.next()
    // {value: 3, done: false}
    it.next();
    // "v: foo"
    // {value: 4, done: false}
    it.next()
    // {value: undefined, done: true}
    
    function* iterTree(tree) {
      if (Array.isArray(tree)) {
        for(let i=0; i < tree.length; i++) {
          yield* iterTree(tree[i]);
        }
      } else {
        yield tree;
      }
    }
    const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
    for(let x of iterTree(tree)) {
      console.log(x);
    }
    // a  // b   // c   // d   // e
复制代码

1
2
3
4
5
6
    let obj = {
      * myGeneratorMethod() {
        •••
      }
    };
复制代码

1
2
3
4
5
6
7
8
    function* g() {}
    g.prototype.hello = function () {
      return 'hi!';
    };
    let obj = g();
    obj instanceof g // true
    obj.hello() // 'hi!'
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function* F() {
      this.a = 1;
      yield this.b = 2;
      yield this.c = 3;
    }
    var obj = {};
    var f = F.call(obj);//调动F()并且把obj作为this传进去，这样给obj添加a、b、c属性
    console.log(f.next());  // Object {value: 2, done: false}
    console.log(f.next());  // Object {value: 3, done: false}
    console.log(f.next());  // Object {value: undefined, done: true}
    console.log(obj.a) // 1
    console.log(obj.b) // 2
    console.log(obj.c) // 3
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    function* gen() {
      this.a = 1;
      yield this.b = 2;
      yield this.c = 3;
    }
    function F() {
      return gen.call(gen.prototype);
    }
    var f = new F();
    f.next();  // Object {value: 2, done: false}
    f.next();  // Object {value: 3, done: false}
    f.next();  // Object {value: undefined, done: true}
    f.a // 1
    f.b // 2
    f.c // 3
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    function makeAjaxCall(url,callBack){
        var xhr;
        if (window.XMLHttpRequest)
        {
            //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xhr=new XMLHttpRequest();
        }else{
            // IE6, IE5 浏览器执行代码
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open("GET",makeAjaxCall,true);//确保浏览器兼容性。
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status==200)
            {   
               if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                  callBack(xhr.responseText;); 
               } 
            }
        }
        xmlhttp.send();
    }

    function* main() {
        var result = yield request("https://juejin.im/editor/posts/5cb209e36fb9a068b52fb360");
        var resp = JSON.parse(result);
        console.log(resp.value);
    }
    function request(url) {
          makeAjaxCall(url, function(response){
            it.next(response);//将response作为上一次yield的返回值
          });
    }
    var it = main();
    it.next();
复制代码

1
2
3
4
5
6
7
8
9
10
11
    function* numbers() {
      let file = new FileReader("numbers.txt");
      try {
        while(!file.eof) {
          yield parseInt(file.readLine(), 10);
        }
      } finally {
        file.close();
      }
    }
复制代码

1
2
3
4
5
6
7
8
9
10
    step1(function (value1) {
      step2(value1, function(value2) {
        step3(value2, function(value3) {
          step4(value3, function(value4) {
            // Do something with value4
          });
        });
      });
    });
复制代码

1
2
3
4
5
6
7
8
9
10
11
    Promise.resolve(step1)
      .then(step2)
      .then(step3)
      .then(step4)
      .then(function (value4) {
        // Do something with value4
      }, function (error) {
        // Handle any error from step1 through step4
      })
      .done();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    function* longRunningTask(value1) {
      try {
        var value2 = yield step1(value1);
        var value3 = yield step2(value2);
        var value4 = yield step3(value3);
        var value5 = yield step4(value4);
        // Do something with value4
      } catch (e) {
        // Handle any error from step1 through step4
      }
    }
    scheduler(longRunningTask(initialValue));
    function scheduler(task) {
      var taskObj = task.next(task.value);
      // 如果Generator函数未结束，就继续调用
      if (!taskObj.done) {
        task.value = taskObj.value
        scheduler(task);
      }
    }
    function step1(value){
    	return value*2;
    }
    function step2(value){
    	return value*2;
    }
    function step3(value){
    	return value*2;
    }
    function step4(value){
    	return value*2;
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function* iterEntries(obj) {
      let keys = Object.keys(obj);
      for (let i=0; i < keys.length; i++) {
        let key = keys[i];
        yield [key, obj[key]];
      }
    }
    let myObj = { foo: 3, bar: 7 };
    for (let [key, value] of iterEntries(myObj)) {
      console.log(key, value);
    }
    // foo 3
    // bar 7
复制代码

1
2
3
4
5
6
7
8
    function* doStuff() {
      yield fs.readFile.bind(null, 'hello.txt');
      yield fs.readFile.bind(null, 'world.txt');
      yield fs.readFile.bind(null, 'and-such.txt');
    }
    for (task of doStuff()) {}
      // task是一个函数，可以像回调函数那样使用它
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    var fetch = require('node-fetch');
    function* gen(){
      var url = 'https://api.github.com/users/github';
      var result = yield fetch(url);
      console.log(result.bio);
    }
    var g = gen();
    var result = g.next();
    result.value.then(function(data){
      return data.json();
    }).then(function(data){
      g.next(data);
    });
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    function f(m) {
      return m * 2;
    }
    f(x + 5);
    // 等同于
    var thunk = function () {
      return x + 5;
    };
    function f(thunk) {
      return thunk() * 2;
    }
    f(thunk)
    // 正常版本的readFile（多参数版本）
    fs.readFile(fileName, callback);
    // Thunk版本的readFile（单参数版本）
    var Thunk = function (fileName) {
      return function (callback) {
        return fs.readFile(fileName, callback);
      };
    };
    var readFileThunk = Thunk(fileName);
    readFileThunk(callback);
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var fs = require('fs');
    var readFile = function (fileName){
      return new Promise(function (resolve, reject){
        fs.readFile(fileName, function(error, data){
          if (error) return reject(error);
          resolve(data);
        });
      });
    };
    var gen = function* (){
      var f1 = yield readFile('/etc/fstab');
      var f2 = yield readFile('/etc/shells');
      console.log(f1.toString());
      console.log(f2.toString());
    };
复制代码

1
2
3
4
5
6
7
    var g = gen();
    g.next().value.then(function(data){
      g.next(data).value.then(function(data){
        g.next(data);
      });
    });
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    function run(gen){
      var g = gen();
      function next(data){
        var result = g.next(data);
        if (result.done) return result.value;
        result.value.then(function(data){
          next(data);
        });
      }
      next();
    }
    run(gen);
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    async function f() {
      return 'hello world';
    }
    f().then(v => console.log(v))
    // "hello world"
    async function f() {
      throw new Error('出错了');
    }
    f().then(
      v => console.log(v),
      e => console.log(e)
    )
复制代码

1
2
3
4
5
6
7
8
    async function f() {
      // 等同于
      // return 123;
      return await 123;
    }
    f().then(v => console.log(v))
    // 123
复制代码

1
2
3
4
5
6
7
8
9
10
    async function f() {
      await new Promise(function (resolve, reject) {
        throw new Error('出错了');
      });
    }
    f()
    .then(v => console.log(v))
    .catch(e => console.log(e))
    // Error：出错了
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    async function myFunction() {
      try {
        await somethingThatReturnsAPromise();
      } catch (err) {
        console.log(err);
      }
    }
    // 另一种写法
    async function myFunction() {
      await somethingThatReturnsAPromise()
      .catch(function (err) {
        console.log(err);
      });
    }
复制代码

1
2
3
4
5
6
7
8
    // 写法一
    let [foo, bar] = await Promise.all([getFoo(), getBar()]);
    // 写法二
    let fooPromise = getFoo();
    let barPromise = getBar();
    let foo = await fooPromise;//直接返回
    let bar = await barPromise;
复制代码

1
2
3
4
5
6
7
8
    async function dbFuc(db) {
      let docs = [{}, {}, {}];
      // 报错
      docs.forEach(function (doc) {
        await db.post(doc);
      });
    }
复制代码

1
2
3
4
5
6
7
    async function dbFuc(db) {
      let docs = [{}, {}, {}];
      let promises = docs.map((doc) => db.post(doc));
      let results = await Promise.all(promises);
      console.log(results);
    }
复制代码

1
2
3
4
    const a = () => {
      b().then(() => c());
    };
复制代码

1
2
3
4
5
    const a = async () => {
      await b();
      c();
    };
复制代码

1
2
3
4
5
6
7
    async function logInOrder(urls) {
      for (const url of urls) {
        const response = await fetch(url);
        console.log(await response.text());
      }
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    async function logInOrder(urls) {
      // 并发读取远程URL
      const textPromises = urls.map(async url => {
        const response = await fetch(url);
        return response.text();
      });
      // 按次序输出
      for (const textPromise of textPromises) {
        console.log(await textPromise);
      }
    }
复制代码

1
2
3
4
5
6
    asyncIterator
      .next()
      .then(
        ({ value, done }) => /* ... */
      );
复制代码

1
2
3
4
5
6
7
    async function* gen() {
      yield 'hello';
    }
    const genObj = gen();
    genObj.next().then(x => console.log(x));
    // { value: 'hello', done: false }
复制代码

1
2
    Point === Point.prototype.constructor // true
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    p1.constructor === Point.prototype.constructor // true

    function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    Point.prototype.toString = function () {
      return '(' + this.x + ', ' + this.y + ')';
    };
    var p = new Point(1, 2);
    //改成类的写法
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    typeof Point // "function"
    Point === Point.prototype.constructor // true 类本身就指向构造函数。
    var p1=new Point(2,4);
    p1.constructor === Point.prototype.constructor // true
    
    Point.prototype.constructor === Point // true
    Object.keys(Point.prototype)// []
复制代码

1
2
3
4
5
6
7
8
    class Foo {
      constructor() {
        return Object.create(null);
      }
    }
    new Foo() instanceof Foo
    // false
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    //定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    var point = new Point(2, 3);
    point.toString() // (2, 3)
    point.hasOwnProperty('x') // true
    point.hasOwnProperty('y') // true
    point.hasOwnProperty('toString') // false
    point.__proto__.hasOwnProperty('toString') // true
    //toString是原型上的方法，构造方法中的才是实例属性
复制代码

1
2
3
4
5
    var p1 = new Point(2,3);
    var p2 = new Point(3,2);
    p1.__proto__ === p2.__proto__
    //true
复制代码

1
2
3
4
5
6
7
8
9
10
    let methodName = 'getArea';
    class Square {
      constructor(length) {
        // ...
      }
      [methodName]() {
        // ...
      }
    }
复制代码

1
2
3
4
5
6
    const MyClass = class Me {
      getClassName() {
        return Me.name;
      }
    };
复制代码

1
2
3
4
    let inst = new MyClass();
    inst.getClassName() // Me
    Me.name // ReferenceError: Me is not defined
复制代码

1
2
    const MyClass = class { /* ... */ };
复制代码

1
2
3
4
5
6
7
8
9
10
    let person = new class {
      constructor(name) {
        this.name = name;
      }
      sayName() {
        console.log(this.name);
      }
    }('张三');
    person.sayName(); // "张三" 
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    class Foo {
      constructor(...args) {
        this.args = args;
      }
      * [Symbol.iterator]() {
        for (let arg of this.args) {
          yield arg;
        }
      }
    }
    for (let x of new Foo('hello', 'world')) {
      console.log(x); // hello，world
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    class Logger {
      printName(name = 'there') {
        this.print(`Hello ${name}`);
      }
      print(text) {
        console.log(text);
      }
    }
    const logger = new Logger();
    const { printName } = logger;
    printName(); // TypeError: Cannot read property 'print' of undefined 本来是实例的方法，但是此时printName()不是实例调用的，所以this指向不明，默认为undefined
复制代码

1
2
3
4
5
6
7
    class Logger {
      constructor() {
        this.printName = this.printName.bind(this);
      }
      // ...
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    class Foo {
      static bar() {
        this.baz();
      }
      static baz() {
        console.log('hello');
      }
      baz() {
        console.log('world');
      }
    }
    Foo.bar() // hello
复制代码

1
2
3
4
5
6
7
8
9
    class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    class Bar extends Foo {
    }
    Bar.classMethod() // 'hello'
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    class Bar extends Foo {
      static classMethod() {
        return super.classMethod() + ', too';
      }
    }
    Bar.classMethod() // "hello, too"
复制代码

1
2
3
4
5
6
7
8
9
10
11
    class IncreasingCounter {
      _count = 0;
      get value() {
        console.log('Getting the current value!');
        return this._count;
      }
      increment() {
        this._count++;
      }
    }
复制代码

1
2
3
4
5
6
7
    class MyClass {
      static myStaticProp = 42;
      constructor() {
        console.log(MyClass.myStaticProp); // 42
      }
    }
复制代码

1
2
3
4
5
6
7
8
9
10
    class Widget {
      foo (baz) {
        bar.call(this, baz);
      }
      // ...
    }
    function bar(baz) {
      return this.snaf = baz;
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    const bar = Symbol('bar');
    const snaf = Symbol('snaf');
    export default class myClass{
      // 公有方法
      foo(baz) {
        this[bar](baz);
      }
      // 私有方法
      [bar](baz) {
        return this[snaf] = baz;
      }
      // ...
    };
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    function Person(name) {
        if (new.target !== undefined) {
        this.name = name;
    } else {
            throw new Error('必须使用 new 命令生成实例');
        }
    }
    // 另一种写法
    function Person(name) {
        if (new.target === Person) {
            this.name = name;
        } else {
            throw new Error('必须使用 new 命令生成实例');
        }
    }
    var person = new Person('张三'); // 正确
    var notAPerson = Person.call(person, '张三');  // 报错 
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    class Rectangle {
    constructor(length, width) {
        console.log(new.target === Rectangle);
        // ...
      }
    }
    class Square extends Rectangle {
      constructor(length，width) {
        super(length, width);
      }
    }
    var c=new Rectangle(1,2);
    var obj = new Square(3); // 输出 false
复制代码

1
2
3
4
5
6
7
8
9
10
    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }
      toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    class Point { /* ... */ }
    class ColorPoint extends Point {
          constructor() {
          }
    }
    let cp = new ColorPoint(); // ReferenceError
    ————————————————————————————————————————————————————————————
    class ColorPoint extends Point {
    }
    // 等同于
    class ColorPoint extends Point {
      constructor(...args) {
        super(...args);
      }
    }
复制代码

1
2
    Object.getPrototypeOf(ColorPoint) === Point// true
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    class A {
      constructor() {
        console.log(new.target.name);//new.targe构造函数
      }
    }
    class B extends A {
      constructor() {
        super();
      }
    }
    new A() // A
    new B() // B
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    lass A {
      p() {
        return 2;
      }
    }
    class B extends A {
      constructor() {
        super();
        console.log(super.p()); // 2
      }
    }
    let b = new B();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    class A {
      constructor() {
        this.x = 1;
      }
      print() {
        console.log(this.x);
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
      }
      m() {
        super.print();
      }
    }
    let b = new B();
    b.m() // 2
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    class A {
      constructor() {
        this.x = 1;
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
        super.x = 3;//此时的super相当于this
        console.log(super.x); // undefined
        console.log(this.x); // 3
      }
    }
    let b = new B();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    class A {
      constructor() {
        this.x = 1;
      }
      static print() {
        console.log(this.x);
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
      }
      static m() {
        super.print();
      }
    }
    B.x = 3;
    B.m() // 3
复制代码

1
2
instance.__proto__===A.prototype//instance是A的实例
复制代码

1
2
3
4
5
6
7
8
9
    class A {
    }
    class B extends A {
    }
    console.log(B.__proto__ === A) // true,
    console.log(B.prototype.__proto__ === A.prototype )// true,
    // 等同于
    Object.create(A.prototype);
复制代码

1
2
3
4
5
6
    p2.__proto__.__proto__ === p1.__proto__ // true
    解析：
    p2.__proto__===p2的类.prototype；
    p2的类.prototype.__proto__===p2的类的父类的.prototype
    p1.__proto__===p2的类的父类的.prototype。
复制代码

1
2
3
4
5
    p2.__proto__.__proto__.printName = function () {
      console.log('Ha');
    };
    p1.printName() // "Ha"
复制代码

1
2
3
4
5
6
7
8
9
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    等同于下面这中写法
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export {firstName, lastName, year};
复制代码

1
2
3
4
5
6
7
8
    function v1() { ... }
    function v2() { ... }
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
复制代码

1
2
3
4
5
6
7
8
9
    // 报错
    export 1;
    // 报错
    var m = 1;
    export m;
    // 报错
    function f() {}
    export f;
复制代码

1
2
3
    export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);
复制代码

1
2
3
4
5
    function foo() {
      export default 'bar' // SyntaxError
    }
    foo()
复制代码

1
2
3
4
5
6
    import {a} from './xxx.js'
    a = {}; // Syntax Error : 'a' is read-only;
    但是，如果a是一个对象，改写a的属性是允许的。
    import {a} from './xxx.js'
    a.foo = 'hello'; // 合法操作
复制代码

1
2
3
    import {myMethod} from 'util';
    //util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    // 报错
    import { 'f' + 'oo' } from 'my_module';
    // 报错
    let module = 'my_module';
    import { foo } from module;
    // 报错
    if (x === 1) {
      import { foo } from 'module1';
    } else {
      import { foo } from 'module2';
    }
复制代码

1
2
3
4
    import { area, circumference } from './circle';
    console.log('圆面积：' + area(4));
    console.log('圆周长：' + circumference(14));
复制代码

1
2
3
4
    import * as circle from './circle';
    console.log('圆面积：' + circle.area(4));
    console.log('圆周长：' + circle.circumference(14));
复制代码

1
2
3
4
5
6
7
8
9
    // export-default.js
    export default function () {
      console.log('foo');
    }
    // import-default.js
    import customName from './export-default'; 
    //因为是默认输出的，所以这时import命令后面，不使用大括号。并且可以随意取名。
    customName(); // 'foo'
复制代码

1
2
3
4
5
    function foo() {
      console.log('foo');
    }
    export default foo;
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
    // modules.js
    function add(x, y) {
      return x * y;
    }
    export {add as default};
    // 等同于
    // export default add;
    // app.js
    import { default as foo } from 'modules';
    // 等同于
    // import foo from 'modules';
复制代码

1
2
3
4
5
    // 正确
    export default 42;
    // 报错
    export 42;
复制代码

1
2
    import _, { each, forEach } from 'lodash';
复制代码

1
2
3
4
5
6
    // MyClass.js
    export default class { ... }
    // main.js
    import MyClass from 'MyClass';
    let o = new MyClass();
复制代码

1
2
3
4
5
    export { foo, bar } from 'my_module';
    // 可以简单理解为
    import { foo, bar } from 'my_module';
    export { foo, bar };
复制代码

1
2
    export { default } from 'foo';
复制代码

1
2
3
4
5
    export { es6 as default } from './someModule';
    // 等同于
    import { es6 } from './someModule';
    export default es6;
复制代码

1
2
    export { default as es6 } from './someModule';
复制代码

1
2
3
4
5
6
7
    // circleplus.js
    export * from 'circle';
    export var e = 2.71828182846;
    export default function(x) {
      return Math.exp(x);
    }
复制代码

1
2
3
4
5
6
    // main.js
    import * as math from 'circleplus';//整体加载的写法
    import exp from 'circleplus';
    console.log(exp(math.e));
    import exp表示，将circleplus模块的默认方法加载为exp方法。
复制代码

1
2
3
4
5
    import('./myModule.js')
    .then(({export1, export2}) => {
      // ...•
    });
复制代码

1
2
3
4
5
    import('./myModule.js')
    .then(myModule => {
      console.log(myModule.default);
    });
复制代码

1
2
3
4
5
    import('./myModule.js')
    .then(({default: theDefault}) => {
      console.log(theDefault);
    });
复制代码

1
2
3
4
    <script type="module" src="./foo.js"></script>
    <!-- 等同于 -->
    <script type="module" src="./foo.js" defer></script>
复制代码

1
2
    const isNotModuleScript = this !== undefined;
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      counter: counter,
      incCounter: incCounter,
    };
    // main.js
    var mod = require('./lib');
    console.log(mod.counter);  // 3
    mod.incCounter();
    console.log(mod.counter); // 3
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      get counter() {
        return counter
      },  
      incCounter: incCounter,
    };
    // main.js
    var mod = require('./lib');
    console.log(mod.counter);  // 3
    mod.incCounter();
    console.log(mod.counter); // 4
复制代码

1
2
3
4
5
6
7
    // lib.js
    export let obj = {};
    // main.js
    import { obj } from './lib';
    obj.prop = 123; // OK
    obj = {}; // TypeError
复制代码

1
2
3
4
5
6
7
8
9
10
11
    // a.js
    module.exports = {
      foo: 'hello',
      bar: 'world'
    };
    // 等同于
    export default {
      foo: 'hello',
      bar: 'world'
    };
复制代码

1
2
3
    // 不正确
    import { readFile } from 'fs';
复制代码

1
2
3
4
5
6
7
    // 正确的写法一
    import * as express from 'express';
    const app = express.default();
    // 正确的写法二
    import express from 'express';
    const app = express();
复制代码

1
2
3
4
5
6
7
    {
      id: '...',
      exports: { ... },
      loaded: true,
      ...
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    //a.js
    exports.done = false;
    var b = require('./b.js');
    console.log('在 a.js 之中，b.done = %j', b.done);
    exports.done = true;
    console.log('a.js 执行完毕');
    //b.js
    exports.done = false;
    var a = require('./a.js');
    console.log('在 b.js 之中，a.done = %j', a.done);
    exports.done = true;
    console.log('b.js 执行完毕');
    //main.js
    var a = require('./a.js');
    var b = require('./b.js');
    console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);
    $ node main.js
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    // a.mjs
    import {bar} from './b';
    console.log('a.mjs');
    console.log(bar);
    export let foo = 'foo';
    //function foo() { return 'foo' }
    //export {foo};
    // b.mjs
    import {foo} from './a';
    console.log('b.mjs');
    console.log(foo);
    export let bar = 'bar';
    //function bar() { return 'bar' }
    //export {bar};

    $ node --experimental-modules a.mjs
    b.mjs
    ReferenceError: foo is not defined
复制代码

1
2
3
4
5
6
7
    // bad
    const a = "foobar";
    const b = 'foo' + a + 'bar';
    // good
    const a = 'foobar';
    const b = `foo${a}bar`;
复制代码

1
2
3
4
5
6
7
    const arr = [1, 2, 3, 4];
    // bad
    const first = arr[0];
    const second = arr[1];
    // good
    const [first, second] = arr;
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    // bad
    function getFullName(user) {
      const firstName = user.firstName;
      const lastName = user.lastName;
    }
    // good
    function getFullName(obj) {
      const { firstName, lastName } = obj;
    }
    // best
    function getFullName({ firstName, lastName }) {
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    // bad
    const a = { k1: v1, k2: v2, };
    const b = {
      k1: v1,
      k2: v2
    };
    // good
    const a = { k1: v1, k2: v2 };
    const b = {
      k1: v1,
      k2: v2,
    };
复制代码

1
2
3
4
5
6
7
8
9
10
    // bad
    const a = {};
    a.x = 3;
    // if reshape unavoidable
    const a = {};
    Object.assign(a, { x: 3 });
    // good
    const a = { x: null };
    a.x = 3;
复制代码

1
2
3
4
    const itemsCopy = [...items];
    const foo = document.querySelectorAll('.foo');
    const nodes = Array.from(foo);
复制代码

1
2
3
4
5
6
7
8
9
10
    // bad
    function concatenateAll() {
      const args = Array.prototype.slice.call(arguments);
      return args.join('');
    }
    // good
    function concatenateAll(...args) {
      return args.join('');
    }
复制代码

1
2
3
4
5
6
7
8
9
    // bad
    function handleThings(opts) {
      opts = opts || {};
    }
    // good
    function handleThings(opts = {}) {
      // ...
    }
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    // bad
    function Queue(contents = []) {
      this._queue = [...contents];
    }
    Queue.prototype.pop = function() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
    // good
    class Queue {
      constructor(contents = []) {
        this._queue = [...contents];
      }
      pop() {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
      }
    }
复制代码

1
2
3
4
5
    // bad
    import * as myObject from './importModule';
    // good
    import myObject from './importModule';
复制代码

1
2
3
4
5
6
7
8
9
    function makeStyleGuide() {
    }
    export default makeStyleGuide;//函数
    const StyleGuide = {
      es6: {
      }
    };
    export default StyleGuide;//对象
复制代码