JavaScript には、for、for in、for of、forEach ループなど、多くのループ ステートメントがあります。今日は、Array、Object、Set (ES6)、Map (ES6) の 4 つのデータ構造のループ ステートメントのサポートと違いを比較します。 4つの新しいテストデータタイプを作成する arr = [1, 2, 3, 4, 5, 6]とします。 obj = { a: 1, b: 2, c: 3 } とします。 map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); set = new Set(['a', 'b', 'c']); 1 対通常の for ループは配列でも使用できます。 配列を走査する場合、配列の添字インデックスを走査し、添字を通じて値を取得します。 for (let i = 0; i < arr.length; i++) { // i は添え字(インデックス) コンソールログ(i) コンソールログ(arr[i]) } 2 でfor in は配列とオブジェクトの両方で使用できます。プロトタイプのプロパティもループアウトされることに注意してください。 配列arr = [1, 2, 3, 4, 5, 6]とします。 配列.プロトタイプ.a = "1" for (let i in arr) { // i は添え字(インデックス) コンソールログ(i) コンソールログ(arr[i]) } プロトタイプもループアウトされていることがわかりますが、これは必要なことではありません。hasOwnProperty を使用してプロトタイプのプロパティをフィルター処理できます。 arr = [1, 2, 3, 4, 5, 6]とします。 配列.プロトタイプ.a = "1" for (let i in arr) { // i は添え字(インデックス) もし(arr.hasOwnProperty(i)) { コンソールログ(i) コンソールログ(arr[i]) } } 物体obj = { a: 1, b: '2', c: 3 } とします。 オブジェクト.プロトタイプ.d = 4 for (let key in obj) { // keyはキーです console.log(key) console.log(obj[キー]) } Object にも同じ問題があります。プロトタイプ プロパティもループされ、プロトタイプのプロパティも hasOwnProperty を通じてフィルター処理されます。 for (let key in obj) { // key はキーです if (obj.hasOwnProperty(key)) { console.log(キー) console.log(obj[キー]) } } 3 のfor of は、Array、Object、Set、Map で使用できます。 配列配列は本質的にオブジェクトなので、暗黙のプロトタイプ (__proto__) で定義されたメソッドを見つけることができます。 for (let key of arr.keys()) { // keyは添え字です console.log(key) } for (let value of arr) { // valueは値です console.log(value) } for (let value of arr.values()) { // valueは値です console.log(value) } for (let [key, value] of arr.entries()) { // キーは添え字、値は値、console.log(key,value) } 物体for (let [key, value] of Object.entries(obj)) { // キーは添え字、値は値、console.log(key, value) } セットSetには重複がないので、キーと値は一貫しており、次の4つの出力は一貫していることを意味します。 for (let key of set.keys()) { console.log(キー) } for (let 値のセット) { console.log(値) } for (let 値 set.values()) { console.log(値) } for (let [キー, 値] of set.entries()) { console.log(キー、値) } 地図(map.keys() のキーを取得) { console.log(キー) } for (マップの値) { console.log(値) } for (map.values() の値を取得) { console.log(値) } map.entries() の (let [キー, 値]) { console.log(キー、値) } ループから抜け出すには break および continue ステートメントを使用し、関数本体から戻るには return を使用します。 for (let key of arr.keys()) { // キーは添え字です if (key == 3) { 戻る } console.log(キー) } for (let key of arr.keys()) { // キーは添え字です if (key == 3) { 壊す } console.log(キー) } for (let key of arr.keys()) { // キーは添え字です if (key == 3) { 続く } console.log(キー) } 4 それぞれforEach ループは、Array、Set、Map で使用できます。ただし、このメソッドでは、break または continue ステートメントを使用してループから抜け出すことも、return を使用して関数本体から戻ることもできません。 配列arr.forEach((値、インデックス) => { console.log(値、インデックス) }) セット set.forEach((値、キー) => { console.log(値、キー) }) 地図 map.forEach((値、キー) => { console.log(値、キー) }) 中断、継続、戻るプロンプトを表示するには続行を使用します 不正な継続ステートメント: 周囲の反復ステートメントがありません breakを使用すると 不正なbreak文 returnを使用すると、戻らずにループが継続されます。 5 結論通常の for ループは配列でも使用できます。配列を走査する場合、配列の添字インデックスを走査し、添字を通じて値を取得します。 for in は配列とオブジェクトの両方で使用できます。ただし、プロトタイプのプロパティもループアウトされることに注意してください。for と of は、Array、Object、Set、Map で使用できます。 break、continue、return も使用できます。forEach ループは、Array、Set、Map で使用できます。ただし、このメソッドでは、break または continue ステートメントを使用してループから抜け出すことも、return を使用して関数本体から戻ることもできません。 JavaScript 文でよく使われる for ループの詳しい説明はこれで終わりです。js for ループに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定
>>: nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)
MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...
多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...
現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...
CSS フォント プロパティは、テキストのフォント ファミリ、サイズ、太字、スタイル (斜体など)...
Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...
Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...
目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...
Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...
Windows: NTFS、FATをサポートLinux は次のファイル形式をサポートしています: C...
1. Windows 版の Docker をインストールしたら、Docker クイックスタート ター...
目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...
目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...
1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...