Javascript 简明教程
JavaScript - ECMAScript 2017
ECMAScript 2017 版本的 JavaScript 于 2017 年发布。ECMAScript 2017 为该语言引入了许多新特性。其中一个最显着的特性是 async/await 语法,它允许我们以更同步的方式编写异步操作。它提供了共享内存和原子运算,增强了对并发编程的支持。
在本章中,我们将讨论 ECMAScript 2017 中所有新增特性。
New Features Added in ECMAScript 2017
以下是添加到 ECMAScript 2017 版本 JavaScript 中的新方法、特性等。
-
padStart() and padEnd() methods
-
Object.entries() method
-
Object.values() method
-
JavaScript async and await
-
Object getOwnPropertyDescriptors() Method
-
JavaScript Shared Memory
这里,我们详细解释了每项特性。
String Padding: padStart() and padEnd() methods
ECMAScript 2017 引入了两个字符串方法,即 padStart() 和 padEnd() 方法,允许您通过添加特定字符来在字符串的开头和结尾添加填充。这些方法用于扩展字符串并实现所需的长度。
Example
在下面的代码中,我们将所需的字符串长度作为 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****
The Object.entries() Method
ECMAScript 2017 向对象添加了 Object.entries() 方法。Object.entries() 方法返回一个迭代器以遍历对象的键值对。
Example
在下面的代码中,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
The Object.values() Method
ECMAScript 2017 向对象中引入了 Object.values() 方法。JavaScript Object.values() 方法用于获取对象属性值的数组。
Example
在下面的代码中,我们使用 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 and await
在 ECMAScript 2017 中,将 async 和 await 关键字添加到该语言中。async/await 关键字用于创建异步函数。async 关键字用于创建异步函数,而 await 关键字处理操作。
Example
下面的代码中,printMessage() 函数是异步的。我们在函数内部定义了一个新承诺,并将它存储在 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 !!
The Object.getOwnPropertyDescriptors() Method
Object.getOwnPropertyDescriptor() 方法返回每个属性的属性描述符,例如可写、可枚举、可配置、值等。它是对象属性的元数据。
Example
在下面的代码中,我们使用 getOwnPrpopertyDescriptors() 方法获取对象每个属性的属性描述符。
<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}}