GradyYuan256's notes | GradyYuan256's notes

Trailing commas (ES8/ES2017)

允许函数参数列表使用尾逗号。

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

for await of 和 Symbol.asyncIterator (ES9/ES2018)

迭代协议有两个条件：可迭代协议（指对象上有 Symbol.iterator 属性）；迭代器协议（指当前必须返回迭代器对象，对象上必须有一个 next 方法，next 方法又返回一个对象，含有 value 和 done ）

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）

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）

提供了一个标准的方式去获取不同环境下的全局对象。

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）

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）

// 要求下面代码取出除了 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