一个织梦两个网站,网站建设开发方式,淘宝seo名词解释,wordpress启用小工具ES5及以下版本对JS几种集合#xff0c;要存取数据一般需要用循环语句来遍历#xff0c;就要初始化一个或多个变量来记录每一次循环在数据集合中的位置或数据值。这里容易出现超出边界问题#xff0c;造成程序出错。另外#xff0c;对于多次循环也需要跟踪理清各个变量关系及…ES5及以下版本对JS几种集合要存取数据一般需要用循环语句来遍历就要初始化一个或多个变量来记录每一次循环在数据集合中的位置或数据值。这里容易出现超出边界问题造成程序出错。另外对于多次循环也需要跟踪理清各个变量关系及存续问题造成问题复杂化和不安全性。
ES6开始引入迭代器它可以极大的简化数据操作不需要额外的临时变量本身带有内部查找及循环机制。对于程序员来说只需要取用即可取用一次集合内部迭代器自动更新并将指针指向下一个数据完全不用操心遍历循环设计及控制问题。
在ES6中Map集合等众多集合JS本身就具有内建迭代器功能可以直接使用其内联迭代器。而对于其他不具有迭代功能的集合或用户自己生成的集合是不具有迭代器功能的。因此生成器就是让用户在建立集合时就加入迭代功能生成相关迭代语句以便后面使用它时可以运用迭代功能。 一、什么是迭代器
迭代器是一种特殊对象它具有一些专门为迭代过程设计的专有接口所有的迭代器都有一个next()方法每次调用都返回一个结果对象。结果对象有两个属性一个是value表示下一个将要返回的值(对应调用next次数序号数据值)如果是最后一个或更后的调用next()方法则value返回undefined另一个是done它是一个布尔类型的值当没有可返回数据时返回true有返回数据时为false。迭代器还会保存一个内部指针用来指向当前集合中值的位置每调用一次next()方法都会返回下一个可能的值。
下面用ES5模拟生成器与迭代器使用过程(极简化版模拟)
function createIterator(items){//模拟生成器内部实现过程 var i0; return{ next:function(){ var done(iitems.length); var value!done?items[i]:undefined; return{ done:done, value:value }; } };
}
var iteratorcreateIterator([1,2,3]);//定义迭代器
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},之后所有调用next()方法都会是这个结果
二、什么是生成器
生成器是一种返回迭代器的函数通过function关键字后的星号“*”来表示函数中会用到新的关键字yield。星号紧挨着function关键字也可以在中间添加一个空格。
//生成器
function *createIterator(){//*表示该函数是一个迭代器生成器 yield 10;//yield关键字定义迭代器next()方法调用的返回值和顺序 yield 20; yield 30;
}
//生成器的调用方式与普通函数相同只不过返回的是一个迭代器
let iteratorcreateIterator();
console.log(iterator.next().value);//输出结果10
console.log(iterator.next().value);//输出结果20
console.log(iterator.next().value);//输出结果30
console.log(iterator.next().value);//输出结果undefined
三、生成器的使用方法要点
1.生成器yield并不是直接生成可迭代的集合对象
它只是生成一个迭代器就象给一个运行员打了一针兴奋器可以让该运动员比没打前跑得更快而一个“yield 10;”语句则是表示对于10这个数据可以用next()方法来加速查找(不需要循环结果及变量辅助)。
而要生成一个可迭代的集合对象则是需要在生成集合对象的过程中每一个数据生成时都要调用生成器函数用yield去定义数据这样最终形成的集合对象才是迭代集合对象。就如上面的生成器示例中如果20和30不用yield去定义则不能再第二次和第三次next()方法中取到这个两值因为没有给它们生成可以用next方法迭代的过程。
2.使用yield关键字可以返回任何值或表达式
所以可以通过生成器函数批量地给迭代器添加元素。如下示例
function *createIterator(items){ for(let i0;iitems.length;i){ yield items[i]; }
}
let iteratorcreateIterator([张小玉,孙大壮,李强]);
console.log(iterator.next());//输出结果{value:张小玉,done:false}
console.log(iterator.next());//输出结果{value:孙大壮,done:false}
console.log(iterator.next());//输出结果{value:李强,done:false}
console.log(iterator.next());//输出结果{value:undefined,done:true}
3.yield关键字只可在生成器内部使用在其他地方使用会报错
即使用在生成器内部的函数里使用也不行。也就是说生成器函数中除了yield开头的语句只能出现块状体{}中如if{}、for(){}等作为yield生成有关的逻辑体外其他无关的定义变量、赋值等语句如果不是以yield开头都将报错。
下面为错误的使用yield示例
function *createIterator(items){//错误的使用yield items.forEach(function(item){ //语法错误因为参数为函数不属于块状作用域 yield item1;//报错Unexpected identifier item });
}
let iteratorcreateIterator([1,2,3]);
console.log(iterator.next());//输出结果无输出
console.log(iterator.next());//输出结果无输出
console.log(iterator.next());//输出结果无输出
console.log(iterator.next());//输出结果无输出
下面为正确的使用yield示例
function *createIterator(items){//正确的使用yield for(let item of items){ yield item1; };
}
let iteratorcreateIterator([1,2,3]);
console.log(iterator.next().value);//输出结果2
console.log(iterator.next().value);//输出结果3
console.log(iterator.next().value);//输出结果4
console.log(iterator.next().value);//输出结果undefined
4.生成器对象的方法
let o{ createIterator:function *(items){ for(let i0;iitems.length;i){ yield items[i]; } }
};
let iteratoro.createIterator([1,2,3]);
console.log(iterator.next().value);//输出结果1
console.log(iterator.next().value);//输出结果2
console.log(iterator.next().value);//输出结果3
console.log(iterator.next().value);//输出结果undefined
四、具有内联迭代器的集合
在ES6中已经默认为许多类型主要有数组、Map集合和Set集合建立了内联迭代器只有当这些内联迭代器无法实现你的目标时才需要自己创建并用生成器加入迭代器。
(一)通过Symbol.iterator来访问内联集合的默认迭代器
1.访问默认迭代器
et values[1,2,3];//定义数组
let iteratorvalues[Symbol.iterator]();//获得数组的默认迭代器
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}
2.创建可迭代对象
默认情况下开发者定义的对象都是不可迭代的对象但如果给Symbol.iterator属性添加一个生成器则其也具有了默认迭代器。
let collection{//创建可迭代对象 items:[], *[Symbol.iterator](){ for(let item of thi.items){ yield item; } }
};
collection.items.push(10);//给对象赋值
collection.items.push(20);
collection.items.push(30);
let iteratorcollection.items[Symbol.iterator]();//建立默认迭代器
console.log(iterator.next());//输出结果{value:10,done:false}
console.log(iterator.next());//输出结果{value:20,done:false}
console.log(iterator.next());//输出结果{value:30,done:false}
console.log(iterator.next());//输出结果{value:undefined,done:true}
(二)访问内联迭代器
内联集合有三个内联迭代器
第一个entries()返回一个迭代器其值为多个键值对
第二个values()返回一个迭代器其值为集合的值
第三个keys()返回一个迭代器其值为集合中的所有键名
1. entries()迭代器
每次调用next()方法时都会返回一个数组数组中的两个元素分别表示键与值。如果是数组第一个是索引每二个是值如果是Set集合两个都是值如果是Map集合第一个为键名第二个为值。
let colors[red,green,blue]//数组集合
for(let entry of colors.entries()){ console.log(entry);//输出结果{[0,red],[1,green],[2,blue]}
}
let trackingnew Set([10,20,30]);//Set集合
for(let netry of tracking.entries()){ console.log(netry);//输出结果{[10,10],[20,20],[30,30]}
}
let datanew Map();//Map集合
data.set(第一名,张小玉);
data.set(第二名,孙大壮);
data.set(第三名,李强);
for(let entry of data.entries()){ console.log(entry);//输出结果{[第一名,张小玉],[第二名,孙大壮],[第三名,李强]}
}
2. values()迭代器
调用values()迭代器时会返回集合中所存的所有值如
let colors[red,green,blue]//数组集合
for(let entry of colors.values()){ console.log(entry);//输出结果{red,green,blue}
}
let trackingnew Set([10,20,30]);//Set集合
for(let netry of tracking.values()){ console.log(netry);//输出结果{10,20,30}
}
let datanew Map();//Map集合
data.set(第一名,张小玉);
data.set(第二名,孙大壮);
data.set(第三名,李强);
for(let entry of data.values()){ console.log(entry);//输出结果{张小玉,孙大壮,李强}
}
3. keys()迭代器
调用keys()迭代器会返回集合中存在的键。
let colors[red,green,blue]//数组集合
for(let entry of colors.keys()){ console.log(entry);//输出结果{0,1,2}
}
let trackingnew Set([10,20,30]);//Set集合
for(let netry of tracking.keys()){ console.log(netry);//输出结果{10,20,30}
}
let datanew Map();//Map集合
data.set(第一名,张小玉);
data.set(第二名,孙大壮);
data.set(第三名,李强);
for(let entry of data.keys()){ console.log(entry);//输出结果{第一名,第二名,第三名}
}
