Javascript 简明教程
JavaScript - ECMAScript 2022
ECMAScript 2022 标准于 2022 年发布。此更新中添加的重要功能包括私有方法和字段、 Array at() 和 String at() 方法等。本章讨论 ECMAScript 2022 中新添加的所有功能。
New Features Added in ECMAScript 2022
以下是 ECMAScript 2022 版 JavaScript 中添加的新方法、特性等。
-
Array at() Method
-
String at() Method
-
Private methods and fields
-
Object.hasOwn()
-
error.cause
-
await import
这里，我们详细解释了每项特性。
Array at() Method
ECMAScript 2022 (ES2022) 为数组引入了 Array at() 方法。在 JavaScript 中，array at() 方法用于从特定索引访问数组元素。您不能在 arr[index] 表示形式中使用负索引，但是使用 array.at() 方法时，您还可以使用负索引访问数组元素。
当您使用负索引时，它从末尾返回数组。
Example
在下面的代码中，我们使用负索引和 array.at() 方法访问数组中的最后一个和第三个最后一个元素。
<body>
<div id = "demo1">The last array element is: </div>
<div id = "demo2">The third last array element is: </div>
<script>
const arr = [10, 20, 60, 72, 6, 12, 23];
document.getElementById("demo1").innerHTML += arr.at(-1);
document.getElementById("demo2").innerHTML += arr.at(-3);
</script>
</body>
</html>The last array element is: 23
The third last array element is: 6String at() Method
ECMAScript 为字符串引入了 String at() 方法。在 JavaScript 中，String at() 方法用于从特定字符串索引访问字符。它也接受负索引作为参数。
Example
在下面的代码中，我们使用负索引和 string.at() 方法访问字符串中的最后一个和第四个最后一个字符。
<html>
<body>
<div id = "demo1">The last string character is: </div>
<div id = "demo2">The fourth last string character is: </div>
<script>
let str = "Hello world";
document.getElementById("demo1").innerHTML += str.at(-1);
document.getElementById("demo2").innerHTML += str.at(-4);
</script>
</body>
</html>The last string character is: d
The fourth last string character is: oPrivate Methods and Fields
ECMAScript 2022 引入了编写私有方法和字段的方法。在 JavaScritp 中，您可以编写字段名称或方法名称，后跟井号 ('#') 以使其变为私有。您无法使用类实例访问私有字段和方法。但是，您可以在类内访问它们。
Example
在下面的代码中，car 类包含 'brand' 私有字段和 'carBrand' 私有方法。getBrand() 方法是公共的。
我们创建了 car 类的实例，并使用它调用了 getBrand() 方法。getBrand() 方法调用 carBrand() 方法。
<html>
<body>
<div id = "output"> </div>
<script>
class car {
#brand;
constructor(brand) {
this.#brand = brand;
}
getBrand() {
return this.#carBrand();
}
#carBrand() {
return "The car brand is " + this.#brand;
}
}
const BMW = new car("BMW");
document.getElementById("output").innerHTML = BMW.getBrand();
</script>
</body>
</html>The car brand is BMWObject hasOwn() Method
Object.hasOwn() 方法替换了 Object.hasOwnProperty() 方法。它用于检查对象是否包含特定属性。
Example
在下面的代码中，我们使用 hasOwn() 方法检查对象 obj 是否包含 name 属性。
<html>
<body>
<div id = "output"> </div>
<script>
const obj = {
name: "sam",
age: 50,
}
document.getElementById("output").innerHTML =
"Does obj contain name property? " + obj.hasOwnProperty("name");
</script>
</body>
</html>Does obj contain name property? trueThe error.cause Property
'cause' 是 JavaScript 对象的属性。它表示错误的原因。它在 ECMAScript 2022 中引入。
Example
在下面的代码中，我们从 'try' 块抛出新的错误。此外，我们使用 cause 属性指定了错误的原因。
我们访问 catch 块中的 'cause' 属性值以了解原因。
<html>
<body>
<div id = "demo"> </div>
<script>
let output = document.getElementById("demo");
try {
output.innerHTML += "Inside the try block <br>";
throw new Error("New error", { cause: "Testing with error." })
} catch (error) {
output.innerHTML += "The reason for the error is: " + error.cause + "<br>";
}
</script>
</body>
</html>Inside the try block
The reason for the error is: Testing with error.