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