EcmaScript 的这些新特性你真的知道？

ES 的这些特性你真的了解吗？ ❤支持博主一下呗~啾咪❤EcmaScript 7 新特性Array.prototype.includes指数 *** 作符 EcmaScript 8 新特性async 和 awaitasync 函数await 表达式ES 8 对象方法扩展Object.values 和 Object.entriesObject.getOwnPropertyDescriptors EcmaScript 9 新特性ES 9 对象扩展ES 9 正则扩展 - 命名捕获分组正则扩展 - 反向断言正则扩展 - dotAll EcmaScript 10 新特性对象扩展方法字符串扩展方法数组方法扩展Symbol 扩展 EcmaScript 11 新特性私有属性Promise.allSettled字符串扩展可选链 *** 作符动态 import数值类型 - BigInt绝对全局变量

❤支持博主一下呗~啾咪❤ 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 = '百度'

// const reg = /(.*)<\/a>/	未进行正则命名分组的
const reg = /.*)">(?.*)<\/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 = `
	
		
			肖生克的救赎
			
上映日期：1994-09-10
		
		
			阿甘正传
			
上映日期：1994-07-06
		
	
`
// 声明正则
// const reg = /\s+(.*?)<\/a>\s+
(.*?)<\/p>/
const reg = /.*?(.*?)<\/a>.*?
(.*?)<\/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 = `
	
	
			肖生克的救赎
			
上映日期：1994-09-10
		
		
			阿甘正传
			
上映日期：1994-07-06
		
	
`
// 声明正则
const reg = /.*?(.*?)<\/a>.*?
(.*?)<\/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]