es6之迭代器

劈头

作甚迭代器?

迭代器是被设想专用于迭代的对象,带有特定接口。一切的迭代器对象都具有 next() 方
法,会返回一个效果对象。该效果对象有两个属性:对应下一个值的 value ,以及一个布尔
范例的 done ,其值为 true 时示意没有更多值可供运用。迭代器持有一个指向鸠合位置的
内部指针,每当挪用了 next() 要领,迭代器就会返回响应的下一个值。
记着这些后,在 ES5 中建立一个迭代器就相称简朴了:

function ceateIterator(items) {
    var i = 0;
    return {
        next: function() {
            var done = (i >= items.length);
            var value = !done ? items[i++]: undefined;
            
            return {
                done: done,
                value: value
            };
        }
    };
}

var iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// 以后的一切挪用
console.log(iterator.next()); // "{ value: undefined, done: true }"

可迭代对象 与 for-of轮回

与迭代器严密相干的是,可迭代对象( iterable )是包括 Symbol.iterator 属性的对象。这
个 Symbol.iterator 着名标记定义了为指定对象返回迭代器的函数。在 ES6 中,一切的鸠合
对象(数组、 Set 与 Map )以及字符串都是可迭代对象,因而它们都被指定了默许的迭代
器。可迭代对象被设想用于与 ES 新增的 for-of 轮回合营运用。

for-of在轮回每次实行时会挪用可迭代对象next()要领,并将效果value值保存在一个变量上,轮回历程到done变成true时住手。

let values = [1, 2, 3];
for (let num of values) {
console.log(num);
}

此代码输出以下

1
2
3

这个 for-of 轮回起首挪用了 values 数组的 Symbol.iterator 要领,获取了一个迭代器
(对 Symbol.iterator 的挪用发生在 JS 引擎背景)。接下来 iterator.next() 被挪用,迭
代器效果对象的 value 属性被读出并放入了 num 变量。 num 变量的值最先为 1 ,接下来
是 2 ,末了变成 3 。当效果对象的 done 变成 true ,轮回就退出了,因而 num 毫不会被
赋值为 undefined 。

接见默许迭代器

你能够运用 Symbol.iterator 来接见对象上的默许迭代器,就像如许:

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"

既然 Symbol.iterator 指定了默许迭代器,你就能够运用它来检测一个对象是否能举行迭
代,正以下例:

function isIterable(object) {
return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true
console.log(isIterable(new Map())); // true
console.log(isIterable(new Set())); // true
console.log(isIterable(new WeakMap())); // false
console.log(isIterable(new WeakSet())); // false

鸠合的迭代器

ES6 具有三种鸠合对象范例:数组、 Map 与 Set 。这三种范例都具有以下的迭代器,有助于
探究它们的内容:

  • entries() :返回一个包括键值对的迭代器;
  • values() :返回一个包括鸠合中的值的迭代器;
  • keys() :返回一个包括鸠合中的键的迭代器;

entries()迭代器

entries() 迭代器会在每次 next() 被挪用时返回一个双项数组,此数组代表了鸠合中每一个
元素的键与值:关于数组来讲,第一项是数值索引;关于 Set ,第一项也是值(由于它的值
也会被视为键);关于 Map ,第一项就就是键。

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ES6");
data.set("format", "ebook");
for (let entry of colors.entries()) {
console.log(entry);
}
for (let entry of tracking.entries()) {
console.log(entry);
}
for (let entry of data.entries()) {
console.log(entry);
}

输出内容以下:

[0, "red"]
[1, "green"]
[2, "blue"]
[1234, 1234]
[5678, 5678]
[9012, 9012]
["title", "Understanding ES6"]
["format", "ebook"]

values() 迭代器

values() 迭代器仅仅能返回存储在鸠合内的值,比方:

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ES6");
data.set("format", "ebook");
for (let value of colors.values()) {
console.log(value);
}
for (let value of tracking.values()) {
console.log(value);
}
for (let value of data.values()) {
console.log(value);
}

此代码输出了以下内容:

"red"
"green"
"blue"
1234
5678
9012
"Understanding ES6"
"ebook"

keys() 迭代器

keys() 迭代器能返回鸠合中的每一个键。关于数组来讲,它只返回了数值范例的键,永不返
回数组的其他自有属性; Set 的键与值是雷同的,因而它的 keys() 与 values() 返回了相
同的迭代器;关于 Map , keys() 迭代器返回了每一个不反复的键。这里有个例子演示了这三
种状况:

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ES6");
data.set("format", "ebook");
for (let key of colors.keys()) {
console.log(key);
}
for (let key of tracking.keys()) {
console.log(key);
}
for (let key of data.keys()) {
console.log(key);
}

本例输出了以下内容:

0
1
2
1234
5678
9012
"title"
"format"
    原文作者:你也很棒哦
    原文地址: https://segmentfault.com/a/1190000018727537
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞