# 异步编程

TIP

本篇记录 ES6 在实际开发中用到的一些新特性,更加完整版的请移步阮老师的 ES6 教程 主流异步编程方式

  1. 纯回调
  2. Promise
  3. Generator
  4. Async / Await

# JS 的浏览器机制

  • ES6 新增加了两个重要的 JavaScript 关键字: let 和 const
  • let 声明的变量只在 let 命令所在的代码块内有效
  • const 声明一个只读的常量,一旦声明,常量的值就不能改变

# 同步和异步

# 同步编程

  • 同步编程:就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行
  • 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方法后,需等待其响应返回,然后执行后续代码
  • 在 JS 中的同步编程处理中,JS 是不能同时处理多个任务,只能一个一个按照顺序执行

# 异步编程

  • 异步编程:就是计算机在执行一个指令之后不是马上得到结果,而是继续执行后面的指令,等到特定的事件触发后,才得到结果

# 回调函数

  • 回调函数就是将命名函数或匿名函数(A)当做参数传递给函数 B,然后在函数 B 中处理响应逻辑之后返回函数 A,最后在需要的时候调用函数 A
  • 通常分为两类:同步回调和异步回调

# 同步回调

  • 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
  • 例子: 数组遍历相关的回调函数、Promise 的 excutor 函数
const arr = [1, 2]
// 同步回调, 不会放入回调队列, 而是立即执行
arr.forEach((item) => console.log(item))
console.log("forEatch()之后")
// 1
// 2
// forEatch()之后

# 异步回调

  • 理解: 不会立即执行, 会放入回调队列中将来执行
  • 例子: 定时器回调 / ajax 回调 / Promise 的成功|失败的回调
setTimeout(() => {
	// 异步回调, 会放入回调队列, 所有同步执行完后才可能执行
	console.log("timout 回调")
}, 0)
console.log("setTimeout 之后")
// setTimeout 之后
// timout 回调

# 回调地狱

# 定义

  • 常见版:回调函数嵌套调用,  外部回调函数异步执行的结果是嵌套的回调函数执行的条件
  • 个人版:多层函数相互依赖的代码耦合现象

# 示例代码

doSomethingAsync1(function () {
	doSomethingAsync2(function () {
		doSomethingAsync3(function () {
			doSomethingAsync4(function () {
				doSomethingAsync5(function () {
					// code...
				})
			})
		})
	})
})

# 缺点

  • 套函数存在耦合性,一旦有所改动,就会牵一发而动全身
  • 嵌套函数一多,就很难处理错误,不能使用 try catch 捕获错误
  • 不能直接 return
  • 不便于阅读和维护

# 解决方案

  • Promise 链式调用
  • Generator
  • Async 和 Await (终极解决方案? )

# Promise

# 定义

  • 抽象表达: Promise 是 JS 中进行异步编程的新的解决方案
  • 具体表达:
    1. 从语法上来说: Promise 是一个构造函数
    2. 从功能上来说: promise 对象用来封装一个异步操作并可以获取其结果

# 术语

  • 解决(fulfill): 指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决,但实际编程中大家都用 resolve 来代替
  • 拒绝(reject): 指一个 promise 失败时进行的一系列操作
  • 拒因(reason): 也就是拒绝原因,指在 promise 被拒绝时传递给拒绝回调的值
  • 终值(eventual value):所谓终值,指的是 promise 被解决时传递给解决回调的值,由于 promise 有一次性的特征,因此当这个值被传递时,标志着 promise 等待态的结束,故称之终值,有时也直接简称为值(value)
  • 值(value): 指任何 JavaScript 的合法值(包括 undefined , thenable 和 promise)
  • Promise: promise 是一个拥有 then 方法的对象或函数,其行为符合本规范
  • thenable: thenable : 是一个定义了 then 方法的对象或函数,文中译作"拥有 then 方法"
  • 异常(exception): 是使用 throw 语句抛出的一个值

# 优点

  • 指定回调函数的方式更加灵活
    1. 旧的:  必须在启动异步任务前指定
    2. promise: 启动异步任务 =>  返回 promie 对象 =>  给 promise 对象绑定回调函数(甚至可以在异步任务结束后指定)
  • 用同步代码的方式编写异步代码,便于阅读
  • 可以异常传透,便于异常处理
  • 支持链式调用,  可以解决回调地狱问题

# 状态改变

  • 三个状态:初始等待状态(Pending)、 执行状态(Fulfilled、Resolved)和拒绝状态(Rejected)
  • 一个 promise 对象只能改变一次状态
  • 无论状态变为成功还是失败, 都会有一个结果数据
  • 成功的结果数据一般称为 vlaue, 失败的结果数据一般称为 reason

# 基本流程

doubleLinkList

# 基本使用

// 1. 创建一个新的promise对象
const p = new Promise((resolve, reject) => {
	// 2. 执行异步操作
	setTimeout(() => {
		// 如果当前时间是奇数代表成功, 偶数代表失败
		const time = Date.now()
		if (time % 2 === 0) {
			// 2.1 如果成功了, 调用 resolve(value)
			resolve("成功的数据" + time)
		} else {
			// 2.2 如果失败了, 调用 reject(reason)
			reject("失败数据" + time)
		}
	}, 1000)
})

// 3. 通过 promise 的 then()指定成功和失败的回调函数
p.then(
	(value) => {
		console.log("成功的回调, value:", value)
	},
	(reason) => {
		console.log("失败的回调, reason:", reason)
	}
)

# 常用 API

  • Promise 构造函数: Promise (excutor) {}
    1. excutor 函数: 执行器 (resolve, reject) => {}
    2. resolve 函数: 内部定义成功时我们调用的函数 value => {}
    3. reject 函数: 内部定义失败时我们调用的函数 reason => {}
    4. 说明: excutor 会在 Promise 内部立即同步回调,异步操作在执行器中执行
  • Promise.prototype.then 方法: (onResolved, onRejected) => {}
    1. onResolved 函数: 成功的回调函数 (value) => {}
    2. onRejected 函数: 失败的回调函数 (reason) => {}
    3. 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
    4. 返回一个新的 promise 对象
  • Promise.prototype.catch 方法: (onRejected) => {}
    1. onRejected 函数: 失败的回调函数 (reason) => {}
    2. 说明: then()的语法糖, 相当于: then(undefined, onRejected)
  • Promise.prototype.finally 方法:() => {}
    1. 不管 promise 最后的状态,在执行完 then 或 catch 指定的回调函数以后,都会执行 finally 方法指定的回调函数
    2. finally 方法的回调函数不接受任何参数,里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果
  • Promise.resolve 方法: (value) => {}
    1. value: 成功的数据或 promise 对象
    2. 说明: 返回一个成功/失败的 promise 对象
  • Promise.reject 方法: (reason) => {}
    1. reason: 失败的原因
    2. 说明: 返回一个失败的 promise 对象
  • Promise.all 方法: (promises) => {}
    1. promises: 包含 n 个 promise 的数组
    2. 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败
  • Promise.race 方法: (promises) => {}
    1. promises: 包含 n 个 promise 的数组
    2. 说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

# 关键问题梳理

1. 如何改变 promise 的状态?

  • resolve(value): 如果当前是 pendding 就会变为 resolved
  • reject(reason): 如果当前是 pendding 就会变为 rejected
  • 抛出异常: 如果当前是 pendding 就会变为 rejected

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

  • 当 promise 改变为对应状态时都会调用
// 1 和 2 的示例
const p = new Promise((resolve, reject) => {
	// resolve(1) // promise 变为resolved成功状态
	// reject(2) // promise 变为rejected 失败状态
	// throw new Error("出错了") // 抛出异常: promise 变为rejected 失败状态,reason 为抛出的 error
	throw 3 // 抛出异常: promise 变为rejected 失败状态,reason 为抛出的 3
})
p.then(
	(value) => {},
	(reason) => {
		// 会调用,输出:reason1 3
		console.log("reason1", reason)
	}
)
p.then(
	(value) => {},
	(reason) => {
		// 会调用,输出:reason2 3
		console.log("reason2", reason)
	}
)

3. 改变 promise 状态和指定回调函数谁先谁后?

  • 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
  • 如何先改状态再指定回调?
    1. 在执行器中直接调用 resolve()/reject()
    2. 延迟更长时间才调用 then()
  • 什么时候才能得到数据?
    1. 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
    2. 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
// 常规:先指定回调函数,后改变的状态
new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(1) // 2. 后改变的状态(同时指定数据),异步执行回调函数
	}, 1000)
}).then(
	// 1. 先指定回调函数,保存当前指定的回调函数
	(value) => {},
	(reason) => {
		console.log("reason1", reason)
	}
)

/* 如何先改变状态,后指定回调函数? */
// 方法一:直接编写
new Promise((resolve, reject) => {
	resolve(1) // 1. 先改变的状态(同时指定数据)
}).then(
	// 2. 后指定回调函数,异步执行回调函数
	(value) => {
		console.log("value2", value)
	},
	(reason) => {
		console.log("reason2", reason)
	}
)

// 方法二:异步回调时间比状态改变时间晚就行
const p = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(1) // 1. 先改变状态
	}, 1000)
})
// 2. 后指定回调函数,异步执行回调函数,时间比状态改变晚就行
setTimeout(() => {
	p.then(
		(value) => {
			console.log("value3", value)
		},
		(reason) => {
			console.log("reason3", reason)
		}
	)
}, 1100)

4. promise.then()返回的新 promise 的结果状态由什么决定?

  • 简单表达: 由 then()指定的回调函数执行的结果决定
  • 详细表达:
    1. 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
    2. 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
    3. 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
new Promise((resolve, reject) => {
	resolve(1)
})
	.then(
		(value) => {
			console.log("onResolved1()", value)
			// 这里返回决定了下一个then方法的回调函数,不写默认是返回undefined
			// return 2
			// return Promise.resolve(3)
			// return Promise.reject(4)
			// throw 5
		},
		(reason) => {
			console.log("onRejected1()", reason)
		}
	)
	.then(
		(value) => {
			console.log("onResolved2()", value)
		},
		(reason) => {
			console.log("onRejected2()", reason)
		}
	)
// onResolved1() 1
// onResolved2() undefined

5. promise 如何串连多个操作任务?

  • promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
  • 通过 then 的链式调用串连多个同步/异步任务
new Promise((resolve, reject) => {
	setTimeout(() => {
		console.log("执行异步任务1")
		resolve(1)
	}, 1000)
})
	.then((value) => {
		console.log("任务1的结果:", value)
		console.log("执行同步任务2")
		return 2
	})
	.then((value) => {
		console.log("任务2的结果:", value)

		// 异步需要返回新的promise
		return new Promise((resolve, reject) => {
			// 启动任务异步任务3
			setTimeout(() => {
				console.log("执行异步任务3")
				resolve(3)
			}, 1000)
		})
	})
	.then((value) => {
		console.log("任务3的结果:", value)
	})
// 执行异步任务1
// 任务1的结果: 1
// 执行同步任务2
// 任务2的结果: 2
// 执行异步任务3
// 任务3的结果: 3

6. promise 异常传透?

  • 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
  • 前面任何操作出了异常, 都会传到最后失败的回调中处理
new Promise((resolve, reject) => {
	reject(1)
})
	.then(
		(value) => {
			console.log("onResolved1()", value)
			return 2
		}
		// 不写就默认返回异常,向下抛
		// (reason) => {
		// 	throw reason
		// }
	)
	.then(
		(value) => {
			console.log("onResolved2()", value)
			return 3
		},
		(reason) => Promise.reject(reason)
	)
	.catch((reason) => {
		console.log("onRejected()", reason)
	})
// onRejected() 1

7. 中断 promise 链?

  • 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
  • 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
new Promise((resolve, reject) => {
	reject(1)
})
	.then((value) => {
		console.log("onResolved1()", value)
		return 2
	})
	.then((value) => {
		console.log("onResolved2()", value)
		return 3
	})
	.catch((reason) => {
		console.log("onRejected1()", reason)
		// 中断promise链
		return new Promise(() => {}) // 返回一个pending的promise
	})
	.then(
		(value) => {
			console.log("onResolved3()", value)
		},
		(reason) => {
			console.log("onRejected2()", reason)
		}
	)
// onRejected1() 1

# 手写 Promise

1. 整体结构

/**
 * 自定义Promise函数模块:IIFE
 */
;(function (window) {
	/**
	 * Promise构造函数
	 * excutor: 执行器函数(同步执行)
	 */
	function Promise(excutor) {}

	/**
	 * Promise原型对象的then()
	 * 指定成功和失败的回调函数
	 * 返回一个新的promise对象
	 * 返回promise的结果由onResolved/onRejected执行结果决定
	 */
	Promise.prototype.then = function (onResolved, onRejected) {}

	/**
	 * Promise原型对象的catch()
	 * 指定失败的回调函数
	 * 返回一个新的promise对象
	 */
	Promise.prototype.catch = function (onRejected) {}

	/**
	 * Promise函数对象的resolve()
	 * 返回一个指定value的成功的promise
	 */
	Promise.resolve = function (value) {}

	/**
	 * Promise函数对象的reject()
	 * 返回一个指定reason的失败的promise
	 */
	Promise.reject = function (reason) {}

	/**
	 * Promise函数对象的all()
	 * 返回一个promise,只有当所有promise都成功时才成功,否则只要有一个失败就失败
	 */
	Promise.all = function (promises) {}

	/**
	 * Promise函数对象的race()
	 * 返回一个promise,其结果由第一个完成的promise决定
	 */
	Promise.race = function (promises) {}

	// 向外暴露Promise函数
	window.Promise = Promise
})(window)

2. 函数版本的完整代码

/**
 * 自定义Promise函数模块:IIFE
 */
;(function (window) {
	const PENDING = "pending"
	const RESOLVED = "resolved"
	const REJECTED = "rejected"

	/**
	 * Promise构造函数
	 * excutor: 执行器函数(同步执行)
	 */
	function Promise(excutor) {
		// 将当前promise对象保存起来
		const self = this
		self.status = PENDING // 给promise对象指定status属性,初始值为pending
		self.data = undefined // 给promise对象指定一个用于存储结果数据的属性
		self.callbacks = [] // 每个元素的结构:{onResolved(){}, onRejected(){}}

		function resolve(value) {
			// 如果当前状态不是pending,直接结束
			if (self.status !== PENDING) {
				return
			}

			// 将状态改为resolved
			self.status = RESOLVED
			// 保存value数据
			self.data = value
			// 如果有待执行callback函数,立刻异步执行回调函数onResolved
			if (self.callbacks.length > 0) {
				// 放入队列中执行所有成功的回调
				setTimeout(() => {
					self.callbacks.forEach((callbacksObj) => {
						callbacksObj.onResolved(value)
					})
				})
			}
		}

		function reject(reason) {
			// 如果当前状态不是pending,直接结束
			if (self.status !== PENDING) {
				return
			}

			// 将状态改为resolved
			self.status = REJECTED
			// 保存value数据
			self.data = reason
			// 如果有待执行callback函数,立刻异步执行回调函数onRejected
			if (self.callbacks.length > 0) {
				// 放入队列中执行所有失败的回调
				setTimeout(() => {
					self.callbacks.forEach((callbacksObj) => {
						callbacksObj.onRejected(reason)
					})
				})
			}
		}

		// 立即同步执行excutor
		try {
			excutor(resolve, reject)
		} catch (error) {
			// 如果执行器抛出异常,promise对象变为rejected状态
			reject(error)
		}
	}

	/**
	 * Promise原型对象的then()
	 * 指定成功和失败的回调函数
	 * 返回一个新的promise对象
	 * 返回promise的结果由onResolved/onRejected执行结果决定
	 */
	Promise.prototype.then = function (onResolved, onRejected) {
		const self = this

		/* 指定回调函数的默认值(必须是函数) */
		// 指定默认的成功的回调
		onResolved =
			typeof onResolved === "function" ? onResolved : (value) => value
		// 指定默认的失败的回调(实现错误/异常穿透得关键点)
		onRejected =
			typeof onRejected === "function"
				? onRejected
				: (reason) => {
						// 后传递失败的reason,{throw reason} => 加大括号是因为throw左边不能return
						throw reason
				  }

		// 返回一个新的promise对象,根据执行结果,改变return得promise状态
		return new Promise((resolve, reject) => {
			/**
			 * 执行指定的回调函数
			 * 根据执行的结果改变return的promise的状态/数据
			 * @param {执行} callback
			 */
			function handle(callback) {
				/**
				 * 返回promise的结果由onResolved/onRejected执行结果决定
				 * 1、抛出异常,返回promise的结果为失败,reason为异常error
				 * 2、如果返回的是promise,返回promise的结果就是这个结果
				 * 3、如果返回的不是promise,返回promise为成功,value就是返回值
				 */
				try {
					const result = callback(self.data)
					if (result instanceof Promise) {
						// 2、如果返回的是promise,返回promise的结果就是这个结果
						// result.then(
						// 	// 当result成功时,让return的promise也成功
						// 	value => resolve(value),
						// 	// 当result失败时,让return的promise也失败
						// 	reason => reject(reason)
						// )
						result.then(resolve, reject)
					} else {
						// 3、如果返回的不是promise,返回promise为成功,value就是返回值
						resolve(result)
					}
				} catch (error) {
					// 1、抛出异常,返回promise的结果为失败,reason为异常error
					reject(error)
				}
			}
			// 当前promise的状态是resolved,异步执行onResolved并改变return得promise状态
			if (self.status === RESOLVED) {
				// 立即异步执行成功的回调函数
				setTimeout(() => {
					handle(onResolved)
				})
			} else if (self.status === REJECTED) {
				// 当前promise的状态是rejected,异步执行onRejected并改变return得promise状态
				// 立即异步执行失败的回调函数
				setTimeout(() => {
					handle(onRejected)
				})
			} else {
				// 当前promise的状态是pending
				// 将成功和失败的回调函数保存callbacks容器中缓存起来
				self.callbacks.push({
					onResolved() {
						handle(onResolved)
					},
					onRejected() {
						handle(onRejected)
					},
				})
			}
		})
	}

	/**
	 * Promise原型对象的catch()
	 * 指定失败的回调函数
	 * 返回一个新的promise对象
	 */
	Promise.prototype.catch = function (onRejected) {
		return this.then(undefined, onRejected)
	}

	/**
	 * Promise函数对象的resolve()
	 * 返回一个指定value的成功的promise
	 */
	Promise.resolve = function (value) {
		// 返回一个成功/失败的promise
		return new Promise((resolve, reject) => {
			if (value instanceof Promise) {
				// 使用value的结果作为promise的结果
				value.then(resolve, reject)
			} else {
				// value不是promise 》 promise变为成功,数据是value
				resolve(value)
			}
		})
	}

	/**
	 * Promise函数对象的reject()
	 * 返回一个指定reason的失败的promise
	 */
	Promise.reject = function (reason) {
		// 返回一个失败的promise
		return new Promise((resolve, reject) => {
			reject(reason)
		})
	}

	/**
	 * Promise函数对象的all()
	 * 返回一个promise,只有当所有promise都成功时才成功,否则只要有一个失败就失败
	 */
	Promise.all = function (promises) {
		// 用来保存所有成功value的数组
		const values = new Array(promises.length)
		// 用来保存成功的promise的数量
		let resolvedCount = 0
		// 返回一个新的promise
		return new Promise((resolve, reject) => {
			// 遍历获取每个promise的结果
			promises.forEach((p, index) => {
				// p.then(
				// 包一层,解决p不是promise的情况
				Promise.resolve(p).then(
					(value) => {
						// 成功的数量加1
						resolvedCount++
						// p成功,将成功的value保存values - 要保持顺序一致性
						values[index] = value

						// 如果全部成功了,将return的promise改变成功
						if (resolvedCount === promises.length) {
							resolve(values)
						}
					},
					(reason) => {
						// 只要有一个失败了,return的promise就失败
						reject(reason)
					}
				)
			})
		})
	}

	/**
	 * Promise函数对象的race()
	 * 返回一个promise,其结果由第一个完成的promise决定
	 */
	Promise.race = function (promises) {
		// 返回一个新的promise
		return new Promise((resolve, reject) => {
			// 遍历获取每个promise的结果
			promises.forEach((p, index) => {
				Promise.resolve(p).then(
					(value) => {
						// 一旦有成功的,将return变为成功
						resolve(value)
					},
					(reason) => {
						// 一旦有成功的,将return变为失败
						reject(reason)
					}
				)
			})
		})
	}

	/**
	 * 返回一个promise对象,他在指定的时间后才确定结果
	 */
	Promise.resolveDelay = function (value, time) {
		// 返回一个成功/失败的promise
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				if (value instanceof Promise) {
					// 使用value的结果作为promise的结果
					value.then(resolve, reject)
				} else {
					// value不是promise 》 promise变为成功,数据是value
					resolve(value)
				}
			}, time)
		})
	}

	/**
	 * 返回一个promise对象,他在指定的时间后才失败
	 */
	Promise.rejectDelay = function (reason, time) {
		// 返回一个失败的promise
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				reject(reason)
			}, time)
		})
	}

	// 向外暴露Promise函数
	window.Promise = Promise
})(window)

3. class 版本的完整代码

/**
 * 自定义Promise函数模块:IIFE
 */
;(function (window) {
	const PENDING = "pending"
	const RESOLVED = "resolved"
	const REJECTED = "rejected"

	/**
	 * 类版本
	 */
	class Promise {
		/**
		 * Promise构造函数
		 * excutor: 执行器函数(同步执行)
		 */
		constructor(excutor) {
			// 将当前promise对象保存起来
			const self = this
			self.status = PENDING // 给promise对象指定status属性,初始值为pending
			self.data = undefined // 给promise对象指定一个用于存储结果数据的属性
			self.callbacks = [] // 每个元素的结构:{onResolved(){}, onRejected(){}}

			function resolve(value) {
				// 如果当前状态不是pending,直接结束
				if (self.status !== PENDING) {
					return
				}

				// 将状态改为resolved
				self.status = RESOLVED
				// 保存value数据
				self.data = value
				// 如果有待执行callback函数,立刻异步执行回调函数onResolved
				if (self.callbacks.length > 0) {
					// 放入队列中执行所有成功的回调
					setTimeout(() => {
						self.callbacks.forEach((callbacksObj) => {
							callbacksObj.onResolved(value)
						})
					})
				}
			}

			function reject(reason) {
				// 如果当前状态不是pending,直接结束
				if (self.status !== PENDING) {
					return
				}

				// 将状态改为resolved
				self.status = REJECTED
				// 保存value数据
				self.data = reason
				// 如果有待执行callback函数,立刻异步执行回调函数onRejected
				if (self.callbacks.length > 0) {
					// 放入队列中执行所有失败的回调
					setTimeout(() => {
						self.callbacks.forEach((callbacksObj) => {
							callbacksObj.onRejected(reason)
						})
					})
				}
			}

			// 立即同步执行excutor
			try {
				excutor(resolve, reject)
			} catch (error) {
				// 如果执行器抛出异常,promise对象变为rejected状态
				reject(error)
			}
		}

		/**
		 * Promise原型对象的then()
		 * 指定成功和失败的回调函数
		 * 返回一个新的promise对象
		 * 返回promise的结果由onResolved/onRejected执行结果决定
		 */
		then(onResolved, onRejected) {
			const self = this

			// 指定回调函数的默认值(必须是函数)
			onResolved =
				typeof onResolved === "function" ? onResolved : (value) => value
			onRejected =
				typeof onRejected === "function"
					? onRejected
					: (reason) => {
							throw reason
					  }

			// 返回一个新的promise
			return new Promise((resolve, reject) => {
				/**
				 * 执行指定的回调函数
				 * 根据执行的结果改变return的promise的状态/数据
				 * @param {执行} callback
				 */
				function handle(callback) {
					/**
					 * 返回promise的结果由onResolved/onRejected执行结果决定
					 * 1、抛出异常,返回promise的结果为失败,reason为异常
					 * 2、如果返回的是promise,返回promise的结果就是这个结果
					 * 3、如果返回的不是promise,返回promise为成功,value就是返回值
					 */
					try {
						const result = callback(self.data)
						if (result instanceof Promise) {
							// 2、如果返回的是promise,返回promise的结果就是这个结果
							result.then(resolve, reject)
						} else {
							// 3、如果返回的不是promise,返回promise为成功,value就是返回值
							resolve(result)
						}
					} catch (error) {
						// 1、抛出异常,返回promise的结果为失败,reason为异常
						reject(error)
					}
				}
				// 当前promise的状态是resolved
				if (self.status === RESOLVED) {
					// 立即异步执行成功的回调函数
					setTimeout(() => {
						handle(onResolved)
					})
				} else if (self.status === REJECTED) {
					// 当前promise的状态是rejected
					// 立即异步执行失败的回调函数
					setTimeout(() => {
						handle(onRejected)
					})
				} else {
					// 当前promise的状态是pending
					// 将成功和失败的回调函数保存callbacks容器中缓存起来
					self.callbacks.push({
						onResolved() {
							handle(onResolved)
						},
						onRejected() {
							handle(onRejected)
						},
					})
				}
			})
		}

		/**
		 * Promise原型对象的catch()
		 * 指定失败的回调函数
		 * 返回一个新的promise对象
		 */
		catch(onRejected) {
			return this.then(undefined, onRejected)
		}

		/**
		 * Promise函数对象的resolve()
		 * 返回一个指定value的成功的promise
		 */
		static resolve(value) {
			// 返回一个成功/失败的promise
			return new Promise((resolve, reject) => {
				if (value instanceof Promise) {
					// 使用value的结果作为promise的结果
					value.then(resolve, reject)
				} else {
					// value不是promise 》 promise变为成功,数据是value
					resolve(value)
				}
			})
		}

		/**
		 * Promise函数对象的reject()
		 * 返回一个指定reason的失败的promise
		 */
		static reject(reason) {
			// 返回一个失败的promise
			return new Promise((resolve, reject) => {
				reject(reason)
			})
		}

		/**
		 * Promise函数对象的all()
		 * 返回一个promise,只有当所有promise都成功时才成功,否则只要有一个失败就失败
		 */
		static all(promises) {
			// 用来保存所有成功value的数组
			const values = new Array(promises.length)
			// 用来保存成功的promise的数量
			let resolvedCount = 0
			// 返回一个新的promise
			return new Promise((resolve, reject) => {
				// 遍历获取每个promise的结果
				promises.forEach((p, index) => {
					// p.then(
					// 包一层,解决p不是promise的情况
					Promise.resolve(p).then(
						(value) => {
							// 成功的数量加1
							resolvedCount++
							// p成功,将成功的value保存values - 要保持顺序一致性
							values[index] = value

							// 如果全部成功了,将return的promise改变成功
							if (resolvedCount === promises.length) {
								resolve(values)
							}
						},
						(reason) => {
							// 只要有一个失败了,return的promise就失败
							reject(reason)
						}
					)
				})
			})
		}

		/**
		 * Promise函数对象的race()
		 * 返回一个promise,其结果由第一个完成的promise决定
		 */
		static race(promises) {
			// 返回一个新的promise
			return new Promise((resolve, reject) => {
				// 遍历获取每个promise的结果
				promises.forEach((p, index) => {
					Promise.resolve(p).then(
						(value) => {
							// 一旦有成功的,将return变为成功
							resolve(value)
						},
						(reason) => {
							// 一旦有成功的,将return变为失败
							reject(reason)
						}
					)
				})
			})
		}

		/**
		 * 返回一个promise对象,他在指定的时间后才确定结果
		 */
		static resolveDelay(value, time) {
			// 返回一个成功/失败的promise
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					if (value instanceof Promise) {
						// 使用value的结果作为promise的结果
						value.then(resolve, reject)
					} else {
						// value不是promise 》 promise变为成功,数据是value
						resolve(value)
					}
				}, time)
			})
		}

		/**
		 * 返回一个promise对象,他在指定的时间后才失败
		 */
		static rejectDelay(reason, time) {
			// 返回一个失败的promise
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					reject(reason)
				}, time)
			})
		}
	}

	// 向外暴露Promise函数
	window.Promise = Promise
})(window)

# Generator

  • 阮老师 Generator
  • 概念
    1. ES6 提供的解决异步编程的方案之一
    2. Generator 函数是一个状态机,内部封装了不同状态的数据
    3. 用来生成遍历器对象
    4. 可暂停函数(惰性求值), yield 可暂停,next 方法可启动。每次返回的是 yield 后的表达式结果
  • 特点:
    1. function 与函数名之间有一个星号
    2. 内部用 yield 表达式来定义不同的状态
    3. generator 函数返回的是指针对象 iterator,而不会执行函数内部逻辑
    4. 调用 next 方法函数内部逻辑开始执行,遇到 yield 表达式停止,返回{value: yield 后的表达式结果/undefined, done: false/true}
    5. 再次调用 next 方法会从上一次停止时的 yield 处开始,直到最后
    6. yield 语句返回结果通常为 undefined, 当调用 next 方法时传参内容会作为启动时 yield 语句的返回值
/* 示例1 */
// function 与函数名之间有一个星号
function* myGenertor() {
	// 内部用yield表达式来定义不同的状态
	console.log("开始执行")

	let result = yield "hello" // 状态值为hello
	console.log("暂停后,再次执行")
	console.log(result)

	yield "genertor" // 状态值为generator
	console.log("执行完毕")
	return "返回的结果"
}
let mg = myGenertor() // 返回的是指针对象
console.log(mg.next())
console.log(mg.next("第一个yield的返回值"))
console.log(mg.next())
// 开始执行
// {value: "hello", done: false}
// 暂停后,再次执行
// 第一个yield的返回值
// {value: "genertor", done: false}
// 执行完毕
// {value: "返回的结果", done: true}

/* 示例2 */
// 对象的symbol.iterator属性  指向遍历器对象
let obj = { username: "kobe", age: 39 }
obj[Symbol.iterator] = function* myTest() {
	yield 1
	yield 2
	yield 3
}
for (const i of obj) {
	console.log(i)
}
// 1
// 2
// 3

# Async 和 Await

# Async 函数

  • async 函数的返回值为 promise 对象
  • promise 对象的结果由 async 函数执行的返回值决定
// async 函数的返回值是一个promise对象
// async 函数返回的promise的结果由函数执行的结果决定
async function fn1() {
	// return 1
	// throw 2
	// return Promise.reject(3)
	// return Promise.resolve(3)
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(4)
		}, 1000)
	})
}
// result 为promise对象
const result = fn1()
result.then(
	(value) => {
		console.log("onResolved()", value)
	},
	(reason) => {
		console.log("onRejected()", reason)
	}
)
// onResolved() 4

# Await 表达式

  • await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
  • 如果表达式是 promise 对象, await 返回的是 promise 成功的值
  • 如果表达式是其它值, 直接将此值作为 await 的返回值
  • await 必须写在 async 函数中, 但 async 函数中可以没有 await
  • 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 来捕获处理
function fn2() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			// resolve(5)
			reject(7)
		}, 1000)
	})
}

function fn4() {
	return 6
}

async function fn3() {
	try {
		// await 右侧表达式为promise,得到的结果就是promise成功的value
		const value = await fn2()
		console.log("value", value)
	} catch (error) {
		console.log("得到失败的结果", error)
	}

	// await 右侧表达式不是promise,得到的结果就是表达式它本身
	const value = await fn4()
	console.log("value", value)
}
fn3()
// 得到失败的结果 7
// value 6

# 宏任务和微任务

# 原理图

doubleLinkList

# 说明

# 示例

代码块内有效

// let 是在代码块内有效,var 是在全局范围内有效
{
	let a = 0
	var b = 1
}
a // ReferenceError: a is not defined
b // 1

不能重复声明

// let 只能声明一次 var 可以声明多次
let a = 1
let a = 2
var b = 3
var b = 4
a // Identifier 'a' has already been declared
b // 4

不存在变量提升

// let 不存在变量提升,var 会变量提升
console.log(a) // ReferenceError: Cannot access 'a' before initialization
let a = "apple"

console.log(b) //undefined
var b = "banana"

# const

  • 作用:定义一个只读变量,定义之后不能改变。意味着,一旦声明必须初始化,否则会报错
  • 特点:与 let 相似,多了一个不能修改
  • 应用:保存不用改变的数据,比如常量和引用地址不变的引用数据类型

基本用法

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

暂时性死区

var PI = "a"
if (true) {
	console.log(PI) // ReferenceError: Cannot access 'PI' before initialization
	const PI = "3.1415926"
}

ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错

# 模板字符串

  • 主要用于简化字符串的拼接,也可以来定义多行字符串
  • 模板字符串必须用 `` 包含
  • 变化的部分使用${xxx}定义
  • 模板字符串中的换行和空格都是会被保留的
let obj = {
	name: "test",
	age: 41,
}
// 不用模板字符串的拼接
console.log("我叫:" + obj.name + ", 我的年龄是:" + obj.age)
// 模板字符串的拼接
console.log(`我叫:${obj.name}, 我的年龄是:${obj.age}`))

# 解构赋值

  • 解构赋值是对赋值运算符的扩展
  • 是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值

# 数组解构

基本用法

let arr = ["abc", 23, true]
let [a, b, c, d] = ["abc", 1, true]
console.log(a, b, c, d) // abc 1 true undefined
// a = abc
// b = 1
// c = true
// d = undefined

可嵌套

let [a, [[b], c]] = [1, [[2], 3]]
console.log(a, b, c) // 1 2 3
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3]
console.log(a, b) // 1 3
// a = 1
// b = 3

不完全解构

let [a = 1, b] = []
console.log(a, b) // 1 undefined
// a = 1
// b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3]
console.log(a, b) // 1 [2, 3]
//a = 1
//b = [2, 3]

# 对象解构

基本用法

let { foo, bar } = { foo: "aaa", bar: "bbb" }
console.log(foo, bar)
// foo = 'aaa'
// bar = 'bbb'

let { baz: val } = { baz: "ddd" }
console.log(val)
// val = 'ddd'

剩余运算符

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }
console.log(a, b, rest)
// a = 10
// b = 20
// rest = {c: 30, d: 40}

形参赋值

function test({ name, age }) {
	console.log(name, age) // name 1
}
let obj = { name: "name", age: 1 }
test(obj)
// name = name
// age = 1

# 三点运算符

# 函数的不定参数

  • 三点不定参数也称为 rest(可变)参数
  • 用来取代函数的 arguments 但比 arguments 灵活,只能是最后部分形参参数
function foo(...args) {
	console.log(args) // 数组:[2, 65]
	// 数组可遍历
	args.forEach((item, index) => {
		console.log(item, index)
		// 2 0
		// 65 1
	})
}
foo(2, 65)

# 数组扩展运算符

  • 解构数组
  • 复制数组,浅拷贝
  • 合并数组
let arr = [1, 6]
let arr1 = [2, 3, 4, 5]
// 复制数组
console.log([...arr]) // [1, 6]
// 解构数组
console.log(...arr) // 1 2 3 4 5 6
// 合并数组
arr = [...arr, ...arr1]
console.log(arr) // [1, 2, 3, 4, 5, 6]

# 对象扩展运算符

  • 拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
  • 可用于合并两个对象
  • 此运算符属于浅拷贝,仅对引用数据类型的第一层进行了拷贝,再深就不会拷贝了
// 对象拷贝
let person = { name: "Amy", age: 15, num: { arr: [1, 2] } }
let someone = { ...person }
person.num.arr = [1]
// 浅拷贝:只拷贝了第一层引用数据类型
console.log(someone) // {name: "Amy", age: 15, num: { arr: [1]}}

// 可用于合并两个对象
let age = { age: 15 }
let name = { name: "Amy" }
let test = { ...age, ...name }
console.log(test) // {age: 15, name: "Amy"}

# 形参默认值

  • 当不传入参数的时候默认使用形参里的默认值
  • 只有在未传递参数,或者参数为 undefined 时,才会使用默认参数,null 值被认为是有效的值传递
  • 使用函数默认参数时,不允许有同名参数
function fn(x = 1, y = "y", z = "z", m = "m") {
	console.log(x, y, z, m) // x null z m
}
fn("x", null, undefined)

# 箭头函数

  • 作用: 定义匿名函数
  • 基本语法:
    1. 没有参数: () => console.log('xxxx')
    2. 一个参数: i => i+2 ()可以省略
    3. 大于一个参数: (i,j) => i+j
    4. 函数体不用大括号: 默认返回结果
    5. 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回
  • 箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象
  • 不可以作为构造函数,也就是不能使用 new 命令,否则会报错
// 形参的情况
// 1、没有形参的时候
let fun1 = () => console.log("我是箭头函数")
fun1()

// 2、只有一个形参的时候,()可以省略
let fun2 = (a) => console.log(a)
fun2("aaa")

// 3、两个及两个以上形参的时候,()不能省略
let fun3 = (x, y) => console.log(x, y)
fun3(22, 33)

// 函数体的情况
// 4、函数体只有一条语句或者表达式的时候,{}可以省略
// 》会自动返回语句执行的结果或表达式的结果
let fun4 = () => console.log("箭头函数")
fun4()
let fun5 = (x, y) => x + y
console.log(fun5(24, 36))

// 5、函数体不止一条语句或者是表达式的情况,{}不能省略
let fun6 = (x, y) => {
	console.log(x, y)
	return x + y
}
console.log(fun6(35, 49))

# 字符串扩展

  • includes(str) : 判断是否包含指定的字符串
  • startsWith(str) : 判断是否以指定字符串开头
  • endsWith(str) : 判断是否以指定字符串结尾
  • repeat(count) : 重复指定次数,返回新的字符串,表示将字符串重复指定次数返回
let str = "abcdefghhikkkk"
console.log(str.includes("t")) // false
console.log(str.includes("a")) // true
console.log(str.startsWith("a")) // true
console.log(str.endsWith("k")) // true
console.log(str.repeat(1)) // abcdefghhikkkk

# 数值扩展

  • 二进制与八进制数值表示法: 二进制用 0b, 八进制用 0o
  • Number.isFinite(i) : 判断是否是有限大的数
  • Number.isNaN(i) : 判断是否是 NaN
  • Number.isInteger(i) : 判断是否是整数
  • Number.parseInt(str) : 将字符串转换为对应的整数
  • Number.parseFloat(i):将字符串转换为对应的浮点数
  • Math.trunc(i) : 直接去除小数部分
console.log(0b1010) // 10
console.log(0o56) // 46
console.log(Number.isFinite(Infinity)) // false
console.log(Number.isNaN(NaN)) // true
console.log(Number.isInteger(1.0)) // true
console.log(Number.parseInt("123abc")) // 123
console.log(Number.parseFloat("123.45#")) // 123.45
console.log(Math.trunc(1.234)) // 1

# 数组扩展

  • Array.from(v): 将类数组对象或可遍历对象转换为真数组
  • Array.of(v1, v2, v3): 将一系列参数值转换成数组
  • find(): 找出第一个满足条件返回 true 的元素
  • findIndex(): 找出第一个满足条件返回 true 的元素下标
  • fill(): 用给定一定范围的值填充数组
  • copyWithin():将一定范围索引的数组元素修改为此数组另一指定范围索引的元素
  • entries(): 遍历键值对
  • keys(): 遍历键名
  • values():遍历键值
  • includes():数组是否包含指定的值
  • flat():将嵌套数组转为一维数组
// Array.from:将类数组转为数组
let arrayLike = {
	"0": "a",
	"1": "b",
	"2": "c",
	length: 3,
}
let arr2 = Array.from(arrayLike)
console.log(arr2) // ["a", "b", "c"]

// Array.of:参数值转为数组
let arr = Array.of(1, 4, "abc", true)
console.log(arr) // [1, 4, "abc", true]

// find:返回大于3的第一个元素
let arr3 = [2, 3, 4, 2, 3, 5]
let result3 = arr3.find((item, index) => {
	return item > 3
})
console.log(result3) // 4

// findIndex:返回大于3的第一个元素的下标值
let arr4 = [2, 3, 4, 2, 3, 5]
let result4 = arr4.findIndex((item, index) => {
	return item > 3
})
console.log(result4) // 2

// fill:用给定值填充数组
let arr5 = ["a", "b", "c"].fill(7)
console.log(arr5) //  [7, 7, 7]
// 参数1:用来填充的值
// 参数2:被填充的起始索引
// 参数3(可选):被填充的结束索引,默认为数组末尾
let arr6 = [1, 2, 3, 4].fill(0, 1, 2)
console.log(arr6.fill(0, 1, 2)) //[1, 0, 3, 4]

// copyWithin:一段元素修改为另一段元素
// 参数1:被修改的起始索引
// 参数2:被用来覆盖的数据的起始索引
// 参数3(可选):被用来覆盖的数据的结束索引,默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0, 2, 4)) // [3, 4, 3, 4]
// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)) // [1, 2, 1, 2]
console.log([1, 2, , 4].copyWithin(0, 2, 4)) // [, 4, , 4]

// entries:遍历键值对
for (let [key, value] of ["a", "b"].entries()) {
	console.log(key, value)
}
// 0 "a"
// 1 "b"

// keys:遍历键名
for (let key of ["a", "b"].keys()) {
	console.log(key)
}
// 0
// 1

// values:遍历键值
for (let value of ["a", "b"].values()) {
	console.log(value)
}
// "a"
// "b"

// includes:数组是否包含指定的值
// 参数1:包含的指定值
console.log([1, 2, 3].includes(1)) // true
// 参数2:可选,搜索的起始索引,默认为0
console.log([1, 2, 3].includes(1, 2)) // false

// flat:将嵌套数组转为一维数组
console.log([1, [2, 3]].flat()) // [1, 2, 3]
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)) // [1, 2, 3, [4, 5]]
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)) // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat()) // [1, 2, 3]

# 对象扩展

  • 对象属性和方法的简写
  • Object.is(value1, value2)
  • Object.assign(target, source_1, ···)
  • 直接操作 proto 属性
// 简化的对象写法
let x = 1
let y = 2
let point = {
	// 省略同名的属性值
	x,
	y,
	// 省略方法的function
	setX(x) {
		this.x = x
	},
}

// Object.is(): 用来比较两个值是否严格相等,与(===)基本类似
console.log(Object.is(0, -0)) // false
console.log(Object.is(NaN, NaN)) // true
Object.is("q", "q") // true
Object.is(1, 1) // true
Object.is([1], [1]) // false
Object.is({ q: 1 }, { q: 1 }) // false

// Object.assign(): 用于将源对象的所有可枚举属性复制到目标对象中
// assign 的属性拷贝是浅拷贝
let obj = {}
let obj1 = { username: "av", age: 42 }
let obj2 = { sex: "man" }
Object.assign(obj, obj1, obj2)
console.log(obj) // { age: 42, sex: "man", username: "av"}

//直接操作 **proto** 属性
let obj3 = {}
let obj4 = { qian: 50000 }
obj3.__proto__ = obj4
console.log(obj3) // {__proto__: { qian: 50000 }}
console.log(obj3.qian) // 50000

# Symbol

  • ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值
  • 它是 JavaScript 语言的第七种数据类型,已有:String, Number, boolean, null, undefined, 对象
  • 特点:
    1. Symbol 属性对应的值是唯一的,解决命名冲突问题
    2. Symbol 值不能与其他数据进行计算,包括同字符串拼串
    3. for in, for of 遍历时不会遍历 symbol 属性
// 普通用法,不能new,直接使用
console.log(Symbol()) // Symbol()
let sy = Symbol("KK")
console.log(sy) // Symbol(KK)

// 作为属性名
let symbol = Symbol()
let obj = { username: "kobe", age: 39 }
obj[symbol] = "hello"
console.log(obj) // {username: "kobe", age: 39, Symbol(): "hello"}

// 可以去定义成常量
const KEY = Symbol("key")
console.log(KEY) // Symbol(key)

# Set 和 Map

# Set

  • Set 对象用于存储任何类型的唯一值,无论是原始值或者是对象引用,都不可重复
  • Set 是一个容器,无序且不可重复的多个 value 的集合体
  • Set 一个构造函数,使用需要用 new

实例属性和方法

  • Set.prototype.constructor:构造函数,默认就是 Set 函数
  • Set.prototype.size:返回 Set 实例的成员总数
  • Set.prototype.add(value):添加某个值,返回 Set 结构本身
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为 Set 的成员
  • Set.prototype.clear():清除所有成员,没有返回值
  • Set.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员
// 创建实例,可以不传参
let set = new Set([1, 2, 3, 4, 5, 1, 2])
console.log(set) // Set(5) {1, 2, 3, 4, 5} 这里体现了值的唯一性

// size属性:返回长度
console.log(set.size) // 5

// add方法:新增
set.add(7)
console.log(set) // Set(6) {1, 2, 3, 4, 5, 6}

// delete方法:删除
console.log(set.delete(1)) // true
console.log(set) // Set(5) {2, 3, 4, 5, 7}

//has方法:判断有无某个元素
console.log(set.has(8)) // false
console.log(set.has(7)) // true

// clear方法:清除全部元素
set.clear()
console.log(set) // Set(0) {}

let set2 = new Set(["red", "green"])
// keys方法:返回键名的遍历器
console.log(set2.keys()) // SetIterator {"red", "green"}
for (let item of set2.keys()) {
	console.log(item)
}
// red
// green

// values方法:返回键值的遍历器
console.log(set2.values()) // SetIterator {"red", "green"}
for (let item of set2.values()) {
	console.log(item)
}
// red
// green

// entries方法:返回键值对的遍历器
console.log(set2.entries()) // SetIterator {"red" => "red", "green" => "green"}
for (let item of set2.entries()) {
	console.log(item)
}
// ["red", "red"]
// ["green", "green"]

// forEach方法:使用回调函数遍历每个成员
set2.forEach((value, key) => console.log(key + " : " + value))
// red : red
// green : green

# Map

  • Map 对象保存键值对,任何值(对象或者原始值) 都可以作为一个键或一个值
  • Map 是一个有序集合体,遍历顺序就是插入顺序
  • Map 和 Object 的区别
    1. 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值
    2. Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是
    3. Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算
    4. Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突

实例属性和方法

  • Map.prototype.constructor:构造函数,默认就是 Map 函数
  • Map.prototype.size:返回 Map 结构的成员总数
  • Map.prototype.set(key, value):添加某个值,返回 Map 结构本身
  • Map.prototype.get(key):根据 key 获取对应的键值,如果找不到 key,返回 undefined
  • Map.prototype.has(key):返回一个布尔值,表示某个键是否在当前 Map 对象之中
  • Map.prototype.delete(key):删除某个键,返回 true,如果删除失败,返回 false
  • Map.prototype.clear():清除所有成员,没有返回值
  • Map.prototype.keys():返回键名的遍历器
  • Map.prototype.values():返回键值的遍历器
  • Map.prototype.entries():返回键值对的遍历器
  • Map.prototype.forEach():遍历 Map 的所有成员
// 创建实例
const map = new Map([
	["name", "张三"],
	["title", "Author"],
])
console.log(map) // Map(2) {"name" => "张三", "title" => "Author"}

// size属性:返回长度
console.log(map.size) // 2

// add方法:新增
map.set("age", 18)
console.log(map) // Map(3) {"name" => "张三", "title" => "Author", "age" => 18}

// delete方法:删除
console.log(map.delete("title")) // true
console.log(map) // Map(2) {"name" => "张三", "age" => 18}

//has方法:判断有无某个元素
console.log(map.has("name")) // true

// clear方法:清除全部元素
map.clear()
console.log(map) // Map(0) {}

const map2 = new Map([
	["F", "no"],
	["T", "yes"],
])
// keys方法:返回键名的遍历器
console.log(map2.keys()) // MapIterator {"F", "T"}
for (let item of map2.keys()) {
	console.log(item)
}
// F
// T

// values方法:返回键值的遍历器
console.log(map2.values()) // MapIterator {"no", "yes"}
for (let item of map2.values()) {
	console.log(item)
}
// no
// yes

// entries方法:返回键值对的遍历器
console.log(map2.entries()) // MapIterator {"F" => "no", "T" => "yes"}
for (let item of map2.entries()) {
	console.log(item)
}
// ["F", "no"]
// ["T", "yes"]

// forEach方法:使用回调函数遍历每个成员
map2.forEach((value, key) => console.log(key + " : " + value))
// F : no
// T : yes

# Proxy 代理

# 语法

const p = new Proxy(target, handler)
  • target:一个目标对象(可以是任何类型的对象,包括数组,函数,另一个代理)
  • handler:一个对象,属性是函数,用于定义各种操作代理 p 的行为

# 简单 demo

let target = {
	name: "Tom",
	age: 24,
}
let handler = {
	get(target, key) {
		console.log("getting " + key)
		return target[key] // 不是target.key
	},
	set(target, key, value) {
		console.log("setting " + key)
		target[key] = value
	},
}
let proxy = new Proxy(target, handler)
proxy.name // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set
// getting name
// setting age
console.log(proxy) // Proxy {name: "Tom", age: 25}
  • target 对象可以为空,这时需要先设值,再取值
  • handler 对象也可以为空,相当于不设置拦截操作,直接访问目标对象

###实例方法

  • get(target, propKey, receiver):用于拦截 target 对象上 propKey 的读取操作
  • set(target, propKey, value, receiver):用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性,不可写且不可配置,那么 set 方法将不起作用
  • has(target, propKey):用于拦截 HasProperty 操作,即在判断 target 对象是否存在 propKey 属性时,会被这个方法拦截。此方法不判断一个属性是对象自身的属性,还是继承的属性。此方法不拦截 for ... in 循环
  • construct(target, args):用于拦截 new 命令。返回值必须为对象
  • deleteProperty(target, propKey):用于拦截 delete 操作,如果这个方法抛出错误或者返回 false ,propKey 属性就无法被 delete 命令删除
  • defineProperty(target, propKey, propDesc):用于拦截 Object.definePro 若目标对象不可扩展,增加目标对象上不存在的属性会报错;若属性不可写或不可配置,则不能改变这些属性
  • getOwnPropertyDescriptor(target, propKey):用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined
  • getPrototypeOf(target):主要用于拦截获取对象原型的操作,包括以下操作:
    1. Object.prototype.proto
    2. Object.prototype.isPrototypeOf()
    3. Object.getPrototypeOf()
    4. Reflect.getPrototypeOf()
    5. instanceof
  • isExtensible(target):用于拦截 Object.isExtensible 操作。该方法只能返回布尔值,否则返回值会被自动转为布尔值
  • ownKeys(target):用于拦截对象自身属性的读取操作,主要包括以下操作:
    1. Object.getOwnPropertyNames()
    2. Object.getOwnPropertySymbols()
    3. Object.keys()
    4. or...in
  • preventExtensions(target): 拦截 Object.preventExtensions 操作。该方法必须返回一个布尔值,否则会自动转为布尔值
  • setPrototypeOf: 主要用来拦截 Object.setPrototypeOf 方法。返回值必须为布尔值,否则会被自动转为布尔值
  • Proxy.revocable():用于返回一个可取消的 Proxy 实例
  • apply(target, ctx, args):用于拦截函数的调用、call 和 reply 操作。target 表示目标对象,ctx 表示目标对象上下文,args 表示目标对象的参数数组

# Reflect

  • Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法
  • Reflect 不是一个构造函数,因此它是不能用 new 构造的

###实例方法

  • Reflect.get(target, name, receiver):用于查找并返回 target 对象的 name 属性
  • Reflect.set(target, name, value, receiver):将 target 的 name 属性设置为 value。返回值为 boolean ,true 表示修改成功,false 表示失败。当 target 为不存在的对象时,会报错
  • Reflect.deleteProperty(target, property):是 delete target[property] 的函数化,用于删除 target 对象的 property 属性,返回值为 boolean。如果 target 不是对象则会报错 TypeError
  • Reflect.construct(target, args):等同于 new target(...args)
  • Reflect.getPrototypeOf(target):用于读取 target 的 proto 属性。在 target 不是对象时不会像 Object 一样把 target 转为对象,而是会报错
  • Reflect.setPrototypeOf(obj, newProto):用于设置目标对象的 prototype
  • Reflect.apply(func, thisArg, args):等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函数;thisArg 表示目标函数绑定的 this 对象;args 表示目标函数调用时传入的参数列表,可以是数组或类似数组的对象。若目标函数无法调用,会抛出 TypeError
  • Reflect.defineProperty(target, propertyKey, attributes):用于为目标对象定义属性。如果 target 不是对象,会抛出错误
  • Reflect.getOwnPropertyDescriptor(target, propertyKey):用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时,会抛出错误表示参数非法,不会将非对象转换为对象
  • Reflect.isExtensible(target): 用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象,会抛出错误
  • Reflect.preventExtensions(target): 用于让 target 对象变为不可扩展。如果 target 参数不是对象,会抛出错误
  • Reflect.ownKeys(target):用于返回 target 对象的所有属性,等同于 Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和

# Iterator

# 概念

iterator(迭代器)是一种接口机制,为各种不同的数据结构提供统一的访问机制

# 作用

  • 为各种数据结构,提供一个统一的、简便的访问接口
  • 使得数据结构的成员能够按某种次序排列
  • ES6 创造了一种新的遍历命令 for...of 循环,Iterator 接口主要供 for...of 消费

# 工作原理

  1. 创建一个指针对象(遍历器对象),指向数据结构的起始位置
  2. 第一次调用 next 方法,指针自动指向数据结构的第一个成员
  3. 接下来不断调用 next 方法,指针会一直往后移动,直到指向最后一个成员
  4. 每调用 next 方法返回的是一个包含 value 和 done 的对象,{value: 当前成员的值,done: 布尔值}
  5. value 表示当前成员的值,done 对应的布尔值表示当前的数据的结构是否遍历结束
  6. 当遍历结束的时候返回的 value 值是 undefined,done 值为 false
// iterator迭代器原理代码
// 模拟指针对象(遍历器对象)
function myIterator(arr) {
	// 记录指针的位置
	let nextIndex = 0
	// iterator接口
	return {
		// 遍历器对象
		next: function () {
			return nextIndex < arr.length
				? {
						value: arr[nextIndex++],
						done: false,
				  }
				: {
						value: undefined,
						done: true,
				  }
		},
	}
}

// 准备一个数组
let arr = [1, 4, 5, "a"]
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next()) // {done: false, value: 1}
console.log(iteratorObj.next()) // {done: false, value: 4}
console.log(iteratorObj.next()) // {done: false, value: 5}
console.log(iteratorObj.next()) // {done: false, value: "a"}
console.log(iteratorObj.next()) // {done: true, value: undefined}

# 可迭代的原生数据结构

  1. Aarray
  2. String
  3. arguments
  4. Set
  5. Map
  6. NodeList
// 将iterator接口部署到指定的数据类型上,可以使用for  of  去循环遍历
// 数组
let arr = [1, 4, 5, "a"]
for (const i of arr) {
	console.log(i)
}

// 字符串
let str = "abcdefg"
for (const i of str) {
	console.log(i)
}

// arguments
function fun() {
	for (const i of arguments) {
		console.log(i)
	}
}
fun(1, 2, 3, "abc")

# for ... of 原理

  • 对象不能使用 for of 遍历
  • 等同于在指定的数据内结构上部署了 iterator 接口
  • 当使用 for of 去遍历某一个数据结构的时候,首先去找 Symbol.iterator,找到了就去遍历
  • 如果没有找到的话不能遍历,就报错:XX is not iterable
// Symbol.iterator 的原理
let targetData = {
	[Symbol.iterator]: function () {
		// 记录指针的位置
		let nextIndex = 0
		// iterator接口
		return {
			// 遍历器对象
			next: function () {
				return nextIndex < this.length
					? {
							value: this[nextIndex++],
							done: false,
					  }
					: {
							value: undefined,
							done: true,
					  }
			},
		}
	},
}

# 三点运算符和 yield*

  • 使用三点运算符,解构赋值,默认去调用 iterator 接口
  • yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口
// 使用三点运算符,解构赋值,默认去调用iterator接口
let arr0 = [1, 6]
let arr1 = [2, 3, 4, 5]
arr0 = [1, ...arr1, 6]
console.log(arr0) // [1, 2, 3, 4, 5, 6]
console.log(...arr0) // 1 2 3 4 5 6

// yield*
let generator = function* () {
	yield 1
	yield* [2]
	yield 3
}
var iterator = generator()
console.log(iterator.next()) // {value: 1, done: false}
console.log(iterator.next()) // {value: 2, done: false}
console.log(iterator.next()) // {value: 3, done: false}
console.log(iterator.next()) // {value: undefined, done: true}

# Class

  1. 通过 class 定义类/实现类的继承
  2. 在类中通过 constructor 定义构造方法
  3. 通过 static 来定义静态方法
  4. 通过 new 来创建类的实例
  5. 通过 extends 来实现类的继承
  6. 通过 super 调用父类的构造方法
  7. 重写从父类中继承的一般方法
// 定义人物方法类
class Person {
	// 类的构造方法
	constructor(name, age) {
		this.name = name
		this.age = age
	}
	// 类的一般方法
	showName() {
		console.log("调用父类的方法")
		console.log(this.name)
	}
	// 类的静态方法-可以被继承
	static hello() {
		console.log("静态方法")
	}
}
let person = new Person("kobe", 39)
console.log(person)
person.showName()

// 子类继承父类
class Son extends Person {
	constructor(name, age, salary) {
		super(name, age) // 调用父类的构造方法
		this.salary = salary
	}
	// 父类的方法重写
	showName() {
		console.log("调用子类的方法")
		console.log(this.name, this.salary)
	}
}
let son = new Son("wade", 36, 1000000)
console.log(son)
son.showName()

# Module

请移步模块化章节

# Promise

请移步异步章节

# Generator

请移步异步章节

# async

请移步异步章节