ES2016（ES7）-ES2020（ES11）语法总结

一、ES2016（ES7）

1. 数组扩展：Array.prototype.includes()

语法

Array.prototype.includes(searchElement, fromIndex)

判断数组是否包含指定元素

const arr = ['es6', 'es7', 'es8', 'es9', 'es10']
console.log(arr.includes('es7')) // true
console.log(arr.includes('es5')) // false

第二个参数标识搜索起始位置

const arr = ['es6', 'es7', 'es8', 'es9', 'es10']
console.log(arr.includes('es7', 1)) // true，从下标1开始查找
console.log(arr.includes('es7', 2)) // false，从下标2开始查找

第二个参数可以是一个负数，-n代表倒数低n个元素

const arr = ['es6', 'es7', 'es8', 'es9', 'es10']
console.log(arr.includes('es7', -4)) // true
console.log(arr.includes('es7', -3)) // false

可以查询到NaN

const arr = ['es6', 'es7', 'es8', NaN, 'es10']
console.log(arr.includes(NaN)) // true

2. 数值扩展：幂运算符号

语法

**

等同于

Math.pow(x, y)

console.log(2 ** 10) // 1024

二、ES2017（ES8）

1. 异步编程解决方案Async Await

语法

async / await

输出error，使用注释部分将输出success

async function timeout () {
  return new Promise((resovle, reject) => {
    setTimeout(() => {
      // resovle('success')
      reject('error')
    }, 1000)
  })
}

async function main () {
  try {
    const res = await timeout()
    console.log(res)
  } catch (e) {
    console.log(e)
  }
}

main()

仿axios请求

async function request(url) {
  const data = await axios.get(url)
  console.log(data)
}

2. 对象扩展：Object.values()，Object.entries()

Object.values()
Object.entries()

const obj = {
  name: 'imooc',
  web: 'www.imooc.com',
  course: 'es'
}
let res = Object.values(obj)
console.log(res)
// [ 'imooc', 'www.imooc.com', 'es' ]

const obj = {
  name: 'imooc',
  web: 'www.imooc.com',
  course: 'es'
}
let res = Object.entries(obj)
console.log(res)
// [ [ 'name', 'imooc' ], [ 'web', 'www.imooc.com' ], [ 'course', 'es' ] ]

3. 对象属性描述：Object.getOwnPropertyDescriptors()

语法

Object.getOwnPropertyDescriptors()

let obj = {
  a: 1,
  b: 2
}

const res = Object.getOwnPropertyDescriptors(obj)
const res1 = Object.getOwnPropertyDescriptor(obj, 'a')
console.log(res)
console.log(res1)

{
  a: { value: 1, writable: true, enumerable: true, configurable: true },
  b: { value: 2, writable: true, enumerable: true, configurable: true }
}
{ value: 1, writable: true, enumerable: true, configurable: true }

4. 字符串扩展：String.prototype.padStart()，String.prototype.padEnd()

用于填充字符串直到指定长度，两个参数，第一个参数为目标长度，第二个字符串为用于填充的字符串

let str = '123456789'

let res = str.padStart(14, '456') // 在开始填充
let res2 = str.padEnd(14, '456') // 在结束填充

console.log(res) // 45645123456789
console.log(res2) // 12345678945645

5. 尾逗号 Tralling commas

函数参数在定义或者调用的时候，尾部可以添加一个逗号

function foo (a, b, c,) {
  console.log(a, b, c)
}

foo(4, 5, 6,)

三、ES2018（ES9）

1. 异步迭代for await of

function getPromise (time) {
  return new Promise((resovle) => {
    setTimeout(() => {
      resovle(time)
    }, time)
  })
}

const arr = [getPromise(1000), getPromise(2000), getPromise(3000)];

let main = async () => {
  for await (let item of arr) {
    console.log(item)
  }
}

main()

1000
2000
3000

2. 正则表达式扩展：dotAll，具名组匹配，后行断言

dotAll

const reg = /./
console.log(reg.test('5')) // true
console.log(reg.test('x')) // true
console.log(reg.test('\n')) // false
console.log(reg.test('\r')) // false
console.log(reg.test('\u{2028}')) // false
console.log(reg.test('\u{2029}')) // false

const reg = /./s
console.log(reg.test('5')) // true
console.log(reg.test('x')) // true
console.log(reg.test('\n')) // true
console.log(reg.test('\r')) // true
console.log(reg.test('\u{2028}')) // true
console.log(reg.test('\u{2029}')) // true

修饰符	含义
g	全局匹配
i	忽略大小写
m	跨行匹配
y	粘性
u	unicode
s	.匹配任意单个字符

具名组匹配：可以为分组命名

const { groups: { year, month, day } } = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec('2012-02-02')
console.log(year, month, day) // 2012 02 02

后行断言，寻找后面的内容，但前面需要满足一定条件

// 以ecma开头的script
const str = 'ecmascript'
console.log(str.match(/(?<=ecma)script/))

// 不以ecma开头的script
const str = 'ecmascript'
console.log(str.match(/(?<!ecma)script/))

3. 对象扩展：Rest & Spread

4. Promise.prototype.finally()

无论Promise成功还是失败都会执行finally

let promise = new Promise((resovle, reject) => {
  setTimeout(() => {
    // resovle('success')
    reject('fail')
  }, 1000)
})

promise.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
}).finally(() => {
  console.log('finally')
})

5. 字符串扩展：放松模板字符串文字限制

四、ES2019（ES10）

1. 对象扩展：Object.fromEntries()

将数组或者map转为对象

const entries = Object.entries({
  name: 'imooc',
  course: 'es'
})
console.log(entries)

const fromEntries = Object.fromEntries([['name', 'imooc'], ['course', 'es']])
console.log(fromEntries)

const map = new Map()
map.set('name', 'imooc')
map.set('course', 'es')
const fromEntries2 = Object.fromEntries(map)
console.log(fromEntries2)

[ [ 'name', 'imooc' ], [ 'course', 'es' ] ]
{ name: 'imooc', course: 'es' }
{ name: 'imooc', course: 'es' }

2. 字符串扩展：String.prototype.trimStart() String.prototype.trimEnd()

用于去掉字符串开始的空格与结束的空格

let str = '     string         '
console.log(str.trimStart(), str.trimLeft())
console.log(str.trimEnd(), str.trimRight())

string          string         
     string      string

3. 数组扩展：Array.prototype.flat()，Array.prototype.flatMap()

4. 修订Function.prototype.toString()

现在可以返回注释了

function foo () {
  // 这是ES10
  console.log('imooc')
}
console.log(foo.toString())

function foo () {
  // 这是ES10
  console.log('imooc')
}

6. JSON扩展：JSON superset，JSON.stringify()增强能力

eval('var str="imooc";\u2029 function foo(){return str;}')
console.log(foo())
// 0xD800 ~ 0xDfff
console.log(JSON.stringify('\uD83D\uDE0E'))
console.log(JSON.stringify('\uD83D'))

imooc
"😎"
"\ud83d"

7. Symbol扩展：Symbol.prototype.description

let s = Symbol('imooc')
console.log(s)
console.log(s.description)

Symbol(imooc)
imooc