原来ES7~12分别增加了这些属性呀原来ES7~12分别增加了这些属性

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之后再赋值一样，是一种运算的语法糖