新手回顾:ECMAScript 2017 特性

154 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

ECMAScript 2017 特性

最初的JavaScript版本号是ES5(2009)和ES6(2015)。从2016年开始,版本按年份命名:ECMAScript 2016、2017、2018、2019。
本章介绍 ECMAScript 2017 中的新特性:

Async await

  • async 函数是使用async关键字声明的函数。
  • async 函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。
  • asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise
  • async 函数一定会返回一个 promise 对象。如果一个 async 函数的返回值看起来不是 promise,那么它将会被隐式地包装在一个 promise 中。

语法

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('await')
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall(); // 'calling' 'await' 'resolved1'

Object Values

  • Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组
  • 属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

语法

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};
Object.values(person) //  ['John', 'Doe', 50, 'blue']

拓展

除了 Objec.value 语法之外,还有一个与之相对应的 Object.keys; \

不同的是:Object.keys 返回一个所有元素为字符串的数组,其元素来自给定的 object 上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

Object Entries

  • 返回对象中的键/值对的数组
  • 在循环中使用对象变得简单
  • 也使得将对象转换为映射变得简单
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
// 循环中使用对象
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "";
}
// 对象转换为映射
const myMap = new Map(Object.entries(fruits));

JavaScript字符串填充

padStart和padEnd,以支持在字符串的开头和结尾填充。

let str = "5";
let str1 = str.padStart(4,0); // result is 0005
let str2 = str.padEnd(4,0); // result is 5000
  • Internet Explorer中不支持字符串填充
  • Firefox和Safari是最早支持JavaScript字符串填充的浏览器