[JavaScript知识库]原来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。

但这种方式进行运算，仍有一些规则

1. 带n的大数字是不可以与不带n的小数字进行运算的

   • 可以将小数字后面直接加个n
   • 或者通过BigInt方法将小数字转成大数字

2. 将大数字通过转成小数字可能存在精度丢失的问题

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高级，还有很多需要开发者掌握的地方，可以看看我写的其它博文，持续更新中~