JavaScript - ECMAScript 2017 的新增功能特性
ECMAScript 2017 版 JavaScript 于 2017 年发布。ECMAScript 2017 为 JavaScript 引入了许多新功能。其中最值得关注的功能之一是 async/await 语法，它允许我们以更同步的风格编写异步操作。它提供了共享内存和原子操作，增强了对并发编程的支持。在本章中，我们将讨论 ECMAScript 2017 中的所有新增功能。
ECMAScript 2017 中的新增功能
以下是 ECMAScript 2017 版 JavaScript 中新增的方法、特性等。
padStart() 和 padEnd() 方法
Object.entries() 方法
Object.values() 方法
JavaScript async 和 await
Object getOwnPropertyDescriptors() 方法
JavaScript 共享内存
这里，我们详细解释了每个特性。
String填充: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, "@"); // 开始处的填充
let end_updated = base.padEnd(18, "*"); // 末尾填充
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 的 entry() 方法获取该对象的迭代器。
之后，我们使用 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() 方法获取数组中对象的所有值。
<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
ECMAScript 2017 语言新增了 async 和 await 关键字。async/await 关键字用于创建异步函数。async 关键字用于创建异步函数，await 关键字用于处理操作。
示例
以下代码中的 printMessage() 函数是异步的。我们在函数内部定义了一个新的 Promise，并将其存储在 getData 变量中。
该 Promise 需要 0.5 秒才能解析。await 关键字负责处理该 Promise，并阻止函数代码执行，直到该 Promise 解析完成。
<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.getOwnPropertyDescriptors() 方法返回每个属性的属性描述符，例如可写、可枚举、可配置、值等。它是对象属性的元数据。
示例
在下面的代码中，我们使用 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 Worker 在不同的线程中运行 JavaScript 代码。
2018 年，SharedArrayBuffer 被引入，用于共享内存并通过共享数据执行原子操作。
