Generator

by s_hiroshi

HTML

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

JavaScript

/*
 * 配列で用意するよりも効率的
 */
function* generateNumbers() {
  for (let i = 0; i < 100; i++) {
    yield i;
  }
}

let content = 0;
for (let i of generateNumbers()) {
  content += i;
}

document.querySelector('#result1').innerHTML = content;

/*
 * ObjectにSymbom.iteratorを導入
 */
const profile = {
  name: '澤井',
  age: '43',
  sex: 'men',
  [Symbol.iterator]: function*() {
    // アロー関数は使えない
    yield this.name;
    yield this.age;
    yield this.sex;
  }
};

content = '';
for (let prop of profile) {
  content += prop + '<br>';
}

document.querySelector('#result2').innerHTML = content;


/*
 * クラスにSymbol.iteratorを導入
 */
class Person {
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  *[Symbol.iterator] () {
      yield this.name;
      yield this.age;
      yield this.sex;
  }
}

let person = new Person('澤井', 43, '男性');

content = '';
for (let prop of person) {
    content += prop + '<br>';
}
document.querySelector('#result3').innerHTML = content;