ECMAScript日常总结--ES2022(ES13)
ECMAScript日常总结–ES2022(ES13)
文章目录
- ECMAScript日常总结--ES2022(ES13)
-
- 1.Object.hasOwn()
- 2.Array.at()
- 3. Top-level Await 在模块的顶层使用“await”
- 4. 类的私有字段
1.Object.hasOwn()
在ES2022之前，可以使用 Object.prototype.hasOwnProperty() 来检查一个属性是否属于对象。
obj.hasOwnProperty：
返回一个布尔值，指示对象是否具有指定的属性作为其自身的属性（不是继承它）。
const book = function (name) {
this.name = name
}
book.prototype.price = '99' //添加一个属性price给book对象
const bookObj = new book('ES13')
console.log(bookObj.hasOwnProperty('name')) // true
console.log(bookObj.hasOwnProperty('price')) // fasle 不是自身的属性
也许“obj.hasOwnProperty”已经可以过滤掉原型链上的属性，但在某些情况下并不安全，会导致程序失败。
Object.create(null).hasOwnProperty('price')
// Uncaught TypeError未捕获的类型错误: Object.create(...).hasOwnProperty is not a function
obj.hasOwn：
Object.hasOwn 特性是一种更简洁、更可靠的检查属性是否直接设置在对象上的方法
let object = { age: 99 }
let object2 = Object.create({ age: 99 })
let object3 = Object.create(null)
Object.hasOwn(object, 'age') // true
Object.hasOwn(object2, 'age') // false 原型上存在‘age’属性
Object.hasOwn(object3, 'age') // false 不继承自的对象"Object.prototype"
2.Array.at()
Array.at() ，用于获取数组中指定索引位置的元素值。这个方法与传统的数组访问方式（使用方括号 []）相比，有一些不同之处。
语法
array.at(index)
array: 要操作的数组。index: 要获取元素的索引位置。可以是一个正整数或负整数，如果是负数，表示从数组末尾开始的位置。
Array.at() 方法返回指定索引位置的元素值。如果索引超出数组的范围，返回 undefined。
const fruits = ['apple', 'banana', 'orange', 'grape'];
//之前方法获取
console.log(fruits[1]); // 'banana'
console.log(fruits[fruits.length -1 ]); // 'grape'
//at()获取
console.log(fruits.at(1)); // 'banana'
console.log(fruits.at(-1)); // 'grape'
console.log(fruits.at(10)); // undefined
fruits.at(1) 返回数组 fruits 中索引为 1 的元素，即 ‘banana’。fruits.at(-1) 返回数组中倒数第一个元素，即 ‘grape’。fruits.at(10) 由于索引超出了数组范围，返回 undefined。
与传统数组访问方式的区别
与使用方括号 [] 的方式不同，Array.at() 方法不会将超出范围的索引转换为有效索引，而是直接返回 undefined。这使得在访问数组时更容易检测和处理越界情况，而不会导致意外的行为。
const arr = [1, 2, 3];
console.log(arr[10]); // 输出: undefined
console.log(arr.at(10)); // 输出: undefined
在这个例子中，使用方括号访问数组的方式和 Array.at() 方法都返回 undefined，但是前者不会报错，而后者更清晰地表达了越界访问的结果。
3. Top-level Await 在模块的顶层使用“await”
“Top-level await” 允许在模块的顶层直接使用 await 关键字。在过去，JavaScript 中的 await 关键字只能在异步函数中使用，而不能在模块的顶层（即全局作用域）使用。但是，随着 ECMAScript 2022 标准的引入，现在可以在模块的顶层直接使用 await 关键字。
在没有 top-level await 的情况下，如果你想在模块的顶层使用异步操作的结果，你必须在全局作用域内创建一个异步函数，然后调用该函数。而通过 top-level await，你可以更简洁地直接在模块的顶层进行异步操作。
// 在没有 top-level await 的情况下，需要使用异步函数
// 并在全局作用域内调用该函数
/*
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();
*/
// 使用 top-level await，可以直接在模块的顶层使用 await
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
通过 top-level await，我们可以直接在模块的顶层使用 await 关键字，而不需要定义一个额外的异步函数。这使得代码更加清晰和简洁。
4. 类的私有字段
通过 # 关键字，可以创建私有字段或者方法，不可以在外部被访问到，内部可以访问
class MyClass {
#privateField;
constructor() {
this.#privateField = 'ABC';
}
getPrivateField() {
return this.#privateField;
}
setPrivateField(newValue) {
this.#privateField = newValue;
}
}
const instance = new MyClass();
console.log(instance.#privateField);
// 语法错误: Private field '#privateField' must be declared in an enclosing class
console.log(instance.getPrivateField()); // ABC
instance.setPrivateField('CBA');
console.log(instance.getPrivateField()); // CBA
#privateField 是一个私有字段，只能在类的内部访问。类外部试图访问它会导致 SyntaxError。