住房和城建设网站,湖南建设教育网站,郑州做网站加密的公司,摇钱树手机论坛网站一、迭代器与可迭代对象
1.什么是迭代器
迭代器#xff08;iterator#xff09;#xff0c;使用户在容器对象#xff08;container#xff0c;例如链表或数组#xff09;上遍访的对象#xff0c;使用该接口无需关心对象的内部实现细节。
其行为像数据库中的光标…一、迭代器与可迭代对象
1.什么是迭代器
迭代器iterator使用户在容器对象container例如链表或数组上遍访的对象使用该接口无需关心对象的内部实现细节。
其行为像数据库中的光标迭代器最早出现在1974年设计的CLU编程语言中在各种编程语言的实现中迭代器的实现方式各不相同但是基本都有迭代器比如Java、Python等
从迭代器的定义我们可以看出来迭代器是帮助我们对某个数据结构进行遍历的对象。
在JavaScript中迭代器也是一个具体的对象这个对象需要符合迭代器协议iterator protocol
迭代器协议定义了产生一系列值无论是有限还是无限个的标准方式在JavaScript中这个标准就是一个特定的next方法
next方法有如下的要求
一个无参数或者一个参数的函数返回一个应当拥有以下两个属性的对象doneboolean 如果迭代器可以产生序列中的下一个值则为 false。这等价于没有指定 done 这个属性。如果迭代器已将序列迭代完毕则为 true。这种情况下value 是可选的如果它依然存在即为迭代结束之后的默认返回值。 value 迭代器返回的任何 JavaScript 值。done 为 true 时可省略。
const names [abc, cba, nba]// 给数组names创建一个迭代器(迭代器: names的跌大气)
let index 0
const namesIterator {next: function() {// done: Boolean// value: 具体值/undefinedif (index names.length) {return { done: false, value: names[index] }} else {return { done: true }}}
}console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())// 数组nums
const nums [100, 24, 55, 66, 86]let indexNum 0
const numsIterator {next: function() {// done: Boolean// value: 具体值/undefinedif (indexNum nums.length) {return { done: false, value: nums[indexNum] }} else {return { done: true }}}
}创建数组迭代器
const names [abc, cba, nba]
const nums [100, 24, 55, 66, 86]// 封装一个函数
function createArrayIterator(arr) {let index 0return {next: function() {if (index arr.length) {return { done: false, value: arr[index] }} else {return { done: true }}}}
}const namesIterator createArrayIterator(names)
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())const numsIterator createArrayIterator(nums)
console.log(numsIterator.next())
console.log(numsIterator.next())
console.log(numsIterator.next())
console.log(numsIterator.next())
console.log(numsIterator.next())
console.log(numsIterator.next())2.可迭代对象
但是上面的代码整体来说看起来是有点奇怪的
我们获取一个数组的时候需要自己创建一个index变量再创建一个所谓的迭代器对象事实上我们可以对上面的代码进行进一步的封装让其变成一个可迭代对象
什么又是可迭代对象呢
它和迭代器是不同的概念当一个对象实现了iterable protocol协议时它就是一个可迭代对象这个对象的要求是必须实现 iterator 方法在代码中我们使用 Symbol.iterator 访问该属性
当然我们要问一个问题我们转成这样的一个东西有什么好处呢
当一个对象变成一个可迭代对象的时候就可以进行某些迭代操作比如 for…of 操作时其实就会调用它的 iterator 方法
const iterableObj {friends: [Kobe, Yaoming, James],[Symbol.iterator]: function () {let index 0return {next: () {if (index this.friends.length) {return {done: false, value: this.friends[index]}} else {return {done: true}}}}}
}
for (const item of iterableObj) {console.log(item)
}
const objIterator iterableObj[Symbol.iterator]()
console.log(objIterator.next())
console.log(objIterator.next())优化版本
const info {name: zhangsan,age: 18,height: 1.88,[Symbol.iterator]: function () {let index 0const entries Object.entries(this)const iterator {next: function () {if (index entries.length) {return {done: false, value: entries[index]}} else {return {done: true}}}}return iterator}
}3.原生迭代器对象
事实上我们平时创建的很多原生对象已经实现了可迭代协议会生成一个迭代器对象的
String、Array、Map、Set、arguments对象、NodeList集合
// 1.数组
// const names [abc, cba, nba]
// for (const name of names) {
// console.log(name)
// }
// console.log(names[Symbol.iterator]())// 2.Set
// const set new Set([abc, cba, nba])
// for (const item of set) {
// console.log(item)
// }
// const setIterator set[Symbol.iterator]()
// console.log(setIterator.next())
// console.log(setIterator.next())
// console.log(setIterator.next())
// console.log(setIterator.next())// 3.arguments
function foo() {for (const arg of arguments) {console.log(arg)}
}foo(123, 321, 111, 222)4.可迭代对象的应用
那么这些东西可以被用在哪里呢
JavaScript中语法for-of、展开语法spread syntax、yield*后面讲、解构赋值Destructuring_assignment创建一些对象时new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);一些方法的调用Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);
// 1.数组
// const names [abc, cba, nba]
// for (const name of names) {
// console.log(name)
// }
// console.log(names[Symbol.iterator]())// 2.Set
// const set new Set([abc, cba, nba])
// for (const item of set) {
// console.log(item)
// }
// const setIterator set[Symbol.iterator]()
// console.log(setIterator.next())
// console.log(setIterator.next())
// console.log(setIterator.next())
// console.log(setIterator.next())// 3.arguments
function foo() {for (const arg of arguments) {console.log(arg)}
}foo(123, 321, 111, 222)二、自定义类的迭代器
1.自定义类的迭代
在前面我们看到Array、Set、String、Map等类创建出来的对象都是可迭代对象
在面向对象开发中我们可以通过class定义一个自己的类这个类可以创建很多的对象如果我们也希望自己的类创建出来的对象默认是可迭代的那么在设计类的时候我们就可以添加上 iterator 方法
案例创建一个classroom的类
教室中有自己的位置、名称、当前教室的学生这个教室可以进来新学生push创建的教室对象是可迭代对象
class Classroom {constructor(position, name, studentList) {this.position positionthis.name namethis.studentList studentList}push(student) {this.studentList.push(student)}[Symbol.iterator]() {let index 0const iterator {next: () {if (index this.studentList.length) {return {done: false, value: this.studentList[index]}} else {return {done: true}}}}return iterator}}const classroom new Classroom(二楼, 高三二班, [张三, 李四, 王五])
classroom[Symbol.iterator]()
for (const stu of classroom) {console.log(stu)
}三、迭代器的中断
迭代器在某些情况下会在没有完全迭代的情况下中断
比如遍历的过程中通过break、return、throw中断了循环操作比如在解构的时候没有解构所有的值
那么这个时候我们想要监听中断的话可以添加return方法
class Classroom {constructor(position, name, studentList) {this.position positionthis.name namethis.studentList studentList}push(student) {this.studentList.push(student)}[Symbol.iterator]() {let index 0const iterator {next: () {if (index this.studentList.length) {return {done: false, value: this.studentList[index]}} else {return {done: true}}},return() {console.log(我被中断啦)return {done: true}}}return iterator}}const classroom new Classroom(二楼, 高三二班, [张三, 李四, 王五])
classroom[Symbol.iterator]()
for (const stu of classroom) {console.log(stu)if (stu 李四) {break}
}四、生成器的理解和作用
1.什么是生成器
生成器是ES6中新增的一种函数控制、使用的方案它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
平时我们会编写很多的函数这些函数终止的条件通常是返回值或者发生了异常。
生成器函数也是一个函数但是和普通的函数有一些区别 首先生成器函数需要在function的后面加一个符号* 其次生成器函数可以通过yield关键字来控制函数的执行流程 最后生成器函数的返回值是一个Generator生成器 生成器事实上是一种特殊的迭代器MDNInstead, they return a special type of iterator, called a Generator.
/*生成器函数: 1.function后面会跟上符号: *2.代码的执行可以被yield控制3.生成器函数默认在执行时, 返回一个生成器对象* 要想执行函数内部的代码, 需要生成器对象, 调用它的next操作* 当遇到yield时, 就会中断执行*/// 1.定义了一个生成器函数
function* foo() {console.log(1111)console.log(2222)yieldconsole.log(3333)console.log(4444)yieldconsole.log(5555)console.log(6666)
}// 2.调用生成器函数, 返回一个 生成器对象
const generator foo()
// 调用next方法
generator.next()
generator.next()
generator.next()2.生成器传递参数 – next函数
函数既然可以暂停来分段执行那么函数应该是可以传递参数的我们是否可以给每个分段来传递参数呢
答案是可以的我们在调用next函数的时候可以给它传递参数那么这个参数会作为上一个yield语句的返回值注意也就是说我们是为本次的函数代码块执行提供了一个值
function* foo (param) {const value1 yield param 111const value2 yield value1 222const value3 yield value2 333}const f1 foo(abc)
const result1 f1.next()
console.log(result1.value)// abc111
const result2 f1.next(result1.value)
console.log(result2.value)// abc111222
const result3 f1.next(result2.value)
console.log(result3.value)// abc111222333
console.log(f1.next())3.生成器提前结束 – return函数
还有一个可以给生成器函数传递参数的方法是通过return函数
return传值后这个生成器函数就会结束之后调用next不会继续生成值了
function* foo2 () {const value1 yield 111console.log(value1 value1)const value2 yield value1const value3 yield value2
}
const f2 foo2()
console.log(f2.next())
console.log(f2.return(123))
console.log(f2.next())4.生成器抛出异常 – throw函数
除了给生成器函数内部传递参数之外也可以给生成器函数内部抛出异常
抛出异常后我们可以在生成器函数中捕获异常但是在catch语句中不能继续yield新的值了但是可以在catch语句外使用yield继续中断函数的执行
function* foo3 () {const value1 yield 111console.log(value1 value1)const value2 yield value1const value3 yield value2
}
const f2 foo2()
console.log(f2.next())
console.log(f2.throw(new Error(next2 throw error)))
console.log(f2.next())5.生成器替代迭代器
我们发现生成器是一种特殊的迭代器那么在某些情况下我们可以使用生成器来替代迭代器
// 1.对之前的代码进行重构(用生成器函数)
const names [abc, cba, nba]
const nums [100, 22, 66, 88, 55]function* createArrayIterator(arr) {for (let i 0; i arr.length; i) {yield arr[i]}// yield arr[0]// yield arr[1]// yield arr[2]// return undefined
}// const namesIterator createArrayIterator(names)
// console.log(namesIterator.next())
// console.log(namesIterator.next())
// console.log(namesIterator.next())
// console.log(namesIterator.next())// const numsIterator createArrayIterator(nums)
// console.log(numsIterator.next())
// console.log(numsIterator.next())
// console.log(numsIterator.next())
// console.log(numsIterator.next())
// console.log(numsIterator.next())
// console.log(numsIterator.next())// 2.生成器函数, 可以生成某个范围的值
// [3, 9)
function* createRangeGenerator(start, end) {for (let i start; i end; i) {yield i}
}const rangeGen createRangeGenerator(3, 9)
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())
console.log(rangeGen.next())事实上我们还可以使用yield*来生产一个可迭代对象
这个时候相当于是一种yield的语法糖只不过会依次迭代这个可迭代对象每次迭代其中的一个值
// 1.yield*替换之前的方案
const names [abc, cba, nba]
const nums [100, 22, 66, 88, 55]function* createArrayIterator(arr) {yield* arr
}const namesIterator createArrayIterator(names)
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())yield替换类中的实现
class Classroom {constructor(position, name, studentList) {this.position positionthis.name namethis.studentList studentList}push(student) {this.studentList.push(student)}*[Symbol.iterator]() {yield* this.studentList}}const classroom new Classroom(二楼, 高三二班, [张三, 李四, 王五])
classroom[Symbol.iterator]()
for (const stu of classroom) {console.log(stu)
}五、异步处理方案
1.异步处理方案
学完了我们前面的Promise、生成器等我们目前来看一下异步代码的最终处理方案。
案例需求
我们需要向服务器发送网络请求获取数据一共需要发送三次请求第二次的请求url依赖于第一次的结果第三次的请求url依赖于第二次的结果依次类推
// 封装请求的方法: url - promise(result)
function requestData(url) {return new Promise((resolve, reject) {setTimeout(() {resolve(url)}, 2000)})
}
// 方式一: 层层嵌套(回调地狱 callback hell)
function getData() {// 1.第一次请求requestData(why).then(res1 {console.log(第一次结果:, res1)// 2.第二次请求requestData(res1 kobe).then(res2 {console.log(第二次结果:, res2)// 3.第三次请求requestData(res2 james).then(res3 {console.log(第三次结果:, res3)})})})
}
// 方式二: 使用Promise进行重构(解决回调地狱)
// 链式调用
function getData() {requestData(why).then(res1 {console.log(第一次结果:, res1)return requestData(res1 kobe)}).then(res2 {console.log(第二次结果:, res2)return requestData(res2 james)}).then(res3 {console.log(第三次结果:, res3)})
}2.Generator方案
但是上面的代码其实看起来也是阅读性比较差的有没有办法可以继续来对上面的代码进行优化呢
使用生成器
function requestUrl(url) {return new Promise((resolve, reject) {setTimeout(() {console.log(发送请求到 url)resolve(url/abc)}, 3000);})
}function* getList(url) {const result1 yield requestUrl(url)const result2 yield requestUrl(result1)const result3 yield requestUrl(result2)}const listGenerator getList(baidu)
listGenerator.next().value.then(res {listGenerator.next(res).value.then(res {listGenerator.next(res).value.then(res {console.log(最终的响应结果 res)})})
})3.自动执行generator函数
目前我们的写法有两个问题
第一我们不能确定到底需要调用几层的Promise关系第二如果还有其他需要这样执行的函数我们应该如何操作呢
所以我们可以封装一个工具函数execGenerator自动执行生成器函数
// 自动化执行生成器函数(了解)
function execGenFn(genFn) {// 1.获取对应函数的generatorconst generator genFn()// 2.定义一个递归函数function exec(res) {// result - { done: true/false, value: 值/undefined }const result generator.next(res)if (result.done) returnresult.value.then(res {exec(res)})}// 3.执行递归函数exec()
}
