Skip to content
On this page

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

Promise.any

WeakRefs

Logical Assignment Operators

Numeric separators

ES13/ES2022 特性有哪些

以下处于 finished 阶段: Class Fields (Private instance methods and accessorsClass Public Instance Fields & Private Instance FieldsStatic class fields and private static methods)

RegExp Match Indices

Top-level await

Ergonomic brand checks for Private Fields

.at()

Accessible Object.prototype.hasOwnProperty

Class Static Block

Error Cause

Array find from last

Hashbang Grammar

Released under the MIT License.