JS 迭代器 Iterator 介绍

面试时又被人问起 JS 的 Iterator 迭代器。查阅 MDN，得知

非标准。 Iterator 函数是一个 SpiderMonkey 专有特性，并且会在某一时刻被删除。为将来使用的话，请考虑使用 for...of 循环和迭代协议。

如果用此 API 那么遍历对象还得想下面这样，手动包上 Iterator 得到迭代器才能继续往下操作。

var a = {
  x: 10,
  y: 20,
};
var iter = Iterator(a);
console.log(iter.next()); // ["x", 10]
console.log(iter.next()); // ["y", 20]
console.log(iter.next()); // throws StopIteration

但其实，ES 标准虽然没有直接支持 Iterator API，但它通过了内建迭代器的方案。就是使用 Symbol.iterator，这是 ES6 引入的。我们可以用他来遍历String，Array，Map，Set。

// Array
var arr = ['a', 'b', 'c', 'd', 'e'];
var eArr = arr[Symbol.iterator]();
console.log(eArr.next().value); // a
console.log(eArr.next().value); // b
console.log(eArr.next().value); // c
console.log(eArr.next().value); // d
console.log(eArr.next().value); // e


// Map
const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1[Symbol.iterator]();

for (let item of iterator1) {
  console.log(item);
}
// expected output: Array ["0", "foo"]
// expected output: Array [1, "bar"]

那遍历对象是更推荐使用 for...in 这是 ES5 引入的 API，他还有一个变种是 Object.key(obj).forEach(item => {});，这也是笔者常用的遍历对象的方法。自然还可以变种成下面的 for...of 于 key 的形式了。

var student={
  name:'wujunchuan',
  age:22,
  locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
  }
}
for(let key of Object.keys(student)){
  //使用Object.keys()方法获取对象key的数组
  console.log(key+": "+student[key]);
}

或者使用 yeild 那样的函数包装。

function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, "->", value);
}
// a -> 1
// b -> 2
// c -> 3

JS 迭代器 Iterator 介绍

猜你喜欢