Javascript 简明教程

JavaScript - ECMAScript 2017

ECMAScript 2017 版本的 JavaScript 于 2017 年发布。ECMAScript 2017 为该语言引入了许多新特性。其中一个最显着的特性是 async/await 语法，它允许我们以更同步的方式编写异步操作。它提供了共享内存和原子运算，增强了对并发编程的支持。

The ECMAScript 2017 version of JavaScript was released in 2017. ECMAScript 2017 introduced a number of new features to the language. One the most notable features is async/await syntax which allows us to write asynchronous operations in a more synchronous style. It provided shared memory and atomics that enhances support for concurrent programming.

在本章中，我们将讨论 ECMAScript 2017 中所有新增特性。

In this chapter, we will discuss all the new added features in ECMAScript 2017.

New Features Added in ECMAScript 2017

以下是添加到 ECMAScript 2017 版本 JavaScript 中的新方法、特性等。

Here are the new methods, features, etc., added to the ECMAScript 2017 version of JavaScript.

  1. padStart() and padEnd() methods

  2. Object.entries() method

  3. Object.values() method

  4. JavaScript async and await

  5. Object getOwnPropertyDescriptors() Method

  6. JavaScript Shared Memory

这里，我们详细解释了每项特性。

Here, we have explained each feature in detail.

String Padding: padStart() and padEnd() methods

ECMAScript 2017 引入了两个字符串方法，即 padStart() 和 padEnd() 方法，允许您通过添加特定字符来在字符串的开头和结尾添加填充。这些方法用于扩展字符串并实现所需的长度。

The ECMAScript 2017 introduced two string methods, padStart() and padEnd() methods, that allow you to add padding to the string at the start and end by adding a particular character. These methods are used to extend the string and achieve the desired length.

Example

在下面的代码中，我们将所需的字符串长度作为 padStart() 和 padEnd() 方法的第一个参数，字符作为第二个参数传递。

In the below code, we have passed the desired string length as the first parameter of the padStart() and padEnd() method and the character as a second parameter.

不过，您也可以将字符串作为第二个参数传递。

However, you can also pass the string as a second parameter.

<html>
<body>
   <div id = "output1">After padding at the start: </div>
   <div id = "output2">After padding at the end: </div>
   <script>
      let base = "TurorialsPoint";
      let start_updated = base.padStart(18, "@"); // Padding at the start
      let end_updated = base.padEnd(18, "*");   // Padding at the end
      document.getElementById("output1").innerHTML += start_updated;
      document.getElementById("output2").innerHTML += end_updated;
   </script>
</body>
</html>
After padding at the start: @@@@TurorialsPoint
After padding at the end: TurorialsPoint****

The Object.entries() Method

ECMAScript 2017 向对象添加了 Object.entries() 方法。Object.entries() 方法返回一个迭代器以遍历对象的键值对。

ECMAScript 2017 added Object.entries() method to objects. The Object.entries() method returns an iterator to traverse the key-value pair of the object.

Example

在下面的代码中，employee 对象包含三个属性。我们使用 Object entries() 方法获取对象的迭代器。

In the below code, the employee object contains three properties. We used the Object entries() method to get the iterator of the object.

接下来，我们使用 for…of 循环使用迭代器遍历对象的属性。

After that, we used the for…​of loop to traverse object properties using the iterator.

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const employee = {
         Company: "TutorialsPoint",
         Ex_company: "TCS",
         Experience: 4,
      }
      const emp_iterator = Object.entries(employee);
      for (let pair of emp_iterator) {
         output.innerHTML += pair + "<br>";
      }
   </script>
</body>
</html>
Company,TutorialsPoint
Ex_company,TCS
Experience,4

The Object.values() Method

ECMAScript 2017 向对象中引入了 Object.values() 方法。JavaScript Object.values() 方法用于获取对象属性值的数组。

ECMAScript 2017 introduced Object.values() method to objects. The JavaScript Object.values() method is used to get the array of values of the object properties.

Example

在下面的代码中，我们使用 Object.values() 方法获取对象的所有值（在数组中）。

In the below code, we used the Object.values() method to get all the values of the object in the array.

<html>
<body>
   <div id = "output">Object values are: </div>
   <script>
      const wall = {
         color: "blue",
         size: "15x12",
         paintBrand: "Asiant paints"
      }
      document.getElementById("output").innerHTML +=
	  " " + Object.values(wall);
    </script>
</body>
</html>
Object values are: blue,15x12,Asiant paints

JavaScript async and await

在 ECMAScript 2017 中，将 async 和 await 关键字添加到该语言中。async/await 关键字用于创建异步函数。async 关键字用于创建异步函数，而 await 关键字处理操作。

The async and await keywords are added to the language in ECMAScript 2017. The async/await keywords are used to create asynchronous functions. The async keyword is used to create asynchronous functions, and await keyword handles the operations.

Example

下面的代码中，printMessage() 函数是异步的。我们在函数内部定义了一个新承诺，并将它存储在 getData 变量中。

The printMessage() function is asynchronous in the below code. We have defined a new promise inside the function and stored it in the getData variable.

承诺需要 0.5 秒的时间来解决。‘await’ 关键字处理承诺，并在承诺得到解决之前阻止函数代码执行。

The promise takes the time of 0.5 seconds to resolve. The ‘await’ keyword handles the promise and blocks the function code execution until the promise gets resolved.

<html>
<body>
   <div id = "output"> </div>
   <script>
      async function printMessage() {
         let getData = new Promise(function (res, rej) {
            setTimeout(() => { res("Promise resolved !!"); }, 500);
         });
         document.getElementById("output").innerHTML = await getData;
      }

      printMessage();
   </script>
</body>
</html>
Promise resolved !!

The Object.getOwnPropertyDescriptors() Method

Object.getOwnPropertyDescriptor() 方法返回每个属性的属性描述符，例如可写、可枚举、可配置、值等。它是对象属性的元数据。

The Object.getOwnPropertyDescriptor() method returns the property descriptors for each property, such as writable, enumerable, configurable, value, etc. It is metadata for the object property.

Example

在下面的代码中，我们使用 getOwnPrpopertyDescriptors() 方法获取对象每个属性的属性描述符。

In the below code, we get the property descriptors for each property of the object using the getOwnPrpopertyDescriptors() method.

<html>
<body>
   <div id = "output">The Property descriptors of the wall object is: <br></div>
   <script>
      const wall = {
         color: "blue",
         thickness: 10,
      }
      document.getElementById("output").innerHTML +=
	  JSON.stringify(Object.getOwnPropertyDescriptors(wall));
   </script>
</body>
</html>
The Property descriptors of the wall object is:
{"color":{"value":"blue","writable":true,"enumerable":true,"configurable":true},"thickness":{"value":10,"writable":true,"enumerable":true,"configurable":true}}

JavaScript Shared Memory and Atomics

在 JavaScript 中，共享内存允许多个线程共享一个内存，实现多个线程之间的有效通信。

In JavaScript, share memory allows multiple threads to share a memory, enabling efficient communication between multiple threads.

JavaScript 是一种单线程编程语言。不过，你可以使用 web 工作线程在不同的线程中运行 JavaScript 代码。

JavaScript is a single-threaded programming language. However, you can use the web workers to run the JavaScript code in the different threads.

2018 年，引入了 SharedArrayBuffer，通过共享数据来共享内存和执行原子操作。

In 2018, SharedArrayBuffer was introduced to share memory and perform atomic operations by sharing the data.