迭代器
这里先来做一个小的demo，假设要遍历一个数组，拿到数组的元素，该怎么做，会敲代码的肯定想到了循环，有js基础的肯定想到了for。of 方法，但是这些方法都不能很好的控制你要到哪一步，如果要精确的控制循环到哪一个步骤，循环的方法就有些吃力，这里就是迭代器要解决的问题，迭代器能够很好的控制每一步骤的生成，下面做一个demo来控制步骤执行
const names = ['asd', 'sd', 'reg', 'vdvs', 'fas']; //遍历的数组
let index = 0;
const nameIterrator = {
next: function () { //next迭代的方法，控制每一步骤的执行
if (index < names.length) { // 数组没有遍历完进入
// 返回一个对象，对象中包含数组的元素和是否遍历完成的信息
return { done: false, value: names[index++] };
}
//遍历完成，done表示遍历完成，value的值为undefined
return { done: true, value: undefined };
},
};
console.log(nameIterrator.next()); //{ done: false, value: 'asd' }
console.log(nameIterrator.next());//{ done: false, value: 'sd' }
console.log(nameIterrator.next());//{ done: false, value: 'reg' }
console.log(nameIterrator.next());//{ done: false, value: 'vdvs' }
console.log(nameIterrator.next());//{ done: false, value: 'fas' }
console.log(nameIterrator.next());//{ done: true, value: undefined }
在上列中可以看到，没调用一次next方法，数组往下遍历一次，这样就可以精确控制每一步骤的执行，可以将上面的方法封装为一个函数，让方法可以遍历不同的数组
const name = ['asd', 'vds', 'fesd', 'tbb', 'wrew'];
const arr = [1, 5, 7, 2, 9, 6];
//迭代器函数
function createItertor(arr) {
let index = 0;
return {
next() {
if (index < arr.length) {
return { done: false, value: arr[index++] };
}
return { done: true, value: undefined };
},
};
}
//创建不同的迭代函数
const Itertor = createItertor(name);
const Aitertor = createItertor(arr);
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
还可以来实现一个对象的迭代，我们都知道for of 是不能迭代对象的元素，但是有迭代器的话就可以将不能迭代的对象也能用for of 方法，这是因为对象的内部没有实现[Symbol.iterator]方法，数组和字符串都实现了这个方法，所以只要在对象中也实现这个方法，那么对象就可以迭代了
const iterator = {
names: ['asv', 'grs', 'rbt', 'fa'],
//这里用了symbol的迭代器方法，每次for of 进行遍历的时候都会找这个方法
//只要是实现了 [Symbol.iterator]方法就可以迭代
[Symbol.iterator]: function () {
let index = 0;
return {
next: () => {
if (index < this.names.length) {
return { done: false, value: this.names[index++] };
} else {
return { done: true, value: undefined };
}
},
};
},
};
const iterator1 = iterator[Symbol.iterator]();
console.log(iterator1.next()); //可以next方法
for (let item of iterator) { //也可以用for of 方法
console.log(item);
}
还可以实现一个类的迭代
class Room {
constructor(stu) {
this.stu = stu;
}
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.stu.length) {
return { done: false, value: this.stu[index++] };
} else {
return { done: true, value: undefined };
}
},
//提前停止的方法
return: () => {
console.log('迭代器提前终止了');
return { done: true, value: undefined };
},
};
}
}
//类的内部实现一个可迭代的方法
const room = new Room(['asd', 'asv', 'fvds']);
for (let item of room) {
console.log(item);
if (item === 'asv') break;
}
生成器
在上面的代码中next函数的实现是迭代器的核心，但是每次都要手动实现，生成器的出现就是为了更简单的使用迭代器
//函数的后面接一个*，表示是一个生成器函数
function* foo() {
console.log('start');
let value1 = 200;
console.log('1', value1);
yield value1; //yield表示，next在哪一行停止，可以理解为打了一个断点，用next执行下一个断点
let value2 = 300;
console.log('2', value2);
yield value2;
let value3 = 500;
console.log('3', value3);
yield value3;
console.log('end');
return 'end';
}
const fo = foo();
console.log(fo.next()); //{ value: 200, done: false }
//console.log(fo.next());
// console.log(fo.next());
// console.log(fo.next());
生成器的next还可以传入参数，传入的参数在yeild的返回值中
function* foo(num) {
console.log('start');
const value1 = 100 * num;
console.log('1', value1);
const n = yield value1;
const value2 = 200 * n;
console.log('2', value2);
const m = yield value2;
const value3 = 300 * m;
console.log('3', value3);
try {
const l = yield value3;
console.log('yield返回值', l);
} catch (error) {
console.log(error);
}
const value4 = 200;
console.log('4', value4);
const t = yield value2;
const value5 = 200 * t;
console.log('5', value5);
const k = yield value5;
console.log('end');
}
const iterator = foo(10);
//next传的参数在yield返回值中
console.log(iterator.next(5));
console.log(iterator.next(10));
console.log(iterator.next(20));
//return中止内部的执行,可以传入参数,在yield的返回值中,执行本次yeild终止
//console.log(iterator.return(36));
//throw抛出异常,传递的参数可以在trycatch中接收错误信息中,在下一个yeild终止
console.log(iterator.throw('err message'));
可以用生成器来替代迭代器使用
//函数
function* iterator(arr) {
//写法一
let index = 0;
return {
next: function () {
if (index < arr.length) {
return { done: false, value: arr[index++] };
} else {
return { done: true, value: undefined };
}
},
};
//写法二
for (const item of arr) {
await item;
}
//写法三:yeild* 后面跟上一个可迭代对象
yield* arr;
}
//类
class Room {
constructor(room) {
this.room = room;
}
*[Symbol.iterator]() {
yield* this.room;
}
}
const room = new Room(['asv', 'fdev', 'ebrv', 'vds']);
for (let item of room) {
console.log(item);
}
async await
在了解async await的原理之前，先来知道为什么要这个两个关键字，我们都知道async await是用来做异步请求的，在没有这个关键字前，异步的请求是怎么来实现的
先用setTimeout来模拟一下网络请求,每次请求加上一个字符串
function requestData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(url);
}, 1000);
});
}
回调调用
requestData('aaa').then((res) => {
requestData(res + 'bbb').then((res) => {
requestData(res + 'ccc').then((res) => {
console.log(res);
});
});
});
调用的次数一多的话，就会造成回调地狱，而且代码也不够简洁
链式调用
requestData('aaa')
.then((res) => {
return requestData(res + 'bbb');
})
.then((res) => {
return requestData(res + 'ccc');
})
.then((res) => {
console.log(res);
});
没有回调地狱了，但是代码不够简洁，次数一多的话还是有大量冗余代码
promise + 生成器
function* getData() {
const res1 = yield requestData('aaa');
const res2 = yield requestData(res1 + 'bbb');
const res3 = yield requestData(res2 + 'ccc');
console.log(res3);
}
const generator = getData()
//调用next方法
generator.next().value.then(res => {
generator.next(res).value.then(res => {
generator.next(res).value.then(res => {
generator.next(res)
})
})
})
这样执行的请求就非常的简洁，但是需要手动来调用next方法，增加了额外的开销，所以，为了解决这个额外的开销，async await 就出来了,只需要在函数的前面加上async ，在要进行请求语句前面加上await就可以实现异步请求了，还不用手动调用next方法，如果看懂了上面的代码的话，这里就很好理解async await的原理了，这个其实就是promise加生成器的语法糖
async function getData() {
const res1 = await requestData("why")
const res2 = await requestData(res1 + "aaa")
const res3 = await requestData(res2 + "bbb")
const res4 = await requestData(res3 + "ccc")
console.log(res4)
}
