除了ES6，ES还有那些必须要懂得知识？

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

EcmaScript 7 新特性

Array.prototype.includes

• Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值。

指数操作符

• 在 ES 7 中引入指数运算符 【**】，用来实现幂运算，功能与 Math.pow 结果相同。

  console.log(2 ** 3)
  // 输出结果是 8
  

EcmaScript 8 新特性

async 和 await

• async 和 await 两种语法结合可以让异步代码像同步代码一样。

async 函数

• async 函数的返回值为 promise 对象。
• promise 对象的结果由 async 函数执行的返回值决定。

await 表达式

• await 必须写在 async 函数中。
• await 右侧的表达式一般为 promise 对象。
• await 返回的是 promise 成功的值。
• await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理。

const p = new Promise((resolve, reject) => {
  // resolve("用户数据")
  reject("失败了")
})

async function main() {
  try {
    let result = await p
    console.log(result)
  } catch (e) {
    console.log(e)
  }
}
// 调用函数
main()

ES 8 对象方法扩展

Object.values 和 Object.entries

• Object.values() 方法返回一个给定对象的所有可枚举属性值的数组。
• Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组。

Object.getOwnPropertyDescriptors

• 该方法返回指定对象所有自身属性的描述对象。

EcmaScript 9 新特性

ES 9 对象扩展

• rest 参数与 spread 扩展运算符在 ES 6 中已经引入，不过 ES 6 中只针对于数组。

• 在 ES 9 中为对象提供了像数组一样的 rest 参数和扩展运算符。

  function connect({host, port, ...user}){
    console.log(host)
    console.log(port)
    console.log(user)
  }
  connect({
    host: '127.0.0.1',
    port: 3306,
    username: 'root',
    password: 'root',
    type: 'master'
  })
  

ES 9 正则扩展 - 命名捕获分组

let str = '<a herf="http://www.baidu.com">百度</a>'

// const reg = /<a herf="(.*)">(.*)<\/a>/	未进行正则命名分组的
const reg = /<a herf="(?<url>.*)">(?<text>.*)<\/a>/

const result = reg.exec(str)

正则扩展 - 反向断言

• 正向断言

  let str = 'JS5211314你知道么555啦啦啦'
  const reg = /\d+(?=啦)/
  const result = reg.exec(str)
  

• 反向断言

  let str = 'JS5211314你知道么555啦啦啦'
  const reg = /(?<=么)\d+/
  const result = reg.exec(str)
  

正则扩展 - dotAll

• dot(.)：元字符，除换行符以外的任意单个字符。

  let str = `
  	<ul>
  		<li>
  			<a>肖生克的救赎</a>
  			<p>上映日期：1994-09-10</p>
  		</li>
  		<li>
  			<a>阿甘正传</a>
  			<p>上映日期：1994-07-06</p>
  		</li>
  	</ul>
  `
  // 声明正则
  // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
  const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
  // 执行匹配
  let result
  let data = []
  while(result = reg.exec(str)){
    data.push({title: result[1], time: result[2]})
  }
  

EcmaScript 10 新特性

对象扩展方法

• Object.fromEntries

  // 二维数组
  const result = Object.fromEntries([
    ['name', '小伙子'],
    ['xueke', 'Java，大数据， 前端， 云计算']
  ])
  // Map
  const m = new Map()
  m.set('name', 'wdawdawd')
  const result = Object.fromEntries(m)
  

• Object.fromEntries 与 ES 8 的 Object.entries 互为逆运算。

字符串扩展方法

• trim 用来清除字符串的空格。

• trimStart：用来清除字符串左边的空格。

• trimEnd：用来清除字符串右边的空格。

数组方法扩展

• flat：将多维数组降低维度。

  const arr = [1,2,3,4,5,[6,7]]
  const arr1 = [1,2,3,4,5,[6,7,[8,9,10]]]
  console.log(arr.flat())	// 将二维数组降低为一维数组
  console.log(arr1.flat(2))	// 将三维数组降低为一维数组，传入的参数为深度
  

• flatMap：将 map 返回的多维数组降低维度。

  const arr = [1,2,3,4]
  const reasult = arr.flatMap(item => [item * 10])
  // 此时输出的结果是一维数组
  

Symbol 扩展

• Symbol.prototype.description

  let s = Symbol('iloveyou')
  console.log(s.description)
  // 此时输出的结果为 ilivoyou
  

EcmaScript 11 新特性

私有属性

class Person{
  // 公有属性
  name
  // 私有属性
  #age
  #weight
  constructor(name, age, weight){
    this.name = name
    this.#age = age
    this.#weight = weight
  }

	intro(){
    console.log(this.#age)
  }
}

// 实例化
const girl = new Person('小红', 18, '45kg')
// console.log(girl.#name) 此时会报错，因为私有属性只能出现在类的内部，想要访问私有属性可以通过在类的内部写一个方法来获取

Promise.allSettled

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('商品数据 - 1')
  }, 1000)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('商品数据 - 2')
  }, 1000)
})
// 调用 allSettled 方法
const result = Promise.allSettled([p1, p2])
console.log(result);

• 效果：

• Promise.all() 方法也接受一个数组类型的 Promise 对象，只不过只有在数组中所有的 Promise 对象都返回成功才会返回成功，如果有一个为失败，则都失败。

  • 两个都成功时，返回数组中 Promise 的状态和返回值。
  • 有一个失败时，则整个状态返回失败，并且返回值是失败的 Promise 对象返回的返回值。

字符串扩展

• String.prototype.matchAll：用来得到正则批量匹配的结果。

  let str = `
  	<ul>
  	<li>
  			<a>肖生克的救赎</a>
  			<p>上映日期：1994-09-10</p>
  		</li>
  		<li>
  			<a>阿甘正传</a>
  			<p>上映日期：1994-07-06</p>
  		</li>
  	</ul>
  `
  // 声明正则
  const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
  // 调用方法
  const result = str.matchAll(reg)	// 返回一个可迭代对象
  for(let v of result){
    console.log(v)
  }
  

可选链操作符

• (?.)

  function main(config){
    // const dbHost = config && config.db && config.db.host 此句可以被下面那句替换
    const dbHost = config?.db?.host
    console.log(dbHost)
  }
  main({
    db: {
      host: '192.168.1.100',
      username: 'root'
    },
    cache: {
      host: '192.168.1.200',
      username: 'admin'
    }
  })
  

动态 import

• 使用 import() 函数可以动态导入模块。

• 语法：

  import(文件路径)
  

数值类型 - BigInt

• 在普通整型的基础上最后加一个 n ，就变成了大整型。

  let n = 521n
  console.log(n, typeof(n))
  // 521n "bigint"
  

• BigInt() 可以将一个整型转换为大整型。

• 运用场景：大数值运算。

• 注意：

  • 大整型不可以直接和整型进行计算，必须都转换为大整型才可以。

绝对全局变量

• globalThis：始终指向全局对象（无论是浏览器还是node.js）。

  console.log(globalThis) // 浏览器始终指向 window 对象，nodejs 中始终指向 global[option]