目次
遅延評価
## 基本的な知識は次のとおりです。次に、いくつかの例を用いてイメージを深めていきましょう。
无限序列迭代器
ホームページ ウェブフロントエンド jsチュートリアル JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

Aug 09, 2021 pm 05:53 PM
javascript vue.js フロントエンド

反復はコレクション要素にアクセスするメソッドです。反復可能なオブジェクトは反復可能オブジェクトと呼ばれます。反復子は、走査位置を記憶できるオブジェクトです。反復子オブジェクトは、コレクションの最初の要素からすべての要素が終了するまでアクセスを開始します。にアクセスされた場合、イテレータは前方にのみ移動でき、後方には移動できません。

遅延評価

遅延評価は、「遅延計算」または「遅延計算」と訳されることが多く、実際に実行する必要がある場合にのみ式の値を計算することを指します。

遅延評価の反対は早期評価です。早期評価は貪欲評価または厳密評価とも呼ばれ、ほとんどの従来のプログラミング言語の評価戦略です。

遅延評価の特性を最大限に活用する利点は、主に次の 2 つの側面に反映されます。
  • 不要な計算を回避し、パフォーマンスを向上させます。
  • スペースを節約し、無限ループのデータ構造を可能にします。

イテレータ

ES6 のイテレータを使用すると、ユーザー定義のデータ シーケンスを遅延評価して作成できます。反復はデータを走査するためのメカニズムです。イテレータは、データ構造 (Iterable と呼ばれる) の要素をトラバースするために使用されるポインタであり、一連の値を生成するために使用されるポインタです。

イテレータは、反復可能なオブジェクトです。データ コンテナを抽象化し、反復可能なオブジェクトのように動作します。

イテレータはインスタンス化時に各項目の値を計算せず、要求されたときにのみ次の値を生成します。これは、特に大規模なデータ セットや無限要素のシーケンスの場合に非常に便利です。

反復可能オブジェクト

反復可能オブジェクトは、その要素をパブリックにアクセスできるようにするデータ構造です。 JS の多くのオブジェクトは反復可能です。検出するのは簡単ではないかもしれませんが、注意深く調べると反復の特徴がわかります:
  • new Map([iterable])
  • new WeakMap([iterable])
  • new Set([iterable])
  • new WeakSet ([反復可能])
  • ##Promise.all([反復可能])

  • ##Promise.race([反復可能])

  • Array.from([iterable])

反復可能なオブジェクトも必要です。そうでない場合は、型エラーがスローされます。例:

  • for ... of

  • ... (展開演算子)

    const [a, b, ..] = iterable (代入の構造化)

  • yield* (ジェネレーター)

JavaScript には、組み込みの反復可能な項目が多数あります:

String、Array、TypedArray、Map 、セット。

反復プロトコル

反復子と反復可能オブジェクトは反復プロトコルに従います。

プロトコルは一連のインターフェイスであり、その使用方法を指定します。
イテレータはイテレータ プロトコルに従い、イテラブルはイテラブル プロトコルに従います。

反復可能プロトコル

オブジェクトを反復可能にするには、反復子のファクトリである Symbol.iterator を通じて反復子メソッドを実装する必要があります。

TypeScript を使用すると、反復可能なプロトコルは次のようになります。

interface Iterable {
  [Symbol.iterator]() : Iterator;
}
ログイン後にコピー

Symbol.iterator]() はパラメーターのない関数です。反復可能オブジェクトでそれを呼び出すということは、これを通じて反復可能オブジェクトにアクセスできることを意味します。これは、通常の関数またはジェネレーター関数にすることができます。

イテレータ プロトコル

イテレータ プロトコルは、一連の値を生成する標準的な方法を定義します。

オブジェクトがイテレータになるためには、next() メソッドを実装する必要があります。イテレータは return() メソッドを実装できます。これについては、この記事で後ほど説明します。

TypeScript を使用すると、イテレータ プロトコルは次のようになります。

interface Iterator {
    next() : IteratorResult;
    return?(value?: any): IteratorResult;
}
ログイン後にコピー

IteratorResult は次のように定義されます。

interface IteratorResult {
    value?: any;
    done: boolean;
}
ログイン後にコピー

  • done は、イテレータが使用済み、false はまだ生成される値があることを意味し、true はイテレータが終了したことを意味します。

  • value には任意の JS 値を指定できます。これはコンシューマに表示される値です。

done が true の場合、値は省略できます。

構成

イテレータと反復可能オブジェクトは、次の図で表すことができます:

JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

## 基本的な知識は次のとおりです。次に、いくつかの例を用いてイメージを深めていきましょう。

Range Iterator

非常に基本的なイテレータである createRangeIterator イテレータから始めます。

手動で it.next() を呼び出して、次の IteratorResult を取得します。最後の呼び出しは {done: true} を返します。これは、イテレーターが使用され、値を生成しなくなったことを意味します。

function createRangeIterator(from, to) {
  let i = from;

  return {
    next() {
      if (i <= to) {
        return { value: i++, done: false };
      } else {
        return { done: true };
      }
    }
  }
}

const it = createRangeIterator(1, 3);

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
ログイン後にコピー

JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

Iterable range iterator

この記事の前半で、JS の特定のステートメントには Iterable オブジェクトが必要であると述べました。したがって、前の例は for...of ループとともに使用すると機能しません。

しかし、反復子および反復可能プロトコルに準拠するオブジェクトを作成するのは非常に簡単です。

function createRangeIterator (from, to) {
  let i = from

  return {
    [Symbol.iterator] () {
      return this
    },
    next() {
      if (i <= to) {
        return { value: i++, done: false }
      } else {
        return { done: true }
      }
    }
  }
}

const it = createRangeIterator(1, 3)

for (const i of it) {
  console.log(i)
}
ログイン後にコピー

无限序列迭代器

迭代器可以表示无限制大小的序列,因为它们仅在需要时才计算值。

注意不要在无限迭代器上使用扩展运算符(...),JS 将尝试消费迭代器,由于迭代器是无限的,因此它将永远不会结束。 所以你的应用程序将崩溃,因为内存已被耗尽

同样,for ... of 循环也是一样的情况,所以要确保能退出循环:

function createEvenNumbersIterator () {
  let value = 0

  return {
    [Symbol.iterator] () {
      return this
    },
    next () {
      value += 2
      return { value, done: false}
    }
  }
}

const it = createEvenNumbersIterator()

const [a, b, c] = it
console.log({a, b, c})

const [x, y, z] = it
console.log({ x, y, z })

for (const even of it) {
  console.log(even)
  if (even > 20) {
    break
  }
}
ログイン後にコピー

JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

关闭迭代器

前面我们提到过,迭代器可以有选择地使用return()方法。 当迭代器直到最后都没有迭代时使用此方法,并让迭代器进行清理。

for ... of循环可以通过以下方式更早地终止迭代:

  • break

  • continue

  • throw

  • return

function createCloseableIterator () {
  let idx = 0
  const data = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;]

  function cleanup() {
    console.log(&#39;Performing cleanup&#39;)
  }
  return {
    [Symbol.iterator]() { return this },
    next () {
      if (idx <= data.length - 1) {
        return { value: data[idx++], done: false }
      } else {
        cleanup()
        return { done: true }
      }
    },
    return () {
      cleanup()
      return { done: true }
    }
  }
}

const it = createCloseableIterator()

for (const value of it) {
  console.log(value)
  if (value === &#39;c&#39;) {
    break
  }
}

console.log(&#39;\n----------\n&#39;)

const _it = createCloseableIterator();
for (const value of _it) {
  console.log(value);
}
ログイン後にコピー

JavaScript の反復可能なオブジェクトとイテレータをご存知ですか?

  • 如果知道迭代器已经结束,则手动调用cleanup()函数。

  • 如果突然完成,则return()起作用并为我们进行清理。

【推荐学习:javascript高级教程

以上がJavaScript の反復可能なオブジェクトとイテレータをご存知ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Jan 19, 2024 am 08:37 AM

Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーション フレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネス ロジックとインタラクティブ効果、およびデータ交換を実装できます。

フロントエンド モジュラー ESM とは何ですか? フロントエンド モジュラー ESM とは何ですか? Feb 25, 2024 am 11:48 AM

フロントエンド ESM とは何ですか? 特定のコード サンプルが必要です。フロントエンド開発では、ESM は ECMAScript 仕様に基づいたモジュール式開発メソッドである ECMAScriptModules を指します。 ESM は、より優れたコード構成、モジュール間の分離、再利用性など、多くの利点をもたらします。この記事では、ESM の基本概念と使用法を紹介し、いくつかの具体的なコード例を示します。 ESM の基本概念 ESM では、コードを複数のモジュールに分割することができ、各モジュールは他のモジュール用のいくつかのインターフェイスを公開します。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Mar 28, 2024 pm 01:06 PM

Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。

Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Jan 19, 2024 am 08:52 AM

Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Django は、効率的でスケーラブルな Web アプリケーション フレームワークです。 MVCやMTVなど複数のWeb開発モデルをサポートし、高品質なWebアプリケーションを簡単に開発できます。 Django はバックエンド開発をサポートするだけでなく、フロントエンド インターフェイスを迅速に構築し、テンプレート言語を通じて柔軟なビュー表示を実現します。 Django はフロントエンド開発とバックエンド開発をシームレスに統合するため、開発者は学習に特化する必要がありません。

See all articles