none

0%

ES6-ES12

发表于 更新于

ES6/ES2015

1.class

1
2
3
4
5
6
class Person {
  constructor() {}
}

new Person()
// Person() 报错

2.模块化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const isProd = 'production' === process.env.NODE_ENV
export {
	isProd
}
export default {
  isProd
}
export * from './demo'
export * as U from './demo'
export {isPord as Prod} from './demo'

import {isProd} from './demo'
import {isProd as Prod} from './demo'
import * as U from './demo'

3.箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 类似其他语言的Lambda表达式
const add = (a, b) => a + b
const add2 = v => add(2, v)

const fun = () => {
  // 不能使用arguments
  // console.log(arguments)

  // this 为上一级的this
  console.log(this)
}

// new fun() 不能new


4.函数参数默认值

1
2
3
4
5
6
7
8
9
function add(a = 2, b = 4) {
  return a + b
}

function add(a = 2, b) {
  return a + b
}
// 6
add(void 0, 4)

5.模板字符串

1
2
3
const word = '你好'
// hello 你好
const str = `hello ${word}`

6.解构赋值

1
2
3
const p = {age: 12}
// 12
const {age} = p;

7.延展操作符

1
2
3
function sum(...nums) {
  return nums.reduce((a, b) => a + b)
}

8.对象属性简写

1
2
3
4
5
6
const id = 1
const age = 18
const name = 'Yiyi'
const p = {
  id, age, name
}

9.Promise

1
2
3
new Promise(resolve => {
  resolve(18)
})

10.let const

1
2
3
4
5
let i = 0
i++
const j = 0
// 报错
j++

11.for of

1
2
3
4
5
const arr = ['a', 'b', 'c']
for(const f of arr) {
  // a b c
  console.log(f)
}

12.Generator

1
2
3
4
5
6
7
8
9
function* gen() {
  yield 1
  yield 2
  return 3
}
const g = gen()
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: true}

13.Symbol

14.Map/Set

15.WeakMap/WeakSet

16.Symbol.iterator 可迭代对象

17.Proxy/Reflect

...

ES7/ES2016

1.Array.prototype.includes()

1
[1, 2].includes(1) // true

2.指数操作符

1
const a = 2**3 // 8

ES8/ES2017

1.Object.values()

1
2
3
4
5
6
7
8
const p = {
  id: 1,
  age: 18,
  name: 'Yiyi',
}

// [ 1, 18, 'Yiyi' ]
Object.values(p)

2.Object.entries()

1
2
3
4
5
6
7
8
const p = {
  id: 1,
  age: 18,
  name: 'Yiyi',
}

// [ [ 'id', 1 ], [ 'age', 18 ], [ 'name', 'Yiyi' ] ]
Object.values(p)

3.padStart

1
2
3
4
'hello'.padStart(10, '2')
// '22222hello'
'hello'.padStart(10)
// '     hello'

3.padEnd

1
2
3
4
5
'hello'.padEnd(10, 2)
// 'hello22222'

'hello'.padEnd(10)
// 'hello     '

4.尾后逗号

1
2
3
4
5
function fun(var1, var2, var3, ) {
  return arguments.length
}
fun(10, 20, 30)
// 3

5. async/await

1
2
3
4
5
6
7
8
9
10
console.log(1)
async function fetch() {
  console.log(2)
  await void 0
  console.log(4)
}
fetch()
console.log(3)

// 打印 1 2 3 4

6.SharedArrayBuffer

平时没怎么用过...

7.Atomics

平时没怎么用过...

9.Object.getOwnPropertyDescriptors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const p = {
  age: 18,
  name: 'Yiyi',
}
Object.getOwnPropertyDescriptors(p)

`
{
  age: { value: 18, writable: true, enumerable: true, configurable: true },
  name: {
    value: 'Yiyi',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
`

ES9/ES2018

1. Promise.finally

1
2
3
4
5
6
7
Promise.resolve(1)
  .then((r) => console.log(r))
  .finally(() => {
    console.log('finally')
  })

// 1 'finally'

2.异步迭代

1
2
3
4
5
6
7
8
9
10
const arr = new Array(3).fill(0).map((_, i) => Promise.resolve(i))
console.log(1)
;(async () => {
  for await (const a of arr) {
    console.log(a)
  }
})()
console.log(2)

// 1 2 0 1 2

3.Rest/Spread 属性

1
2
3
4
5
6
7
8
9
// rest
const { x, y, ...othors } = { x: 1, y: 2, a: 3, b: 4 }
x // 1
y // 2
othors // { a: 3, b: 4 }

// spread
const n = { x, y, ...othors }
n // { x: 1, y: 2, a: 3, b: 4 }

4.正则表达式命名捕获组

1
2
3
4
5
6
7
8
9
const str = 'age=18,name=Lili,salary=3000'

const match = /age=(?<age>\d+),name=(?<name>\w+),salary=(?<salary>\d+)/.exec(
  str
)
const { groups } = match
// '18' 'Lili' '3000'
console.log(groups.age, groups.name, groups.salary)

5.正则表达式反向断言

1
2
3
4
5
6
7
8
9
10
11
12
// 正向断言
//
const str = 'createdwas_was_wascreated'
/was(?=created)/.exec(str) // 匹配最后一个was

/was(?!created)/.exec(str) // 最后一个was不匹配，只匹配前面两个was

// 反向断言

/(?<=created)was/.exec(str) // 只匹配最前面一个was

/(?<!created)was/.exec(str) // 最前面一个was不匹配，只匹配后面的两个was

6.正则 s 标记，dotAll 模式

.无法匹配\r \n \u{2048} \u{2049}等换行符。 在 ES2018 中为正则表达式增加了一个新的标志s 用来表示属性 dotAll。以使 .可以匹配任意字符, 包括换行符。

7.正则 Unicode 属性转义符

...

ES10/ES2019

1.Array.flat()和 Array.flatMap()

flat 扁平化数组

flatMap 相当于先执行 map 再执行 flat

2.trimStart()和 String.trimEnd()

清楚字符串前面/后面的空格

3.matchAll

4.Symbol.prototype.description

5. Object.fromEntries

1
2
3
4
5
6
7
const map = new Map([
  ['age', 18],
  ['name', 'Lili'],
])
const obj = Object.fromEntries(map)
console.log(obj) // { age: 18, name: 'Lili' }

6.Function.prototype.toString

7.可选 Catch

1
try {} catch {}

ES11/ES2020

1.Nullish coalescing Operator(空值处理)

1
2
3
4
5
6
7
8
9
10
11
12
const user = {
  u1: 0,
  u2: false,
  u3: null,
  u4: void 0,
  u5: '',
}
const u2 = user.u2 ?? '用户2' // false
const u3 = user.u3 ?? '用户3' // 用户3
const u4 = user.u4 ?? '用户4' // 用户4
const u5 = user.u5 ?? '用户5' // ''

2.Optional chaining（可选链）

1
2
const user = {}
const u2 = user.childer?.name // undefined

3. Promise.allSettled

该Promise.allSettled()方法返回一个 promise，该 promise 在所有给定的 promise 都已实现或被拒绝后解析，并带有一个对象数组，每个对象描述每个 promise 的结果。

Promise.all() 如果任务相互依赖/如果您希望在其中任何一个拒绝时立即拒绝，则返回的 Promise 可能会更合适。

4.import()

动态 import

5.私有变量

1
2
3
4
5
6
7
8
9
class Message {
 #message = "Hello"
 greet() { console.log(this.#message) }
}

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private name #message is not defined

6.BigInt

ES12/ES2021

1. replaceAll

2.Promise.any

3.WeakRef

4.逻辑运算符与赋值表达式

1
2
3
a ||= b
// 等价于
// a || (a = b)

5.数值分隔符

1
123_456