精读阮一峰 ECMAScript 6 入门 阶段5

202 阅读1分钟

花了大概半个月细读了阮一峰老师es6经典之作,重新梳理了一遍es6的知识点和用法。在学习路上不管是以前用到过的语法还是没用到的,基本上都读写了一边,像新出的proxy对象,异步generator函数,迭代器,symbol数据类型,类的用法等等,掌握好这些基础才能更好地学习vue,react等框架,编写出更加优质,精炼的代码。框架源码里也大量用到了这些新特性,学好es6也能更好地看懂源码,提升自身技术实力。

  for await (const x of ['a', 'b']) {
    console.log(x);
  }
})();

async function* gen() {
    yield 'hello';
  }
  const genObj = gen();
  genObj.next().then(x => console.log(x));

async function takeAsync(asyncIterable, count = Infinity) {
    const result = [];
    const iterator = asyncIterable[Symbol.asyncIterator]();
    while (result.length < count) {
      const {value, done} = await iterator.next();
      if (done) break;
      result.push(value);
    }
    return result;
  }

async function a(){
    return "5"
}

a().then(result=>{
    console.log(result);
})

async function* createAsyncIterable(syncIterable) {
    for (const elem of syncIterable) {
      yield elem;
    }
  }

async function* gen1() {
    yield 'a';
    yield 'b';
    return 2;
  }
  
  async function* gen2() {
    // result 最终会等于 2
    const result = yield* gen1();
  }

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

console.log(MyTestableClass.isTestable );// true

function testable(target) {
    target.prototype.isTestable = true;
  }
  
  @testable
  class MyTestableClass {}
  
  let obj = new MyTestableClass();
  obj.isTestable // true

class Person {
    @readonly
    name() { return `${this.first} ${this.last}` }
  }

class Math {
    @log
    add(a, b) {
      return a + b;
    }
  }
  
  function log(target, name, descriptor) {
    var oldValue = descriptor.value;
  
    descriptor.value = function() {
      console.log(`Calling ${name} with`, arguments);
      return oldValue.apply(this, arguments);
    };
  
    return descriptor;
  }
  
  const math = new Math();
  
  // passed parameters should get logged now
  math.add(2, 4);

function doSomething(name) {
    console.log('Hello, ' + name);
    console.log('this, ' + this);
  }
  
  function loggingDecorator(wrapped) {
    return function() {    
      console.log('Starting');
      const result = wrapped.apply(this, arguments);
      console.log('Finished');
      return result;
    }
  }
  
  const wrapped = loggingDecorator(doSomething);

  console.log(wrapped("huyong"));

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}