前端进阶攻略之迭代器
前端进阶攻略之迭代器
前端进阶攻略之迭代器
一.什么是迭代器?
1.什么是迭代？
从一个数据集合中按照一定的顺序，不断的取出数据的过程
2.迭代和遍历的区别？
迭代强调的依次取出，不能确定可以取出的值有多少，也不能保证去把数据全部取完
遍历必须保证数据的长度，循环不断的全部取出，针对于数据量过大的情况下使用遍历，需要时间过长
3.迭代器
对迭代过程的封装，通常表现为对象的数据形式（也可以使用数组），不同语言中，表现出了的迭代形式不一样
4.迭代模式
一种编程设计模式，用于同一迭代的过程，并且规范迭代器的格式
二.JS原生迭代器
在写原生迭代器时，首先要明白迭代器的原理
迭代器需要满足的条件：
2.1.取出下一个数据的能力
2.2.判断是否有下一个数据
function iterator(arr){
return{
i:0,
next(){
var result={
value:arr[this.i],
done:this.i>=arr.length
}
this.i++;
return result;
}
}
}
var arr1=[1,2,3,4,5,6];
let it=iterator(arr1);只要知道迭代器需要满足的条件，写一个原生迭代器还是非常简单的
最终在控制台中调用.next()方法输出的结果为：
如果用while（）循环可以让迭代器自己取数据，直到没有数据为止
const arr = [1,2,3,4,5]
const iterator ={ //用于迭代数组的对象，iterator为迭代器的名称
i : 0,
next(){
var result = {
value : arr[this.i],
done : this.i >= arr.length
}
this.i ++;
return result;
}
}
console.log(iterator)
// 让迭代器自己取数据，直到没有数据为止
let data = iterator.next();
while(!data.done){
console.log(data.value)
data = iterator.next();
}
console.log("迭代完成");三.ES6中的迭代器
在es6中如果对象具有知名符号属性Symbol.iterator,则表示该对象可以迭代
const arr = [464, 878, 88, 22, 45, 4, 8, 7]
// // 在es6中如果对象具有知名符号属性Symbol.iterator,则表示该对象可以迭代
console.log(arr)
const iterator = arr[Symbol.iterator](); //es6之后，数组可以直接创建迭代对象
console.log(iterator.next()); //{value: 464, done: false}
console.log(iterator.next()); //{value: 878, done: false}
console.log(iterator.next()); //{value: 88, done: false}
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());使用es6中的知名符号Symbol.iterator可以直接创建一个迭代对象，通过调用迭代对象的next（）方法，可以直接迭代数组中的数据
3.1、使用迭代器生成斐波那契数列
下面我们就使用迭代器来自定义自己的一个斐波那契数列组，我们直到斐波那契数列有两个运行前提，第一个前提是初始化的前两个数字为0，1,第二个前提是将来的每一个值都是前两个值的和。这样我们的目标就是每次都迭代输出一个新的值。
<!-- 1 1 2 3 5 8 13..... -->
<!-- 创建一个分斐波那契数列的迭代器 -->
function createFeibo(){
let prev1 = 1;
let prev2 = 1; //前两位
let n = 1;//当前第几位
return {
next(){
let value;
if(n <=2 ){
value = 1
}else{
value = prev1 + prev2;
}
const result = {
value,
done: false
}
prev2 = prev1;
prev1 = result.value;
n++;
return result
}
}
}
const iter = createFeibo()在 ES6 中常用的集合对象（数组、Set/Map集合）和字符串都是可迭代对象，这些对象都有默认的迭代器和Symbol.iterator属性。
通过生成器创建的迭代器也是可迭代对象，因为生成器默认会为Symbol.iterator属性赋值。
四. for of循环
for of 循环遍历、 就是专门针对可迭代对象的， 不是可迭代对象不能使用 forof循环。
const arr1 = [1, 2, 3, 4, 5, 6, 7];
for (let item of arr1) {
console.log(item)
}for of与for in 区别：
区别①：for of无法循环遍历对象
var userMsg = {
0: 'nick',
1: 'freddy',
2: 'mike',
3: 'james'
};
for(var key in userMsg){
console.log(key, userMsg[key]);
}
console.log('-----------分割线-----------');
for(var item of userMsg){
console.log(item);
区别②：遍历输出结果不同
var arr = ['nick','freddy','mike','james'];
for(var key in arr){
console.log(key);
}
console.log('-----------分割线-----------');
for(var item of arr){
console.log(item);
}
不难看出，for in循环遍历的是数组的键值(索引)，而for of循环遍历的是数组的值。
区别③：for in 会遍历自定义属性，for of不会
var arr = ['nick','freddy','mike','james'];
arr.name = "数组";
for(var key in arr){
console.log(key+': '+arr[key]);
}
console.log('-----------分割线-----------');
for(var item of arr){
console.log(item);
给数组添加一个自定义属性name，并且赋值"数组"。然后进行遍历输出的，会发现新定义的属性也被for in输出来了，而for of并不会对name进行输出。