ECMAScript日常总结--ES2022(ES13)

1.Object.hasOwn()

在ES2022之前，可以使用 Object.prototype.hasOwnProperty() 来检查一个属性是否属于对象。

obj.hasOwnProperty：

返回一个布尔值，指示对象是否具有指定的属性作为其自身的属性（不是继承它）。

js 复制代码

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"已经可以过滤掉原型链上的属性，但在某些情况下并不安全，会导致程序失败。

js 复制代码

Object.create(null).hasOwnProperty('price')
// Uncaught TypeError未捕获的类型错误: Object.create(...).hasOwnProperty is not a function

obj.hasOwn：

Object.hasOwn 特性是一种更简洁、更可靠的检查属性是否直接设置在对象上的方法

js 复制代码

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() ，用于获取数组中指定索引位置的元素值。这个方法与传统的数组访问方式（使用方括号 []）相比，有一些不同之处。

语法

javascript 复制代码

array.at(index)

array: 要操作的数组。
index: 要获取元素的索引位置。可以是一个正整数或负整数，如果是负数，表示从数组末尾开始的位置。

Array.at() 方法返回指定索引位置的元素值。如果索引超出数组的范围，返回 undefined。

javascript 复制代码

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。这使得在访问数组时更容易检测和处理越界情况，而不会导致意外的行为。

javascript 复制代码

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，你可以更简洁地直接在模块的顶层进行异步操作。

javascript 复制代码

// 在没有 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. 类的私有字段

通过 # 关键字，可以创建私有字段或者方法，不可以在外部被访问到，内部可以访问

js 复制代码

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。