ES6也称为ES2015，于2015年发布，此后每年都有新增一些属性，分别命名为ES7~12，发布的年份分别对应2016年到2021年
ES7
includes方法
数组中新增了includes方法，用来判断数组中是否存在某一元素，在此之前进行这样的判断是使用indexOf判断下标值，小于0时则代表不存在。
const list = ['alice', 'kiki', 'macus']
console.log(list.includes('alice'))
console.log(list.indexOf('alice'))
console.log(list.includes('hello'))
console.log(list.indexOf('hello'))
includes返回布尔值，indexOf返回数组的下标
指数运算
ES7增加了指数运算的操作符，两个* 号（**），在此之前通过 Math.pow 来计算
const num = 3
const sqrt = Math.pow(num, 4)
const result = num ** 4
console.log(sqrt, result)
以上都表示 num 的四次方，执行结果都为81
** 运算符通过babel编译成es5的语法时，也是使用的 Math.pow
ES8
Object.values和Object.entries
Object.keys （ES6之前就有的属性） 获取对象的所有key值，Object.values获取对象的所有value值，Object.entries会返回一个数组，数组中包含每一个key和value元素组成的数组
const obj = {
name: 'alice',
age: 18
}
const list = ['alice', 'kiki', 'macus']
const messsage = 'hello'
console.log(Object.keys(obj), Object.values(obj), Object.entries(obj))
console.log(Object.keys(list), Object.values(list), Object.entries(list))
console.log(Object.keys(messsage), Object.values(messsage), Object.entries(messsage))
分别获取数组、对象和字符串的key、value和由key、value组成的数组
stringPadding
对字符串分别使用padStart和padEnd可以进行头、尾填充，传入填充后的字符串长度和填充内容
const message = "hello world"
const startMsg = message.padStart(15, '-')
const endMsg = message.padEnd(16, '*')
console.log(startMsg)
console.log(endMsg)
const nickName = '星辰'
const firstName = nickName.substr(0, 1)
const newName = firstName.padEnd(nickName.length, '*')
console.log(newName)
分别对字符串的头尾进行了填充以及一个小案例
Trailing Commas
尾部逗号，允许函数在定义形参及传递参数的时候，最后一个参数后增加一个逗号（，）
function foo(a, b,){
console.log(a, b,)
}
foo(1,2,)
function baz(m, n){
console.log(m, n)
}
baz('m', 'n',)
在最后一个参数后增加逗号，也不会被认为是错误的写法
getOwnPropertyDescriptors
用于获取对象的所有属性的描述
const obj = {
name: 'alice',
age: 18
}
console.log(Object.getOwnPropertyDescriptors(obj))
包含是否可枚举（enumerable）、可修改（writable）、重新定义（configurable）及value值
其它
- async和await，这部分放到后面的文章中详细的记录
ES9
所有属性
- iterators 迭代器，这部分放到后面的文章中详细的记录
- spread operators，对象展开运算符，记录在 你知道ES6中的这些属性吗 这篇文章中
- promise finally，和promise一起放到后面的文章中详细的记录
ES10
flat和flatMap
flat这个函数是用来对数组降维的，只需要传入需要降维的层级
const array = [1, 2, [3, 4], [[5, 6], [7, 8], [9]], [10], 11, 11, 11, [12, [13, [14]]]]
const num = array.flat(2)
console.log(num)
此时传入降维的层次是2，所以四维数组的数据降了两维，还有两维
flatMap这个方法会先对数组遍历，再进行降维操作，作用相当于map+flat
const list = ["macus mogan", "arish sira", "linda kiki"]
const result = list.flatMap(item => {
const element = item.split(" ")
console.log('每次拆分的元素：',element)
return element
})
console.log(result)
此时遍历出每组元素时候，通过空格切割成数组，flatMap会直接降维
Object.fromEntries
Object.fromEntries是将entries这样的数组类型转换成对象
const obj = {
name: 'alice',
age: 18
}
const arr = ['alice', 'kiki', 'macus']
const str = 'hello'
const objEntries = Object.entries(obj)
const arrEntries = Object.entries(arr)
const strEntries = Object.entries(str)
console.log(objEntries)
console.log(Object.fromEntries(objEntries))
console.log('--------------------------------------------------------------')
console.log(arrEntries)
console.log(Object.fromEntries(arrEntries))
console.log('--------------------------------------------------------------')
console.log(strEntries)
console.log(Object.fromEntries(strEntries))
分别将对象、数组、字符串变成entries后，再通过fromEntries转为对象，fromEntries并不是反向的Object.entries操作，不会恢复数组或者字符串的类型
trimStart trimEnd
trim可以用于去除首尾空格，ES10又增加了trimStart trimEnd分别用于在字符串头 尾部去除空格
const message = " hello world "
const messageLen = message.length
const trimMsg = message.trim()
const trimStartMsg = message.trimStart()
const trimEndMsg = message.trimEnd()
console.log(messageLen)
console.log(trimMsg, trimMsg.length)
console.log(trimStartMsg, trimStartMsg.length)
console.log(trimEndMsg, trimEndMsg.length)
通过字符串的长度可以判断是否去除了首尾的空格
其它
- Symbol的Desciptor属性，记录在 你知道ES6中的这些属性吗 这篇文章中
- Optional catch binding，放到后面try catch 文章中一起记录
ES11
bigInt
在此之前表示大数字可用 Number.MAX_SAFE_INTEGER，但这种表示方式如果要进行计算，是存在精度问题的，ES11增加了一种表示大数字的方式，在数字后面写上字母n，如1234567890987654321n。
但这种方式进行运算，仍有一些规则
-
带n的大数字是不可以与不带n的小数字进行运算的
- 可以将小数字后面直接加个n
- 或者通过BigInt方法将小数字转成大数字
将大数字通过转成小数字可能存在精度丢失的问题
const num = Number.MAX_SAFE_INTEGER
console.log(num + 1)
console.log(num + 2)
const bigNum = 80082088208008208820n
console.log(bigNum + 10n)
console.log(bigNum + BigInt(10))
console.log(Number(bigNum))
以上MAX_SAFE_INTEGER运算 和 bigInt 转Number就都出现了精度丢失的问题
Nullish Coalescing Operator
空值合并操作符（??），对数据进行布尔值的判断，将null和undefined的数据判断为false，就会取运算符后面的值，而或运算符（||）对于null、undefined、空字符串和0都判断为false
const nullStr = null;
const undefinedStr = undefined;
const string = "";
const number = 0;
const user = {};
console.log(nullStr ?? "不存在的内容", nullStr || "不存在的内容");
console.log(undefinedStr ?? "不可识别的类型", undefinedStr || "不可识别的类型");
console.log(string ?? "空字符串", string || "空字符串");
console.log(number ?? "数字", number || "数字");
console.log(user ?? "空对象", user || "空对象");
两者仅在空字符串和数字0的情况判断会不一致
Optional Chining
可选链（?.）在对象中使用，对数据的存在/可读取与否进行判断，当它不为null和undefined时，才会往下操作。
const user = {
name: 'alice',
favorite: {
sport: 'tennis'
}
}
console.log(user?.favorite?.sport)
console.log(user && user.favorite && user.favorite.sport)
console.log(user?.info?.address)
console.log( user && user.info && user.info.address)
通过可选链与 && 操作符所实现的效果一致，但代码更为简洁
globalThis
javascript代码可以运行在浏览器或者nodejs中，这两个容器获取全局对象的方式不相同，在浏览器中可以通过 window 或者 this，在node端需要通过global。es11中进行了统一，使用globalThis，无论在浏览器端或者node端都可以直接获取全局对象。
console.log(globalThis)
浏览器中打印的是window对象，node端打印的是global对象
其它
- for in 标准化，在es11之前，没有规定for in 遍历时的key需要取 key 还是 value，各浏览器都有自己的实现，es11指定标准，需使用key
- Dynamic Import（动态导入），将记录在es模块化的文章中
- Promise.allSettled，将记录在promise的文章中
- import meta，将记录在es模块化的文章中
ES12
FinalizationRegistry
用于对象被垃圾回收器（GC）回收的时候指定一个回调，通过 register 进行注册
let user = {
name: "alice",
};
const registry = new FinalizationRegistry((value) => {
console.log("对象被销毁了", value);
});
registry.register(user, 'user')
user = null
GC是不定时的检测有没有可回收的垃圾，所以当对象指向null时，不会马上执行获取回调的函数，不能在nodejs中测试，只能在浏览器中测试，因为在nodejs中执行完成会关闭该进程，浏览器运行时是一个进程，不会关闭。
WeakRef
直接将对象A赋值给对象B，他们共同指向一个内存地址0x100，因为此时是强引用，即使A指向null之后，0x100仍被B指向，所以0x100不会被销毁。
如果希望A指向null之后，0x100被销毁，那么可以使用 weakRef 实现弱引用。
let user = { name: 'alice' }
let info = new WeakRef(user)
const registry = new FinalizationRegistry((value) => {
console.log("对象被销毁了", value);
});
registry.register(user, 'user')
registry.register(info, 'info')
user = null
console.log(info, info.deref())
通过new关键字创建弱引用，通过deref方法获取数据，当引用的对象被回收后，弱引用生成的对象也就获取不到了
logical assignment operators
赋值逻辑运算，相当于是逻辑运算后，再进行赋值的操作
- ||= 逻辑或赋值运算，先或运算，再赋值
- &&= 逻辑与赋值运算，先与运算，再赋值
- ??= 逻辑空赋值运算，先空值判断，再赋值
let num = 0
// num = num + 1 等同于下方写法
num += 1
console.log(num)
let message = ''
// message = message || 'hello' 等同于下方写法
message ||= 'hello'
console.log(message)
let user = {
name: 'alice'
}
// user = user && user.name 等同于下方写法
user &&= user.name
console.log(user)
let str = 0
// str = str ?? 'string' 等同于下方写法
str ??= 'string'
console.log(str)
逻辑赋值运算 就像+= 和 +1之后再赋值一样，是一种运算的语法糖
Numeric Separator
数字分隔符，较大的数字可以通过下划线（_）进行分割，使代码可读性更强
const momeny = 100_200_300_400_500
console.log(momeny)
执行结果会去除下划线，以十进制数据展示
replaceAll
replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern（第一个参数） 的部分都已被replacement（第二个参数） 替换。
const message = "hello world";
console.log(message.replace("l", "*"));
console.log(message.replaceAll("l", "*"));
replaceAll会替换所有符合条件的，而replace只会替换掉第一个
以上就是ES7-12包含的大部分属性，关于js高级，还有很多需要开发者掌握的地方，可以看看我写的其他博文，持续更新中~