JavaScript - ECMAScript 2017

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

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

ECMAScript 2017 中添加的新特性

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

padStart() 和 padEnd() 方法
Object.entries() 方法
Object.values() 方法
JavaScript async 和 await
Object getOwnPropertyDescriptors() 方法
JavaScript 共享内存

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

字符串填充：padStart() 和 padEnd() 方法

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

示例

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

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

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

Object.entries() 方法

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

示例

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

之后，我们使用 for...of 循环使用迭代器遍历对象属性。

<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

Object.values() 方法

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

示例

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

<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 和 await

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

示例

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

承诺需要 0.5 秒才能解析。`await` 关键字处理承诺，并在承诺解析之前阻塞函数代码执行。

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

Object.getOwnPropertyDescriptors() 方法

Object.getOwnPropertyDescriptor() 方法返回每个属性的属性描述符，例如 writable、enumerable、configurable、value 等。它是对象属性的元数据。

示例

在下面的代码中，我们使用 getOwnPrpopertyDescriptors() 方法获取对象每个属性的属性描述符。（注意：原文此处拼写错误，应为 getOwnPropertyDescriptors）

<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 共享内存和原子操作

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

JavaScript 是一种单线程编程语言。但是，您可以使用 Web Workers 在不同的线程中运行 JavaScript 代码。

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

打印页面