ホームページ ウェブフロントエンド jsチュートリアル JavaScriptでforループを使用する場合の注意点

JavaScriptでforループを使用する場合の注意点

Aug 22, 2017 am 11:11 AM
javascript js 予防


同じコードを毎回異なる値で何度も実行する場合は、ループを使用すると便利です。

for ループを使用することが多く、for ループ部門はよく次のように記述します:

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么}
ログイン後にコピー

このようなコードには大きな問題はありませんが、ループするたびに次の長さが取得されます。配列、特に myarray が配列ではなく HTMLCollection オブジェクトである場合、今回はコードを削減します。

次のコードをもう一度見てください:

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么}
ログイン後にコピー

このコードは配列の長さを 1 回だけ取得するため、コードの品質が向上します。

単一の var 形式を使用すると、ループから変数を取り出すことができます。 like 以下は次のとおりです:

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }}
ログイン後にコピー

JavaScript が for ループを使用する場合の問題の概要

この問題の議論はもともと会社の内部メールから来たもので、この問題の議論を記録したところです。

一部のプロジェクト チームは、"for(x in array)" を使用すると、IE ブラウザーで x に予期しない値が表示されるという問題を発見しました。

具体的には、Array.prototype.indexOfメソッドがカスタマイズされている場合(たとえば、特定のプロトタイプ汚染が原因)、古いバージョンのIEブラウザがarray.indexOfメソッドをサポートしていないことが原因である可能性があり、開発者はそれを使用したい場合、そのようなブラウザには次の問題が発生する可能性があります:

Array.prototype.indexOf = function(){...};
var arr = [1, 2];for (x in arr) console.log(x);
ログイン後にコピー

//は

1
2function(){…}
ログイン後にコピー

を出力します。つまり、 indexOf メソッドが出力されます。

解決策は非常に簡単で、このメソッドを追加しないか、「for (i=0; i などのようなループを使用します。

しかし、問題の本質は何でしょうか? for(x in obj) の使用法は実際にはオブジェクトを走査するためであり、配列の実装は、key が単に確立されたものであることを除いて、実際には通常のオブジェクトの実装と同じであるためではないかと推測する人もいます。 value:

{0:"something", 1:"something else"}
ログイン後にコピー

配列を走査するときの for...in と for(;;) の使用には違いがあることも stackoverflow の質問と回答で述べられています。前者はオブジェクトのプロパティを列挙することを意味します。

列挙の順序は保証できません;

継承されたプロパティも列挙されます

Array.prototype.forEach

のサポートに関しては、IE8 と以下は正確にサポートできません: forEach メソッドの互換性の詳細な説明もここにあります。実際、主要な JavaScript フレームワーク (jQuery、Underscore、Prototype など) にはすべて、for-each 機能の安全で一般的な実装があります。

JSLint の for in の章でも、for in ステートメントではオブジェクトの属性名をループすることができますが、プロトタイプ チェーンを通じて継承された属性もトラバースするため、多くの場合予期しないエラーが発生することについても説明されています。大まかな解決策があります:

for (name in object)
 { if (object.hasOwnProperty(name))
 { .... } }
ログイン後にコピー

このループと同様の

for(var i=0;i の使用の問題について言及している人もいます。これは、JavaScript にはコード ブロック レベルの変数がないためです。 i のアクセス許可は、実際にはそれが配置されているメソッドです。一部の本では、そのような変数宣言を 1 か所にまとめるようプログラマにアドバイスしていますが、直感的に言えば、ほとんどの場合、それは十分合理的ではありません。 JavaScript 1.7 で導入された "let" を使用すると、この問題を解決でき、i を実際のコード ブロック レベルの変数にすることができます:

for(let i =0; i < a.length; i++)
ログイン後にコピー

最後に、この制約は Google の JavaScript スタイル ガイドにも含まれています:

for-in loop:
Only for iterating over keys in an object/map/hash
ログイン後にコピー

上記は、の内容全体です。この記事は、JavaScript で for ループを使用する際に注意すべき問題についてまとめたもので、今後の作業や研究に役立つことを願っています。業界関係者からの批判や提案を歓迎します。

以上がJavaScriptでforループを使用する場合の注意点の詳細内容です。詳細については、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

明朝試験で注意すべき事項の紹介 明朝試験で注意すべき事項の紹介 Mar 13, 2024 pm 08:13 PM

Mingchao テスト中は、情報の損失やゲームへの異常なログインを防ぐために、システムのアップグレード、工場出荷時設定へのリセット、部品の交換は避けてください。特別な注意事項: テスト期間中は異議申し立てチャンネルがありませんので、取り扱いには注意してください。 Mingchao テスト中に注意が必要な事項の紹介: システムのアップグレード、工場出荷時の設定の復元、機器のコンポーネントの交換などは行わないでください。注: 1. 情報の損失を避けるため、テスト期間中は慎重にシステムをアップグレードしてください。 2. システムをアップデートすると、ゲームにログインできなくなる問題が発生する可能性があります。 3. 現段階ではまだアピールチャンネルは開設されていないため、アップグレードするかどうかはプレイヤー自身の判断で選択してください。 4.同時に、1つのゲームアカウントは1台のAndroidデバイスと1台のPCでのみ使用できます。 5. 携帯電話システムをアップグレードしたり、工場出荷時の設定に戻したり、デバイスを交換したりする前に、テストが完了するまで待つことをお勧めします。

初めてDouyinでライブブロードキャストを開始するにはどうすればよいですか?初めてライブ配信をする際に気をつけることは何ですか? 初めてDouyinでライブブロードキャストを開始するにはどうすればよいですか?初めてライブ配信をする際に気をつけることは何ですか? Mar 22, 2024 pm 04:10 PM

ショートビデオプラットフォームの台頭により、Douyinは多くの人々の日常生活に欠かせないものになりました。 Douyin でのライブ配信やファンとの交流は、多くのユーザーの夢です。では、Douyin で初めてライブブロードキャストを開始するにはどうすればよいでしょうか? 1.Douyinで初めてライブブロードキャストを開始するにはどうすればよいですか? 1. 準備 ライブブロードキャストを開始するには、まずDouyinアカウントが実名認証を完了していることを確認する必要があります。実名認証のチュートリアルは、Douyin APP の「自分」 -&gt; 「設定」 -&gt; 「アカウントとセキュリティ」にあります。実名認証が完了すると、ライブ配信条件を満たしてDouyinプラットフォームでライブ配信を開始できます。 2. ライブ配信許可を申請する ライブ配信条件を満たした後、ライブ配信許可を申請する必要があります。 Douyin APPを開き、「自分」→「クリエイターセンター」→「ダイレクト」をクリックします。

ネットワークなしで pip をインストールする手順と注意事項 ネットワークなしで pip をインストールする手順と注意事項 Jan 18, 2024 am 10:02 AM

オフライン環境に pip をインストールする方法と注意点. ネットワークがスムーズでないオフライン環境では、pip のインストールが困難になります。この記事では、オフライン環境に pip をインストールするいくつかの方法を紹介し、具体的なコード例を示します。方法 1: オフライン インストール パッケージを使用する インターネットに接続できる環境で、次のコマンドを使用して、公式ソースから pip インストール パッケージをダウンロードします: pipdownloadpip このコマンドは、公式ソースから pip とその依存パッケージを自動的にダウンロードし、現在のディレクトリに保存します。ダウンロードした圧縮パッケージをリモートの場所に移動します

localstorage を使用してデータを保存する手順と注意事項 localstorage を使用してデータを保存する手順と注意事項 Jan 11, 2024 pm 04:51 PM

localStorage を使用してデータを保存する手順と注意事項 この記事では、主に localStorage を使用してデータを保存する方法と、関連するコード例を紹介します。 LocalStorage は、サーバーを経由せずにデータをユーザーのコンピューターのローカルに保持する、ブラウザーにデータを保存する方法です。 localStorage を使用してデータを保存する手順と注意事項は次のとおりです。ステップ 1: ブラウザが LocalStorage をサポートしているかどうかを確認する

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

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

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

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

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

See all articles