es6几个关键词

最近项目中遇坑。对很多es6的关键词理解的也不是特别深。
下面根据代码深入的给大家讲解一下这些关键词.

async 和 await

async用于定义一个异步函数，该函数返回一个Promise,等同于return Promise.resolve(value);

await表示要“等待”异步操作的返回值,也可以用于同步返回值

重点

语义化
将异步操作用同步的写法来完成
返回值是 Promise对象

代码

async function wait(data) {
  return new Promise((resolve, reject) => {
    setTimeout(v => resolve(data), 1000);
  })
}
(async function() {
 
  let res = await wait('test');
  console.log(res);
})();
console.log('start')

顺序执行

使用Promise链
getUser().then(getArticle).then(success);

并发执行

Promise.all([getUser, getArticle]).then(success);

错误处理

AsyncStorage.getItem('uid')
  .then((uid) => {
      dothing('uid')
  })
  .catch(error => {
      console.log(error)
  });

* 和 yield 和 next

ES6 Generators 返回一个迭代器的函数. 那什么是迭代器函数呢.

他语法表现是比普通的function多了个星号*，在其函数体内可以使用yield关键字,yield表示导出的值,函数会在每个yield后暂停.

其提供next的方法来帮助你运行generator函数并得到下一个值.

next方法不仅返回值，它返回的对象具有两个属性：done和value.

value是yield导出的值，如何done返回false,说明遍历还没有结束，构造器还有状态没有跑完.

更详细解释可以参阅es6tutorial

// 生成器
function *createGenerators() {
    yield 1;
    yield 2;
    yield 3;
}

// 生成器能像正规函数那样被调用，但会返回一个迭代器
let Generators = createGenerators();

console.log(Generators.next().value); // 1
console.log(Generators.next().value); // 2
console.log(Generators.next().value); // 3

Generators.throw(new Error('出错了！'));

assign

ES6 对象提供了Object.assign()这个方法来实现浅复制
在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

const obj = Object.assign({}, objA, objB)
Object.assign(target, source1, source2);

filter

最早见过Map, filter, Reduce 这些方式是在Lodash里面

// Lodash写法
_.map([1, 2, 3], function(n) { return n * 3; });
// [3, 6, 9]
_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6
_.filter([1, 2, 3], function(n) { return n <= 2; });
// [1, 2]

// ES6写法
[1, 2, 3].map(n => n * 3);
[1, 2, 3].reduce((total, n) => total + n);
[1, 2, 3].filter(<= 2);

for-of循环

for of每次循环返回的对象的值，不是对象的index

var someArray = [ "a", "b", "c" ];

for (v of someArray) {
    console.log(v);//输出 a,b,c
}

class static

ES6中添加了对类的支持，引入了class关键字。前端js越来越像后端的语法。
继承，父类方法的调用，实例化

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

同学们对于es6的语法还有什么想要了解的。可以在底下评论哦。。

本人长期维护的前端公众号欢迎大家关注

前端那些事