ECMAScript2017 new features (ES8)

What is ES8

ES8 is the abbreviation of the 8th edition of the ECMA-262 standard. Since ES6, a version is released every year, with the year as the name, so it is also called ECMAScript 2017, or ES2017 for short.

one edition per year

Too much time between the two versions (6 years from ES5 to ES6) has two problems:

• There are many features that have long been discussed that need to wait until a major version of the standard is released before entering the standard

• Some features are inherently more complex and require a longer discussion. But if you delay to the next version, you have to wait a long time to release

Starting from ES6, new versions are released more frequently, and a version is released every year, and the features discussed during the year are included in the standard.

 

TC39 process

TC39 (Technical Committee 39) is a committee that promotes the development of JavaScript. Its membership consists of representatives of various major browser vendors. Every resolution of the meeting must be approved by a majority of the people, and there is no strong opposition before it can be passed. Because, for members, consent means a responsibility to implement it. Every ECMAScript feature goes through each stage from stage 0 to stage 4. The progress of each feature can be seen in the TC39 proposals github repository.

Stage 0: strawman

A free form advancing ECMAScript that any TC39 member, or a member registered as a TC39 contributor, may submit.

Stage 1: proposal

This stage produces a formal proposal.

1. Identify a lead person to be responsible for the proposal. The lead person or co-leader must be a member of TC39.

2. The problem to be solved is clearly described, and the solution must contain examples, APIs, and related semantics and algorithms.

3. Potential issues should also be pointed out, such as relationships with other features, and challenges in implementing it.

4. A polyfill and demo are also necessary.

Stage 2: draft

The draft is the first version of the specification and will not differ much from the features included in the final standard. After the draft, only incremental revisions are accepted in principle.

1. The draft contains a formal description of the syntax and semantics of the new features, as complete as possible, with some backlogs or placeholders allowed.

2. Must contain 2 experimental concrete implementations, one of which can be implemented with a transpiler, such as Babel.

Stage 3: candidate

Candidate stage, get concrete implementation and user feedback. After that, it will only be modified if there are major problems in implementation and usage.

1. The specification document must be complete, with reviewers and ECMAScript editors signing off on the specification.

2. There must be at least two concrete implementations that conform to the specification.

Stage 4: finished

Ready, the feature will appear in the annual release of the specification.

1. Pass the acceptance test of Test 262.

2. There are 2 tested implementations to gain important practical experience in usage.

3. Editors of ECMAScript must sign off on the specification.

new features

1. String padding

Added String.prototype.padStart and String.prototype.padEnd functions to add padding strings at the beginning or end of strings. The function declaration is as follows:

String.prototype.padStart( maxLength [ , fillString ] )

String.prototype.padEnd( maxLength [ , fillString ] )

The first parameter is the target length; the second parameter is the padding string, which defaults to spaces. Example:

'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'

Typical application scenarios

Use  padStart for time formatting.

'8:00'.padStart(5, '0');  // '08:00'

'18:00'.padStart(5, '0');  // '18:00'

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

Use  padStart to give command line output information alignment.

Commands:


 run       Start a front service

 start     Start a background service

 stop      Stop current background service

 restart   Restart current background service

 help      Display help information

Thanks to the left-pad event for contributing to this feature

2. Object.values & Object.entries

These two static methods are  Object.keys() complementary to the original methods.

const obj = {

 x: 'xxx',

 y: 1

};

Object.keys(obj); // ['x', 'y']

2.1 Object.values

The static method  Object.values() gets the values ​​of all iterable properties of the object and returns an array. An example is as follows:

// 基本用法

const obj = {

 x: 'xxx',

 y: 1

};

Object.values(obj); // ['xxx', 1]


// 数组可以看做键为下标的对象

// ['e', 's', '8'] -> { 0: 'e', 1: 's', 2: '8' }

const obj = ['e', 's', '8'];

Object.values(obj); // ['e', 's', '8']


// 字符串可以看做键为下标的对象

// 'es8' -> { 0: 'e', 1: 's', 2: '8' }

Object.values('es8'); // ['e', 's', '8']


// 如果是纯 number 型的键值，则返回值顺序根据键值从小到大排列

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };

Object.values(obj); // ['yyy', 'zzz', 'xxx']

2.2 Object.entries

The static method  Object.entries obtains the key-value pair of the traversable property of the object, and returns it in the form of [key, value] array, in the same order and in the  Object.values() same order.

// 基本用法

const obj = {

 x: 'xxx',

 y: 1

};

Object.entries(obj); // [['x', 'xxx'], ['y', 1]]


// 数组可以看做键为下标的对象

// ['e', 's', '8'] -> { 0: 'e', 1: 's', 2: '8' }

const obj = ['e', 's', '8'];

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


// 字符串可以看做键为下标的对象

// 'es8' -> { 0: 'e', 1: 's', 2: '8' }

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


// 如果是纯 number 型的键值，则返回值顺序根据键值从小到大排列

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };

Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

Knowledge point expansion:  for...in and  for...of loop

The above  Object.keys(),  Object.values(),  Object.entries() is usually used to traverse an object. In addition to these three methods, there are also commonly used  for...in and  for...of +  Object.keys() loops

use  for...in traversal

const obj = {

 x: 'xxx',

 y: 1

};

for (let key in obj) {

 console.log(key);

}

use  for...of +  Object.keys() traverse

const obj = {

 x: 'xxx',

 y: 1

};

for (let key of Object.keys(obj)) {

 console.log(key);

}

The two traversal methods in the above example are equivalent. But in more complicated cases, the results of the two approaches will be different. for...in The loop traverses the object's enumerable properties, including inherited properties on the prototype chain, but  Object.keys() does not traverse inherited properties. Below is an example of inheritance, Human inherits from Animal.

function Animal() {

 this.legs = 4;

}

function Human(name) {

 this.name = name;

}

Human.prototype = new Animal();

let human = new Human('es8');

use  for...in traversal

for (let key in human) {

 console.log(key);

}

// 'name', 'legs'

use  for...of +  Object.keys() traverse

for (let key of Object.keys(human)) {

 console.log(key);

}

// 'name'

3. Object.getOwnPropertyDescriptors

The static method is  Object.getOwnPropertyDescriptors used to obtain the property descriptor of the object. The property must be defined by the object itself rather than inherited from the prototype chain. The keys contained in the result may be configurable, enumerable, writable, get, set, and value.

const obj = { es8: 'hello es8' };

Object.getOwnPropertyDescriptor(obj, 'es8');

// {

//   configurable: true,

//   enumerable: true,

//   value: "hello es8"

//   writable: true

// }

4. Trailing commas in function

The ES8 standard allows trailing commas in function parameter lists and calls. This feature allows us to add trailing commas when defining or calling functions.

function es8(var1, var2, var3,) {

 // do something

}

es8(10, 20, 30,);

Think: In the above example, is the arguments.length inside the function 3 or 4?

5. Async functions

In order to solve the async function introduced by asynchronous calls, since Babel and Nodejs have long supported the async and await keywords, this feature should be the most popular and widely used ES8 feature.

Async functions are mainly evolved from ES6's generator and yield. In addition, thanks to the wide application of TJ's co module, JavaScript's asynchronous process control has been widely practiced and implemented in the community before Async functions entered the standard. Discuss. I won't introduce the Async function here. There are many excellent articles in the community, you can search by yourself.