进而上文[js高手之路] es6密密麻麻教程 –
迭代器与生成器详解
继续. 

在es6中引入了三个新的轮回结构for ….of,
首要是用来循环可迭代的对象,那么哪些是可迭代的目的呢?

可迭代的指标一般都有Symbol.iterator属性,你能够在控制塞内加尔达喀尔用console.dir打字与印刷数组,Map,Set,在他们的原型对象(prototype)上边就能找到。那性子格与迭代器密切相关,通过该函数能够回来一个迭代器,下文,小编会举八个例子。一般的话具有的集纳对象(数组,Set,Map
以及字符串)都以可迭代的对象。这几个目的中都有暗许的迭代器.

for..of循环的遍历原理:

循环每执行二遍都会调用可迭代对象的next()方法,
并将迭代器再次来到的结果对象的value属性存款和储蓄在两个变量中,循环将四处进行这一进度,直到done再次回到true

1 let values = [ 10, 20, 30 ];
2 for( let val of values ) {
3     console.log( val );
4 }

那段for…of循环的代码通过调用values数组的Symbol.iterator方法来获得迭代器,
这一步是由js引擎自动达成的,随后迭代器的next()方法被一再调用,重返对象的value值并储存在变量val中,依次为:
10, 20, 30,done为true的时候退出,最后 不会把undefined赋值给val.

使用Symbol.iterator访问默许的迭代器

1 let userList = [ 'ghostwu', '悟空', '八戒' ];
2 let iterator = userList[Symbol.iterator]();
3 console.log( iterator.next() ); //{ value : 'ghostwu', done : false }
4 console.log( iterator.next() ); //{ value : '悟空', done : false }
5 console.log( iterator.next() ); //{ value : '八戒', done : false }
6 console.log( iterator.next() ); //{ value : undefined, done : false }

是因为全数Symbol.iterator属性的靶子都有私下认可的迭代器,那个特点能够用来检查和测试对象是或不是为可迭代对象.

1 function isIterable( obj ){
2     return typeof obj[Symbol.iterator] === 'function';
3 }
4 console.log( isIterable( [ 10, 20 ,30 ] ) ); //true
5 console.log( isIterable( "ghostwu" ) ); //true
6 console.log( isIterable( new Map() ) ); //true
7 console.log( isIterable( new Set() ) ); //true
8 console.log( isIterable( new Object() ) ); //false
9 console.log( isIterable( {} ) );//false

故而,for..of不能遍历对象( json )

var obj = {
    name : 'ghostwu',
    age : 22,
    sex : 'man'
};
for( var val of obj ) {
    console.log( val );
}

上边那种遍历格局,就会报错.

不过,大家得以为目的扩张四个迭代器方法

 1 let obj = {
 2     items : [],
 3     *[Symbol.iterator](){
 4         for( let item of this.items ) {
 5             yield item;
 6         }
 7     }
 8 }
 9 obj.items.push( 10 );
10 obj.items.push( 20 );
11 obj.items.push( 30 );
12 var iterator = obj[Symbol.iterator]();
13 console.log( iterator.next() ); //{ value : 10, done: false }
14 console.log( iterator.next() ); //{ value : 20, done : false }
15 console.log( iterator.next() ); //{ value : 30, done : false }
16 console.log( iterator.next() ); //{ value : undefined, done : true }

给Symbol.iterator属性添加多少个生成器,那么对象就具有迭代器的作用了,那么就可见选取for…of方法了

 1 let obj = {
 2     items : [],
 3     *[Symbol.iterator](){
 4         for( let item of this.items ) {
 5             yield item;
 6         }
 7     }
 8 }
 9 obj.items.push( 10 );
10 obj.items.push( 20 );
11 obj.items.push( 30 );
12 
13 for ( let val of obj ) {
14     console.log( val );
15 }

放到迭代器:

可迭代的对象,都放置以下3种迭代器

entries(): 重回三个迭代器,值为键值对

values(): 重回3个迭代器, 值为汇聚的值

keys(): 重临一个迭代器,值为汇集中的全数键

 1 let userList = [ 'ghostwu', '悟空', '八戒' ];
 2 
 3 for ( let name of userList.entries() ) {
 4     console.log( name );
 5 }
 6 
 7 let set = new Set( [ 10, 20, 30 ] );
 8 for ( let num of set.entries() ){
 9     console.log( num );
10 }
11 
12 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
13 for ( let detail of map.entries() ){
14     console.log( detail );
15 }

图片 1

entries再次来到的是键值对,注意Set集合,重返的键和值是一致的.

1 let set = new Set( [ 10, 20, 30 ] );
2 for ( let num of set.values() ){
3     console.log( num );
4 }
5 
6 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
7 for ( let detail of map.values() ){
8     console.log( detail );
9 }

图片 2

1 let set = new Set( [ 10, 20, 30 ] );
2 for ( let num of set.keys() ){
3     console.log( num );
4 }
5 
6 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
7 for ( let detail of map.keys() ){
8     console.log( detail );
9 }

图片 3

 默许的迭代器:

 1 let userList = [ 'ghostwu', '悟空', '八戒' ];
 2 
 3 //相当于调用values
 4 for ( let name of userList ) {
 5     console.log( name );
 6 }
 7 
 8 let set = new Set( [ 10, 20, 30 ] );
 9 //相当于调用values
10 for ( let num of set ){
11     console.log( num );
12 }
13 
14 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
15 //相当于调用entries
16 for ( let detail of map ){
17     console.log( detail );
18 }

Map的暗中同意行为,能够用解构来简写:

1 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
2 for ( let [ key, value ] of map ) {
3     console.log( key  + '--->' + value );
4 }

运用进行运算符把Set与Map转化成数组

 1 let set = new Set( [ 10, 20, 30 ] );
 2 let arr = [...set];
 3 console.log( arr ); // [10,20,30]
 4 
 5 let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ]);
 6 console.log( [...map] ); // [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ]
 7 
 8 let arr1 = [ 10, 20, 30 ];
 9 let arr2 = [ 'ghostwu', '八戒', '悟空' ];
10 let combine = [ ...arr1, ...arr2, 'done' ];
11 console.log( combine ); // [10, 20, 30, "ghostwu", "八戒", "悟空", "done"]

 

相关文章

网站地图xml地图