ECMAScript2017新特性总结及使用场景

ES2017 主要新增了 async&await；

1 async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样。

1.1 async 函数

1. async 函数的返回值为 Promise 对象；
2. Promise 对象的结果由 async 函数执行的返回值决定；

// 返回一个字符串；返回的结果不是一个 Promise 类型的对象，返回的结果就是成功的 Promise 对象
async function fn() {
  return "Hello World!";
}
const result = fn();
console.log(result); // Promise {<resolved>: "Hello World!"}

// 抛出错误，返回的结果是一个失败的 Promise 对象
// 注：返回 Error 对象，结果也是成功的 Promise 对象
async function fn() {
  throw new Error("错处啦！");
}
const result = fn();
console.log(result); // Promise {<rejected>: Error: 错处啦！at fn (<anonymous>:2:9) at <anonymous>:4:16}

// 返回的结果如果是一个 Promise 对象
async function fn() {
  return new Promise((resolve, reject) => {
    // resolve('成功的数据');
    reject("失败的错误！");
  });
}
const result = fn();
console.log(result); // Promise {<pending>}

result.then(
  (value) => {
    console.log(value); // 成功的数据
  },
  (reason) => {
    console.log(reason); // 失败的错误！
  }
);

1.2 await 表达式

1. await 必须写在 async 函数中；
2. await 右侧的表达式一般为 promise 对象；
3. await 返回的是 promise 成功的值；
4. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理。

2 Object.values 和 Object.entries

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组；
2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组；

//声明对象
const movie = {
  name: "流浪地球",
  cities: ["北京", "杭州", "上海", "苏奥维熙"],
  role: ["刘启", "韩子昂", "朵朵", "刘培强", "王磊"],
};

//获取对象所有的键
console.log(Object.keys(movie));
//获取对象所有的值
console.log(Object.values(movie));
//entries
console.log(Object.entries(movie));
//创建 Map
const m = new Map(Object.entries(movie));
console.log(m.get("cities"));

3 Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(movie));

const obj = Object.create(null, {
  name: {
    //设置值
    value: "流浪地球",
    //属性特性
    writable: true,
    configurable: true,
    enumerable: true,
  },
});