es6-迭代器和for...of

121 阅读1分钟

for...of..

讲迭代器之前呢,我想先讲下for...of..

for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

先看看for...of...可以做什么吧

// 迭代array
let arr = [1,2,3]
for(let item of arr){
	console.log(item)
}
//1
//2
//3

// 迭代String
let str = 'boo'
for(let value of str){
	console.log(value)
}
// "b"
// "o"
// "o"

// 迭代TypedArray


// 迭代Map
let map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]])
for(let item of map){
	console.log(item)
}
//['Michael', 95]
//['Bob', 75]
//['Tracy', 85]

// 迭代Set
let set = new Set([1,2,3,4])
for(let value of set){
	console.log(value)
}

// 1 2 3 4 

// 迭代arguments
(function)(){
	for(let argument of arguments){
    	console.log(argument)
    }
})(1,3,4)
// 1 3 4

// 迭代Dom集合

for...of 不可以迭代对象

let obj = {
	a:'asdfa',
    b:'fasdfa'
}

for(let v of obj){
	console.log(v)
}

//obj is not iterable

这是因为对象没有部署默认的 Iterator 接口

默认的Iterator 部署在 Symbol.iterator上, Array,Map,Set,String,TypedArray,arguments 这几种数据都有默认的Iterator接口

let arr = [1]
console.log(arr[Symbol.iterator])
// ƒ values() { [native code] }

而对象没有

Iterator

我们可以为对象添加Iterator接口

let obj = {
	data:['hello','world'],
   [Symbol.iterator](){
   	const self = this
       let index = 0
       return {
       	next(){
           	if(index<self.data.length){
                 return{
                 	value: self.data[index++]
                   done:false
                 }
               }else{
               	return {value:undefined,done:true}
               }
           	
           }
       }
   }
}