Overview of the latest ES8 features

ECMAScript 2017 (ES8) feature overview compiled from ES8 was Released and here are its Main New Features, summarized in the author's Modern JavaScript Development: Grammar Basics and Practical Skills series of articles; you are also welcome to pay attention to the front-end weekly checklist series to get first-hand Information.

ECMAScript 2017 or ES8 was officially released by TC39 at the end of June 2017. You can browse the complete version here; the representative features of ES8 include string padding, Object value traversal, object attribute descriptor acquisition, function parameter list and trailing commas in calls, asynchronous functions, shared memory and atomic operations, etc.

String filling

ES8 has added built-in string filling functions, namely padStart and padEnd. This function can ensure that the string reaches a fixed size by filling the head or tail of the string. Length; developers can specify the padded string or use default spaces. The function is declared as follows:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

As shown above, the first parameter of the function is the target length, which is the final generated The string length; the second parameter is the specified padding string:

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'

Object value traversal

Object.values ​​function will return the enumerable The attribute value array of the example, the order of the values ​​in the array is consistent with the for-in loop, the function declaration is:

Object.values(obj)

The first parameter obj is the target object that needs to be traversed, it can is an object or array (an array can be regarded as an object whose keys are subscripts):

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']

The Object.entries method will Enumeration properties and values ​​are returned in the form of a two-dimensional array. The order in the array is consistent with Object.values. The declaration and use of this function are:

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]

Get the property descriptors of the object

The getOwnPropertyDescriptors function will return the descriptor of a specified property of the specified object; the property must be defined by the object itself rather than inherited from the prototype chain. The declaration of the function is:

Object.getOwnPropertyDescriptor(obj, prop)

obj is the source object, and prop is the property name that needs to be viewed; the keys included in the result may include configurable, enumerable, writable, get, set, and value.

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }

Trailing commas in function parameter lists and calls

This feature allows us to add trailing commas when defining or calling functions without reporting an error ：

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);

Asynchronous function

ES8 allows the use of async/await syntax to define and execute asynchronous functions. The async keyword will return a certain AsyncFunction object; in the internal implementation, although the implementation principles of asynchronous functions and iterators are similar, they will not be converted into iterator functions:

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

console.log(1);
sayHello();
console.log(2);

// 调用结果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds