# 一、ES7 语法（2016）
# 1、求幂运算符
Math.pow(3, 2) === 3 ** 2 // 9
# 2、数组的 includes 方法
如果查找数据是否存在与数组中：建议用 includes；如果查找的数据的索引位置：建议用 indexOf。
console.log([1, 2, NaN].includes(NaN)) // true
console.log([1, 2, NaN].indexOf(NaN)) // -1
# 二、ES8 语法（2017）
# 1、async / await
详细内容可以查看我的另一篇文章：async/await (opens new window)
# 2、对象方法拓展
ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供 for...of 循环使用。
let { keys, values, entries } = Object
let obj = { a: 1, b: 2, c: 3 }
for (let key of keys(obj)) {
console.log(key) // 'a', 'b', 'c'
}
for (let value of values(obj)) {
console.log(value) // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
console.log([key, value]) // ['a', 1], ['b', 2], ['c', 3]
}
# 3、其他
- Object.getOwnPropertyDescriptors()
- 字符串填充
let str = 'lencamo'
console.log(str.padStart(10, '-')) // ---lencamo
console.log(str.padEnd(10, '-')) // lencamo---
// 应用示例
let list = []
for (let i = 1; i < 10; i++) {
list.push(String(i).padStart(2, '0')) // 01 02 03 04 05 06 ……
}
# 三、ES9 语法（2018）
# 1、rest 与拓展运算符
若有相同的，后面的会覆盖前面的
function ajax(options) {
const defaultOptions = {
methods: 'get',
async: true
}
options = { defaultOptions, ...options }
}
ajax({
url: '/api',
methods: 'post'
})
# 2、正则拓展
- 具名组匹配
let str = '今天是2022-12-10'
let reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
let res = reg.exec(str)
let { year, month, day } = res.groups
console.log(year, month, day)
# 3、.finally()
var p = new Promise((resolve, reject) => {
resolve('data')
// reject('fail')
})
p.then((res) => {
console.log('then') // then
return res
})
.catch((err) => {
console.log('catch')
})
.finally(() => {
console.log('finally') // finally
})
# 4、异步遍历器 ✨
// 略 （面试的时候，可以详细的学学）
# 四、ES10 语法（2019）
# 1、Object.fromEntries()
Object.fromEntries()方法是 Object.entries()的逆操作，用于将一个键值对数组转为对象。
键值对数组（二维数组、Map 数据、类数组结构） ---> 对象
let arr = [
['name', 'lencamo'],
['age', 22]
]
console.log(Object.formEntries(arr)) // { name: 'lencamo', age: 22}
- 应用示例
// 1、Map中
let m = new Map()
m.set('name', 'lencamo')
m.set('age', 22)
console.log(Object.formEntries(m)) // { name: 'lencamo', age: 22}
// 2、url地址中
let str = 'name=lencamo&age=22'
let searchParams = new URLSearchParams(str)
console.log(Object.formEntries(searchParams)) // { name: 'lencamo', age: 22}
# 2、trim 补充
新增的trimStart()和trimEnd()方法和以前的trimLeft()、trimRight()方法相同
let str = ' lencamo '
console.log(str.trim(str))
console.log(str.trimStart(str))
console.log(str.trimEnd(str))
# 3、数组的扁平化
// 1、flat
let arr = [1, 2, [3, 4]]
console.log(arr.flat()) // [1, 2, 3, 4]
// 2、flatMap
let arr = [2, 3, 4]
arr.flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
# 4、Symbol 对象的 description
let s = Symbol('name')
console.log(s.description)
# 五、ES11 语法（2020）
# 1、Promise.allSettled 方法
# 略（看Promise专栏即可）
# 2、Module 新增 ✨
① import 语句
ES2020 之前，有一种 import 语句，没有对应的复合写法。
- demo.js
export default {
name: 'lencamo'
}
export function waou() {
//
}
export const list = ['ren', '22']
export * as ns from 'mod'
// 现在：等同于
import * as ns from 'mod'
export { ns }
② import 函数
ES2020 提案 引入 import()函数，支持动态加载模块。
import()类似于 Node.js 的 require()方法，区别主要是前者是异步加载，后者是同步加载。并且 import()返回 Promise 对象。
- 使用
// 报错 ✖
if (x === 2) {
import MyModual from './myModual'
}
// 现在 ✔
async function renderWidget() {
const container = document.getElementById('widget')
if (container !== null) {
// 等同于
// import("./widget").then(widget => {
// widget.render(container);
// });
const widget = await import('./widget.js') // 但更推荐await 😂
widget.render(container)
}
}
renderWidget()
- 应用示例
<body>
<buttom id="login">登录</buttom>
<script type="module">
function login() {
return '管理员'
}
let obtn = document.querySelector('#login')
obtn.onclick = function () {
let role = login()
// console.log(role)
render(role)
}
async function render(role) {
if (role === '管理员') {
let res1 = await import('./1.js')
console.log(res1)
} else {
let res2 = await import('./2.js')
console.log(res2)
}
}
</script>
</body>
// list = ['a.vue','b.vue','c.vue']
/*
list.forEach((item) => {
import(item)
})
*/
# 3、其他
# 有时间再补充
# 六、ES12 语法（2021）
# 有时间再补充
# 七、ES13 语法（2022）
# 有时间再补充