The eighth release of the ECMAScript language specification (ES2017). Let’s see how to use them.

Object.values() / Object.entries()

Before ES6, if we wanted to put all the values of an object in an array, we might write:

var object = {a: 1.b: 2.c: 3};
var array = [];
for (var key in object) {
  if (object.hasOwnProperty(key)) {
    array.push(object[key]);
  }
}
array;  / / [1, 2, 3]
Copy the code

Now, object.values () can be easily retrieved:

const object = {a: 1.b: 2.c: 3};
Object.values(object);  / / [1, 2, 3]
Copy the code

Object.entries() is a combination of Object.keys() and object.entries () and returns an array of key value pairs.

const object = {a: 1.b: 2.c: 3};
Object.entries(object);  // [['a', 1], ['b', 2], ['c', 3]]
Copy the code

The array obtained by object.entries () can be used with the Map structure introduced by ES6:

const object = {a: 1.b: 2.c: 3};
const map = new Map(Object.entries(object));  // Map(3) {"a" => 1, "b" => 2, "c" => 3}
Copy the code

String.prototype.padStart() / String.prototype.padEnd()

PadStart (targetLength [, padString]), where targetLength represents the length of the filled string, padString represents the filled string, and the default space is blank

'es8'.padStart(4);          // 'es8', default is space
'es8'.padEnd(4.'0');       // 'es80', fill in the custom string
'es8'.padStart(2);          // 'es8', if the length is less than the original string, return the original string
'es8'.padStart(6.'abcd');  // 'abces8', if the padding string + the original string length is greater than the given length, it is truncated from the left of the padding string
'es8'.padEnd(6.'abcd');    // 'es8abc', the padEnd is also taken from the left of the fill string
'es8'.padStart(7.'abc');   // 'abcaes8', repeats from the fill string if the fill string + the original string length is less than the given length
Copy the code

Object.getOwnPropertyDescriptors

This function returns all of its own property descriptors for the specified object (parameter). Self-attribute descriptors are attributes defined within the object itself, not inherited through the stereotype chain. Each descriptor object returned by this function can be configured with different, Enumerable, writable, get, set, and Value.

const object = { 
  a: 1.get b() { return 2; }};Object.getOwnPropertyDescriptors(object);
/ / {
// a: {
// configurable: true,
// enumerable: true,
// value: 1,
// writable: true
/ /},
// b: {
// configurable: true,
// enumerable: true,
// get: f b(), //the getter function
// set: undefined
/ /}
// }
Copy the code

Function argument list and trailing comma in call

ES8 allows a function definition or function call with a trailing comma after the last argument without a SyntaxError.

function foo(a, b, c,) {
  // doSomething
}

foo(1.2.3,);
Copy the code

This is common in multi-line parameter styles,

foo(
  1.2.3,);Copy the code

Export errors will no longer be reported when adding arguments without removing commas.

Async /await asynchronous functions

The Function declaration defined by the async keyword defines a Function that can be executed asynchronously and returns an object of type Async Function.

async function add10 (num) {
  return num + 10;
}
add10; // async ƒ ADD10 (num) {return num + 10; }
Copy the code

The return value is an instance of Promise:

add10(10); // Promise {<fulfilled>: 20}
Copy the code

Await is placed before the Promise call, and await forces the code to wait until the Promise object resolve returns the value of resolve as the result of the await expression. And await can only be used inside async functions.

async function foo() {
  let num = await add10(10);
  console.log(num);  / / 20
  return num + 10;
}

foo();  // Promise {<fulfilled>: 30}
Copy the code

To get the catch condition of a Promise, try… Catch.

function throwError() {
  return Promise.reject(new Error('error'));
}

async function foo() {
  try {
    await throwError(10);
  } catch(e) {
    console.log(e);  // Error: error
  }
  return true;
}

foo();  // Promise {<fulfilled>: true}
Copy the code

The resources

  • What ‘s new ES2017 in

collection

  • New features of ES2021(ES12
  • New features for ES2020(ES11)
  • Nine new features that ES2019(ES10) brings
  • ES2018 (ES9) new features
  • ES2017 (ES8) new features
  • ES2016 (ES7) new features