Overview of the latest ES8 features-JS Tutorial-php.cn

Overview of the latest ES8 features

巴扎黑

Release： 2017-07-21 09:59:31

Original

3689 people have browsed it

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])

Copy after login

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:

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

Copy after login

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)

Copy after login

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: &#39;xxx&#39;, y: 1 };
Object.values(obj); // [&#39;xxx&#39;, 1]

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

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

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: &#39;xxx&#39;, y: 1 };
Object.entries(obj); // [[&#39;x&#39;, &#39;xxx&#39;], [&#39;y&#39;, 1]]

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

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

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)Copy after login

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, &#39;es8&#39;);
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }Copy after login

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,);Copy after login

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

Copy after login

Shared Memory and atomic operations

Shared memory allows multiple threads to read and write data concurrently, while atomic operations can perform concurrency control to ensure the sequential execution of multiple competing threads. This section introduces the new constructor SharedArrayBuffer and the namespace object Atomics that contains static methods. The Atomic object is similar to Math. We cannot create its instance directly, but can only use the static methods it provides:

add /sub - Add or subtract a value at a certain position
and / or /xor - Perform bit operations
load - Get the value

The above is the detailed content of Overview of the latest ES8 features. For more information, please follow other related articles on the PHP Chinese website!