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 = 3const sqrt = Math.pow(num, 4)const result = num ** 4console.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.lengthconst 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_INTEGERconsole.log(num + 1)console.log(num + 2)const bigNum = 80082088208008208820nconsole.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 = nullconsole.log(info, info.deref())

通过new关键字创立弱援用，通过deref办法获取数据，当援用的对象被回收后，弱援用生成的对象也就获取不到了

logical assignment operators

赋值逻辑运算，相当于是逻辑运算后，再进行赋值的操作

  • ||= 逻辑或赋值运算，先或运算，再赋值
  • &&= 逻辑与赋值运算，先与运算，再赋值
  • ??= 逻辑空赋值运算，先空值判断，再赋值
let num = 0// num = num + 1 等同于下方写法num += 1console.log(num)let message = ''// message = message || 'hello' 等同于下方写法message ||= 'hello'console.log(message)let user = {  name: 'alice'}// user = user && user.name 等同于下方写法user &&= user.nameconsole.log(user)let str = 0// str = str ?? 'string' 等同于下方写法str ??= 'string'console.log(str)

逻辑赋值运算 就像+= 和 +1之后再赋值一样，是一种运算的语法糖

Numeric Separator

数字分隔符，较大的数字能够通过下划线（_）进行宰割，使代码可读性更强

const momeny = 100_200_300_400_500console.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高级，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~