1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】反復処理⑤ イテレーター

Posted at

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

  • 反復処理についての理解を深める

#本題
###1.イテレーター

イテレーターとは反復操作を行う際に使用するオブジェクトのこと

基本構文

function genIterator(){
  // 下記のgenIteratorに返却されている部分をイテレーターと呼ぶ
  return {
    // イテレーターは必ずnextメソッドを保持する
    next: function(){
      // オブジェクトを返却
      return {
        // ループを継続するかどうか
        done: true/false,
        // 返却する値
        value: 
      }
    }
  }
}

####例1

基本的な使い方

// 関数を準備
// maxというループの上限値を決める引数を設定
function genIterator(max) {
  // 初期値を設定
  let i = 0;

  return {
    next: function(){
      return {
        // falseの場合,ループ継続
        done:  false,
        // ループする度に(nextメソッドが呼ばれる度)1ずつプラス
        value: i++
      }
    }
  }
}

// 動作確認
// 変数itに関数genIteratorを格納
const it = genIterator();
// nextメソッドを使用してdoneとvalueの値が返却される
console.log(it.next());
// 呼ばれる度にvalueの値が増えていく
console.log(it.next());
console.log(it.next());

maxの引数に上限値を設定する

function genIterator(max){
  let i = 0;

  return {
    next : function(){
      // if文を使ってループを終了する条件を作る
      // iがmax以上でループ終了
      if(i >= max){
        return{
          // trueの時はvalueの設定いらない
          done: true
        }
      // iがmax以下でループ継続
      } else {
        return {
          done: false,
          value: i++
        }
      }
    }
  }
}

const it = genIterator(10);
// itを初期化
let a = it.next();
// while文の条件として、aがfalseじゃないときループ終了と記載
while(!a.done){
  // 0から9まで出力される
  console.log(a.value);
  // 出力後a初期化(これがないと無限ループ)
  a = it.next();
}

####例2

返却される関数をSymbolのイテレーターに追加すると反復可能オブジェクトになる

// このようにmaxに値を渡さないと上限値が設定できない
function genIterator(max = 10){
  let i = 0;

  return{
    next: function(){
      if(i >= max){
        return{
          done: true
        }
      } else {
        return{
          done: false,
          value: i++
        }
      }
    }
  }
}

// オブジェクトを定義
const obj = {
  [Symbol.iterator]: genIterator
}
// このようにするとobjをfor文で使用できるが、上限値の設定ができないためmax = 10として値を設定した
// for文に追加
for(const i of obj){
  // 0から9まで出力される
  console.log(i);
}

上記でループ回数を変更したい場合にはbindを使う

// このようにmaxに値を渡さないと上限値が設定できない
function genIterator(max = 10){
  let i = 0;

  return{
    next: function(){
      if(i >= max){
        return{
          done: true
        }
      } else {
        return{
          done: false,
          value: i++
        }
      }
    }
  }
}

const obj = {
  // 第一引数はthisの値ですがないのでnull,第二引数にループ回数を設定する
  [Symbol.iterator]: genIterator.bind(null, 100)
}

for(const i of obj){
  // 99まで出力される
  console.log(i);
}

####例3

Setに反復可能オブジェクトを初期値として渡してあげるとインスタンスに対して初期値の設定を行うことができる

// このようにmaxに値を渡さないと上限値が設定できない
function genIterator(max = 10){
  let i = 0;

  return{
    next: function(){
      if(i >= max){
        return{
          done: true
        }
      } else {
        return{
          done: false,
          value: i++
        }
      }
    }
  }
}

const obj = {
  [Symbol.iterator]: genIterator.bind(null, 5)
}

const set = new Set(obj);
// 0,1,2,3,4,..と出力される
console.log(set);

今日はここまで!

#参考にさせて頂いた記事

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?