ES2022新增特性

.at()

1. 说明: .at()是适用于数组和字符串的方法，用来获取数组给定索引的元素，可以填写负值，值为负数则从数组末尾开始查找；

timeList: [
        { name: '时间1', id: 12 },
        { name: '时间2', id: 34 },
        { name: '时间3', id: 45 },
        { name: '时间4', id: 54 }
 ]，
 str: 'hello world'
 testES() {
      console.log(this.timeList[1)
      // { name: '时间2', id: 34 }
      console.log(this.timeList.at(1)
      // { name: '时间2', id: 34 }
      console.log(this.timeList[this.timeList.length-2])
      // { name: '时间3', id: 45 }
      console.log(this.timeList.at(-2))
      // { name: '时间3', id: 45 }
      console.log(this.str.at(3)
 },

Object.hasOwn()

1. 说明: 用于检测某个属性是否属于一个对象，返回一个布尔值，hasOwn是Object上的一个静态方法；(Object.hasOwn 特性是一种更简洁、更可靠的检查属性是否直接设置在对象上的方法)

 obj: {
        name: '新增对象属性',
        code: 3
 }

console.log(Object.hasOwn(this.obj, 'address'))   // false
console.log(Object.hasOwn(this.obj, 'name'))      //true

2. Object.hasOwn 与 Object.hasOwnPeoperty的区别:

const obj = Object.create({})
obj.name = '新增特性'
console.log(obj.hasOwnProperty.name)  // '新增特性'

// 创建一个不继承自 Object.prototype 的对象, hasOwnProperty获取不到其属性
const obj1 = Object.create(null)
obj1.name = '111'
console.log(obj1.hasOwnProperty.name) // error: obj1.hasOwnProperty is not a function

const obj2 = Object.create(null)
obj1.name = '222'
console.log(obj2.hasOwn.name)  // true

• 因为实例的 hasOwnProperty 方法是从 Object 的原型上拿到的，如果我们使用 Object.create(null) 的方式创建一个对象那么就拿不到 hasOwnProperty 这个方法，而 hasOwn 作为 Object 的静态方法是可以直接通过 Object 来进行调用

error.cause

1. 说明: 在 Error 构造函数上添加一个附加选项参数 cause，可以指定导致它错误的原因，加入cause 来收集原因，规范化整个错误抛出和收集；

// 以前的用法: 
.catch((error) => {
   callback(new Error(error.msg))
})


callback(new Error('新旧密码重复'))
// 新用法: 
 .catch(err => {
    callback(new Error('下载资源失败', { cause: err }))
 });

正则表达式匹配索引

1. 说明: 新增标志: /d, 如果设置标志 /d，将额外获得一个带有开始和结束索引的数组;

// 表示匹配至少一个 「a」 以及 「0」 个或者 「1 个 z」
const re = /a+(?<Z>z)?/d;
const s = "xaaaz";
console.log("匹配结果：", re.exec(s));
//['aaaz', 'z', index: 1, input: 'xaaaz', groups: {Z:'z'}, indices: [[1,5],[4,5]]

indices属性包含了捕获组的信息，其中，[ 1 , 5 ] 为 aaaz 全部字符串的匹配信息，[ 4 , 5 ] 为 Z 捕获组的匹配索引信息

top-level await

1. 说明: 之前await关键字只能在async函数内部使用，在外部使用就会报错: SyntaxError - SyntaxError: await is only valid in async function; ES2022可以在模块的顶层使用await， 并且不需要和async函数搭配使用；表示当前模块是异步函数，需要等待资源加载；
2. 在动态资源加载、模块初始化的时候都可以使用顶层await；

// 顶层 await的使用:
const resp = await fetch('https://jsonplaceholder.typicode.com/users');
const users = resp.json();
export { users};

// usingAwait.js
import {users} from './a.mjs';

console.log(users);
console.log('usingAwait module');

类

1. 说明: 新增私有类字段，使用 # 定义， 防止在类的方法之外直接修改类的属性；

// 之前的写法: 

class TimeTracker {
  name = 'zhangsan';
  project = 'blog';
  hours = 0;

  set addHours(hour) {
    this.hours += hour;
  }
}

let person = new TimeTracker();
person.addHours = 2; // 标准 setter
person.hours = 4;    // 绕过 setter 进行设置
console.log(person.hours) // 4

class TimeTracker {
  name = 'zhangsan';
  project = 'blog';
  #hours = 0;  // 私有类字段
  static message = '777'
  

  set #addHours(hour) {
    this.#hours += hour;
  }

  getColor() {
     return this.color
  }
  // 静态私有方法
  static #getColors() {
     return this.color
  }
}

let person = new TimeTracker();
person.addHours = 4; // 标准 setter
// 访问私有字段
console.log(TimeTracker.hours) // undefined
person.hours = 9 // 直接修改私有字段报错
console.log('hours' in TimeTracker)  // false 无法访问到私有字段
console.log('name' in TimeTracker)    // true

// 通过类只能访问静态方法和字段
console.log(TimeTracker.addHours)  // undefined
console.log(TimeTracker.getColor) // undefined
console.log('message' in TimeTracker)  // true  可从类本身访问静态字段
console.log(person.message)  // undefined  从实例本身访问不到静态字段