# 一、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.valuesObject.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)

# 有时间再补充
更新于 : 7/8/2024, 10:21:14 AM