跳到主要内容

接口

2023年06月17日
柏拉文
越努力,越幸运

一、Iterator


Iterator 接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环。当使用for...of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是可遍历的iterable)。

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是可遍历的(iterable

Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator,它是一个表达式,返回Symbol对象的iterator属性

1.1 结构

Iterator:{
next: {
value: any,
doen: boolan
}
}
  • 指针: 指向迭代位置的指针

  • next: 用于移动指针。开始时,指针指向数组的开始位置。然后,每次调用next方法,指针就会指向数组的下一个成员。next方法返回一个对象,表示当前数据成员的信息。这个对象具有valuedone两个属性:

    • value属性返回当前位置的成员,

    • done属性是一个布尔值,表示遍历是否结束,即是否还有必要再一次调用next方法。总之,调用指针对象的next方法,就可以遍历事先给定的数据结构。

1.2 部署

Iterator 接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环。当使用for...of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是可遍历的(iterable

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是可遍历的iterable)。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。

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

const list = [1, 2];
list[Symbol.iterator] = Iterator;

任何数据结构 只要在 [Symbol.iterator] 属性上部署了 Iterator 接口, 那么它就可以通过 for……of 遍历。

1.3 遍历

next 遍历

const iterator = Iterator([1, 2]);
const result1 = iterator.next();
console.log(result1);
const result2 = iterator.next();
console.log(result2);
const result3 = iterator.next();
console.log(result3);

for……of 遍历

for (let value of list) {
console.log(value);
}

二、Map Iterator


Map 数据结构原生在 [Symbol.iterator] 属性上部署了 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 Map 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

4.1 遍历

next 遍历

const map = new Mqp([[1,1],[2,2],[3,3]]);

const iterator = map[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

for……of 遍历

const map = new Mqp([[1,1],[2,2],[3,3]]);

for(const item of map){
consoel.log(item);
}

三、Set Iterator


Set 数据结构原生在 [Symbol.iterator] 属性上部署了 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 Set 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

4.1 遍历

next 遍历

const set = new set([1,2,3]);

const iterator = set[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

for……of 遍历

const set = new set([1,2,3]);

for(const item of set){
consoel.log(item);
}

四、Array Iterator


Array 数据结构原生具备 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 Array 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

4.1 遍历

next() 遍历

const array = [1, 2, 3];
const arrayIterator = array[Symbol.iterator]();
const result1 = arrayIterator.next();
console.log(result1);
const result2 = arrayIterator.next();
console.log(result2);
const result3 = arrayIterator.next();
console.log(result3);
const result4 = arrayIterator.next();
console.log(result4);

for……of 遍历

const array = [1, 2, 3];


for (let value of array) {
console.log(value);
}

五、Object Iterator


Object 数据结构没有在 [Symbol.iterator] 属性上部署 Iterator 接口。之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。

一个对象如果要具备可被for...of循环调用的 Iterator 接口,就必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。

5.1 部署

function ObjectInterator() {
const self = this;
let index = 0;
return {
next() {
const keyList = Object.keys(self);
if (index < Object.keys(self).length) {
return {
value: self[keyList[index++]],
done: false,
};
}
return { value: undefined, done: true };
},
};
}

Object.prototype[Symbol.iterator] = ObjectInterator;

5.2 遍历

next遍历

for……of 遍历

const obj = {
a: 1,
b: 2,
};

for (let value of obj) {
console.log(value);
}

六、String Iterator


String 数据结构原生具备 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 String 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

七、NodeList Iterator


NodeList 数据结构原生具备 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 NodeList 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

八、arguments Iterator


arguments 数据结构原生具备 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 arguments 数据结构的 Symbol.iterator属性部署了 Iterator 接口。

九、TypedArray Iterator


TypedArray 数据结构原生具备 Iterator 接口, 即不用任何处理,就可以被for...of循环遍历。原因在于 TypedArray 数据结构的 Symbol.iterator属性部署了 Iterator 接口。