一、for…in语句
for…in 用来遍历对象中的属性:
let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
console.log(nickname);
}
结果:di boo punkeye size
let nicknames = ['di', 'boo', 'punkeye'];
for (let nickname in nicknames) {
console.log(nickname);
}
结果:di boo punkeye
使用for…in遍历数组,nickname所保存的是键名
二、for…of 用于遍历一个迭代器
- 迭代器:一种接口,为各种不同的数据结构提供统一的访问机制,任何数据只要部署Iterator接口(对象里的一个属性symbol.iterator),完成遍历操作。
- ES6创造的遍历命令for…of循环,Iterator接口主要提供for…of消费。
- 原生具备Iterator接口的数据:Array、Arguments、Set、Map、String、TypedArray、NodeList。
const per=["孙悟空","猪八戒","沙和尚","唐僧"]
for(let x of per){
console.log(x);
}
结果:孙悟空 猪八戒 沙和尚 唐僧
使用for…of遍历数组,x保存的是键值
三、迭代器应用:自定义遍历数组
//声明一个对象,遍历对象中的值
const per={
name:'西游记',
person:[
"孙悟空",
"猪八戒",
"沙和尚",
"唐僧"
],
//自定义遍历数组迭代器
[Symbol.iterator](){
//索引变量
let index=0;
let _this=this;
return{
next:function(){
if(index < _this.person.length){
const result={ value: _this.person[index],done:false };
//下标自增
index++;
return result;
}else{
return{value:undefined,done:true}
}
}
};
}
}
for(x of per){
console.log(x);
}
四、生成器
- 生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。
//定义生成器函数
function * per() {
console.log("我是一个快乐的小per")
}
//调用
per().next();
- 生成器函数可以使用yield:函数代码的分隔符,把函数代码分割成几个板块。
function * per() {
console.log('111');
yield '我是一个快乐的小per'
console.log('222');
yield '我是一个伤心的小per'
console.log('333');
yield '我是一个小per'
console.log('444');
}
//调用
let iterator=per();//此时的Iterator相当于与迭代器方法。
iterator.next();//111
iterator.next();//222
iterator.next();//333
iterator.next();//444
遍历来输出yield后面的值
for(x of per()){
console.log(x);
}
- 生成器函数的参数传递
作为上一次的结果返回
function * per(arg) {
console.log(arg);
let one= yield '我是一个快乐的小per'
console.log(one);
let two=yield '我是一个伤心的小per'
console.log(two);
}
//执行获取迭代器对象
let iterator=per('AAA');
console.log( iterator.next());
//next方法可以传入实参
console.log( iterator.next('BBB'));
iterator.next('CCC')
四、生成器函数实例
- 1s后控制台输出111 2s后输出222 3s后输出333
解决回调地狱的问题
function one() {
setTimeout(function(){
console.log("111")
result.next();
},1000);
}
function two() {
setTimeout(function(){
console.log("222")
result.next();
},2000);
}
function three() {
setTimeout(function(){
console.log("333")
},3000);
}
//定义生成器函数
function * num(){
yield one();
yield two();
yield three();
}
//调用
let result=num();
result.next();
//模拟获取 用户数据 订单数据 商品数据
function user(){
setTimeout(function userNum() {
let data="用户数据"
result.next(data);
},1000);
}
function order(){
setTimeout(function orderNum() {
let data="订单数据"
result.next(data);
},1000);
}
function product(){
setTimeout(function productNum() {
let data="用户数据"
result.next(data);
},1000);
}
//定义生成器函数
function * factor(){
let users=yield user();
console.log(users);
let orders=yield order();
console.log(orders);
let products=yield product();
console.log(products);
}
//调用
let result=factor();
result.next();