除了ES6，ES还有那些必须要懂得知识？-阿里云开发者社区

除了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]

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

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

EcmaScript 7 新特性

Array.prototype.includes

指数操作符

EcmaScript 8 新特性

async 和 await

async 函数

await 表达式

ES 8 对象方法扩展

Object.values 和 Object.entries

Object.getOwnPropertyDescriptors

EcmaScript 9 新特性

ES 9 对象扩展

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

正则扩展 - 反向断言

正则扩展 - dotAll

EcmaScript 10 新特性

对象扩展方法

字符串扩展方法

数组方法扩展

Symbol 扩展

EcmaScript 11 新特性

私有属性

Promise.allSettled

字符串扩展

可选链操作符

动态 import

数值类型 - BigInt

绝对全局变量

热门文章

最新文章

相关电子书