forループ内のvarの問題の解決

forループ内のvarの問題の解決

序文

var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変数に漏れる問題があると以前から聞いていましたが、この「グローバル」の影響がいつもわかりません。また、出力結果が増加/減少する値になる場合と、出力が同じ値になる場合が明確ではありません。

問題の再現

(var i = 1; i <= 5; i++) の場合 {
  setTimeout(関数タイマー() {
    コンソールログ(i)
  }, i * 1000)
}

予想される結果: 12345

印刷結果: 66666

解決

閉鎖

(var i = 1; i <= 5; i++) の場合 {
    (関数(j) {
        setTimeout(関数タイマー() {
            コンソールログ(j)
        }, j * 1000)
    })(私)
}

setTimeout 3番目のパラメータ

(var i = 1; i <= 5; i++) の場合 {
   タイムアウトを設定する(
       関数タイマー(j) {
           コンソールログ(j)
       },
       私 * 1000、
       私
   )
}

letを使ってiを定義する

(i = 1; i <= 5; i++ とします) {
    setTimeout(関数タイマー() {
        コンソールログ(i)
    }, i * 1000)
}

させて

let に関しては、現在の i はこのループ内でのみ有効であり、各ループ内の i は実際には新しい変数であることを覚えておいてください。

JavaScript エンジンは、前のループの値を内部的に記憶し、このループの変数 i を初期化するときに、前のループに基づいて計算を実行します。

さらに、 for ループにはもう一つ特別な機能があり、ループ変数を設定する部分が親スコープで、ループ本体が別の子スコープになります。

(i = 0; i < 3; i++ とします) {
i = 'abc' とします。
コンソールにログ出力します。
}
//abc
//abc
//abc

要約する

var for ループを使用する際に発生する問題を解決する方法についての記事はこれで終わりです。var for ループの問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js for ループ、なぜ i 変数を定義するために var を追加する必要があるのか
  • jQuery for ループにおける var と let の違い
  • es6 for ループにおける let と var の違いの詳細な説明

<<:  Nginx のリロード プロセスの背後にある真実を探る

>>:  MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明

推薦する

Vueスロットの詳細な説明

1. 機能: 親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるように...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

Reactは一般的なスケルトン画面コンポーネントの例を実装します

目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...

docker で nginx+php+mysql を設定する方法

まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

Dockerfile における VOLUME と docker -v の違い

Dockerfile でのボリュームのマウントと docker -v コマンドによるマウントには明ら...

MySQL 数十億のデータのインポート、エクスポート、移行に関するメモ

最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...

Linux Dig コマンドの使用法

発掘紹介: Dig は、Unix ライクなコマンドライン モードで NS レコード、A レコード、M...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

Dockerイメージサイズを最適化する一般的な方法

通常、私たちが構築する Docker イメージはサイズが大きく、多くのディスク領域を占有します。コン...

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...

MySQLトリガーの使用例の詳細

MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...

MySQLグループクエリ最適化方法

MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...