Trailing commas (ES8/ES2017)
允许函数参数列表使用尾逗号。
js
function foo(a, b, ) {
console.log(a, b, )
}
foo(1, 2, )
for await of 和 Symbol.asyncIterator (ES9/ES2018)
迭代协议有两个条件:可迭代协议(指对象上有 Symbol.iterator 属性);迭代器协议(指当前必须返回迭代器对象,对象上必须有一个 next 方法,next 方法又返回一个对象,含有 value 和 done )
js
const arr = ['es6', 'es7', 'es8']
arr[Symbol.iterator] = function() {
let nextIndex = 0
return {
next() {
return nextIndex < arr.length ? {
value: arr[nextIndex++],
done: false
} : {
value: undefined,
done: true
}
}
}
}
for(let item of arr) {
console.log(item)
}
// ---------------------------------------- //
// 以上可以当做同步迭代,异步迭代呢?
function getPromise(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
value: delay,
done: false
})
}, delay)
})
}
const arr1 = [getPromise(100), getPromise(200), getPromise(300)]
// for of 是同步执行
for(let item of arr1) {
console.log(item) // 打印出来全是 pending 状态的 Promise
}
arr1[Symbol.asyncIterator] = function() {
let nextIndex = 0
return {
next() {
return nextIndex < arr1.length
? arr1[nextIndex++]
: Promise.resolve({
value: undefined,
done: true
})
}
}
}
async function run() {
for await (let item of arr1) {
console.log(item)
}
}
run() // 100 200 300
Dynamic import() 动态导入(ES11/ES2020)
js
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
import('./ajax').then(mod => {
console.log(mod)
})
})
// Vue Router 里使用路由懒加载
const Foo = () => import('./Foo.vue') // 返回 Promise
const router = new VueRouter({
routes: [
path: './foo',
component: Foo
]
})
globalThis 全局对象 (ES11/ES2020)
提供了一个标准的方式去获取不同环境下的全局对象。
js
const getGlobal = () => {
if(typeof self !== 'undefined') {
return window
}
if(typeof window !== 'undefined') {
return window
}
if(typeof global !== 'undefined') {
return global
}
throw new Error('Has not this')
}
console.log(getGlobal())
// ------------------------------------ //
console.log(globalThis)
Optional Chaining 可选链(ES11/ES2020)
js
const user = {
name: 'he',
showName() {
console.log(this.name)
}
}
let name = user.showName && user.showName()
// ------------------------------------------- //
name = user.showName?.()
name = user?.name
Nullish coalescing Operator 空值合并运算符 ??(ES11/ES2020)
js
// 要求下面代码取出除了 null undefined 的 falsy 值
let b = 0 // b 换成 false undefined null, 结果 a 都是 2
let a = b || 2
console.log(a) // 2
// ------------------------ //
b = 0
a = b || 2
console.log(a) // 0
b = ''
a = b || 2
console.log(a) // ''
b = null
a = b || 2
console.log(a) // 2
b = undefined
a = b || 2
console.log(a) // 2
上面的解释很难理解,白话说一下:只有 ?? 操作符前面的值为 null 或 undefined 时才会取后面的值。
ES12/ES2021 特性有哪些
以下处于 finished 阶段: String.prototype.replaceAll
ES13/ES2022 特性有哪些
以下处于 finished 阶段: Class Fields (Private instance methods and accessors, Class Public Instance Fields & Private Instance Fields, Static class fields and private static methods)
Ergonomic brand checks for Private Fields
Accessible Object.prototype.hasOwnProperty