一、at方法

1.1 说明：

数组和字符串等都要该方法。

1.2 功能：

用来做通过索引查询的，比如arr[0]这是数组第一个元素，那么查询最后一个，我们原来通常会arr[ arr.length-1 ]，现在可以直接arr.at(-1)，当然你也可以-2等等。

1.3 使用：

let arr = [1,2,3,4,5];
console.log( arr.at(-1) );
//结果为5

let str = 'abc';
console.log( str.at(-1) );
//结果为c

二、Top-level await（顶层 await）

在ES2017中，正式引入了 async/await，以简化 Promise 的使用，但是 await 关键字只能在 async 函数内使用。如果在异步函数之外使用 await 就会报错。

顶层 await 允许我们在 async 函数外使用 await 关键字。它允许模块充当大型异步函数，通过顶层 await，这些模块可以等待资源加载，这样其他导入这些模块的模块在执行代码之前要等待资源加载完才会去执行。

之前由于 await 仅在 async 函数中使用，因此模块需通过将代码包装在 async 函数来在代码中包含await：

大家在测试顶层await 建议用一些环境测试（要不然可能出现不支持的情况），比如我这里使用vite + vue3来测试。

先配置一下环境：npm init @vitejs/app demo

// src/test.js
let users;

export const fetchUsers = async () => {
  const res = await fetch('http://testapi.xuexiluxian.cn/api/slider/getSliders');
  users = res.json();
}
fetchUsers();

export { users };


// src/App.vue
<script setup>
import { users } from './test.js';
console.log('1', users);
console.log('2');
</script>

这样会有一个缺点，直接导入的 users 会是 undefined。如果我们需要访问得到它，需要在异步执行完成之后：

<script setup>
import { users } from './test.js';

console.log('1', users);   // 直接访问，undefined

setTimeout(() => {
  console.log('2', users);  // 等待异步执行完成，再进行访问
}, 500);

console.log('3');
</script>

当然，这种方法并不完全实现，因为如果异步函数执行花费的时间超过500毫秒，它就不会起作用了，users 仍然是 undefined。

而 top-level await（顶层 await）可以解决这些问题：

// src/test.js
const res = await fetch('http://testapi.xuexiluxian.cn/api/slider/getSliders');   // 使用顶层 await
const users = res.json();
export { users };

// src/App.vue
<script setup>

import { users } from './test.js';
console.log('1',users);
console.log('2');

</script>

此时的 users 必须等到异步执行完毕才会访问。

三、class（类）

3.1 公共属性和方法

在 ES13 之前，在定义类的属性时，需要在构造函数中定义了实例字段和绑定方法

class Vue{
	constructor(){
		this.count = 1;
	}
	run(){
		this.count++;
	}
}

ES13 可以使用公共实例字段，这样就简化了类的定义，使代码更加简洁、可读

class Vue{
	count = 1;
	setCount(){
		this.count++;
	}
}

3.2 私有属性和方法

在属性或者方法前面加上 # 就可以了

class Vue{
	#count = 1;
	setCount(){
		this.#count++;
	}
}

//count是私有属性，外面不可以修改和获取到的（ 这里提示一下，可以打印对象看到，但是不可以修改和访问到 ）。

私有方法也是一样的道理

class Vue{
	#count = 1;
	#setCount(){
		this.#count++;
	}
}

3.3 静态公共字段、静态私有字段、静态私有方法

class Vue {
	//静态公共字段
	static str = '这是str';
	// 静态私有字段
	static #count = 1;
	// 静态私有方法
	static #setCount = () => {
	// 实例化之后，this 不再指向 Vue，所有需要改成 Vue 类调用
		Vue.#count += 1
	}
	newSetCount = () => {
		// 实例化之后，this 不再指向 Vue，所有需要改成 Vue 类调用
		Vue.#setCount()
	}
}
const vue = new Vue();

console.log( Vue.str ); //这是str
console.log( vue.str ); //undefined