es6中iterator和for-of循环介绍

责编:menVScode 2018-02-23 18:23 阅读(506)

        在 ES6 中新增加了 Set 和 Map 两种数据结构,再加上js之前原有的数组和对象,这样就有四种数据集合。平时还可以组合使用他们,定义自己的数据结构,比如数组的成员是 Map,Map 的成员是对象等。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

        Iterator 就是这样的一种机制,它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作,而且这种遍历操作是依次处理该数据结构的所有成员。


        Iterator 遍历器的作用:

        [1] 为各种数据结构,提供一个统一的、简便的访问接口。

        [2] 使得数据结构的成员能够某种次序排列。

        [3] ES6 新增了遍历命令 for-of循环,Iterator 接口主要提供for-of消费。


        手写 Iterator 接口

const arr = [1,2,3];

function iterator(arr){
    let index = 0;
    return {
        next : function(){
            return index<arr.length ? 
            {value: arr[index++], done:false} :
            {value:undefined, done:true}
        }
    }
}

const it = iterator(arr)
console.log(it.next()) //{value: 1, done: false}
console.log(it.next()) //{value: 2, done: false}
console.log(it.next()) //{value: 3, done: false}
console.log(it.next()) //{value: undefined, done: true} 遍历完成

        Iterator 的遍历过程

        [1] 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

        [2] 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

        [3] 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

        [4] 不断的调用指针对象的next方法,直到它指向数据结构的结束位置。

        [5] 每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象,其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

        

        在 ES6 中有些数据结构原生就具备了iterator接口,比如数组、Set、Map等。但是有些就没有,比如所对象。所以这个时候需要区分哪些数据结构具备iterator接口,,ES6 中规定凡是具有Symbol.iterator 属性的数据结构都具有 Iterator 接口

const arr = [1,2,3];
const set = new Set(['a','b','c']);
const map = new Map([['a',1]]);

//分别保存iterator接口并执行
const itArr = arr[Symbol.iterator]()
const itSet = set[Symbol.iterator]()
const itMap = map[Symbol.iterator]()

//分别打印出3个数据结构的iterator对象指针
console.log(itArr)
console.log(itSet)
console.log(itMap)

//接下来可以使用他们的next方法去遍历对应的数据结构
//以set为例
console.log(itSet.next()) //{value: "a", done: false}
console.log(itSet.next()) //{value: "a", done: false}
console.log(itSet.next()) //{value: "c", done: false}
console.log(itSet.next()) //{value: undefined, done: true}

const obj = {};
console.log(obj[Symbol.iterator]); //undefined


        具备iterator接口的数据结构都可以进行如下操作:解构赋值、扩展运算符

// 解构赋值
const set = new Set(['a','b','c']);
const [x,y] = set
console.log(x,y) // a b

//...:将数据类型展开
let str = 'mvc'; // 字符串是一个类数组,也具备iterator接口
let arrStr = [...str];
console.log(arrStr); // ["m", "v", "c"]

        数组去重

let arr2 = [{},1,'a',1,[]]
console.log([...new Set(arr2)]) // [Object, 1, "a", Array[0]]


        for...of 循环

        具备iterator接口的数据结构都可以使用for...of循环

// 数组
const arr = [1,2,3,4];
for(let i of arr){
    console.log(i); // i打印出来就是数组的每一项
}

// Map数据结构
const m = new Map();
m.set('a',1).set('b',2).set('c',3);

for(let data of m){
    console.log(data);//依次打印:["a", 1]、["b", 2]、["c", 3]
}
// 利用解构赋值
for(let [key,value] of m){
    console.log(key,value);
}
标签: iterator for-of es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码