This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

ECMAScript 2017 (ES8) Features

ECMAScript 2017 or ES8 was officially released by TC39 at the end of June 2017. The full version can be viewed here; The typical features of ES8 include string padding, object value traversal, object attribute descriptor retrieval, function parameter list and trailing comma in call, asynchronous function, shared memory and atomic operation, etc.

String padding

ES8 adds built-in string padding functions, padStart and padEnd respectively, which can ensure that the string reaches a fixed length by padding the beginning or end of the string. The developer can specify the padded string or use the default whitespace. The function is declared as follows:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])
Copy the code

As shown above, the first argument to the function is the target length, which is the length of the resulting string; The second argument is the specified fill 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'
Copy the code

Object refers to traversal

The object. values function returns an enumerable array of property values for the specified Object, in the same order as the for-in loop, declared as:

Object.values(obj)
Copy the code

The first argument, obj, is the target object to iterate over. It can be an object or an array (an array can be an object with keys as 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']
Copy the code

The Object.entries method returns the enumerable properties and values of an Object as a two-dimensional array in the same order as Object.values. This function is declared and used as:

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']]
Copy the code

Object property descriptor gets

GetOwnPropertyDescriptors function returns a descriptor specifies the attributes of a specified object; This property must be defined by the object itself and not inherited from the stereotype chain. The function is declared as:

Object.getOwnPropertyDescriptor(obj, prop)
Copy the code

Obj is the source object and prop is the name of the property you want to view. The resulting keys can be different, 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 // }Copy the code

Function argument list with trailing comma in call

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,);
Copy the code

An asynchronous function

In ES8, async/await syntax is allowed to define and execute asynchronous functions. The async keyword returns an AsyncFunction object. Internally, asynchronous functions are implemented in a similar way to iterators, but they are not converted to iterators:

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 Hello, es8 // after 2 secondsCopy the code

Shared memory and atomic operations

Shared memory allows multiple threads to read and write data concurrently, while atomic operations provide concurrency control, ensuring that multiple competing threads execute sequentially. This part introduces the new constructor SharedArrayBuffer and Atomics, a namespace object that contains static methods. An Atomic object is similar to Math in that we cannot create an instance directly, but can only use the static methods it provides:

  • Add /sub – Adds or subtracts a value at a location
  • And/or /xor – Performs bit operations
  • Load – Gets the value