JS の for...of ループについて詳しく学ぶ

この記事では、JavaScript の for...of ループについて詳しく説明します。一定の参考値があるので、困っている友達は参考にしていただければ幸いです。

#for...of ステートメントによって作成されたループは、オブジェクトを横断できます。 ES6 で導入された for...of は、他の 2 つのループ ステートメント for...in および forEach() を置き換えることができ、この新しいループ ステートメントは新しい反復プロトコルをサポートします。 for...of を使用すると、配列、文​​字列、マップ、セットなどの反復可能なデータ構造を反復処理できます。

#構文

for (variable of iterable) {
    statement
}

• 変数: 各反復の属性値は変数

## に割り当てられます。 # iterable: 列挙可能なプロパティを持ち、反復可能なオブジェクト
いくつかの例を使用して説明します。

配列

配列はオブジェクトのように見える単純なリストです。配列プロトタイプには、トラバーサルなどの操作を実行できるさまざまなメソッドがあります。次の例では、for...of を使用して配列を走査します。

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
    console.log(value);
}

// Output:
// => mini
// => mani
// => mo

結果は、

iterable

配列内の各値を出力します。

Map

Map

オブジェクトは key-value ペアを保持します。オブジェクトとプリミティブ値は、key または value として扱うことができます。 Mapオブジェクトは、挿入メソッドに従って要素を移動します。つまり、for...of は、各反復で kay-value ペアの配列を返します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const iterable = new Map([[&amp;#39;one&amp;#39;, 1], [&amp;#39;two&amp;#39;, 2]]); for (const [key, value] of iterable) { console.log(`Key: ${key} and Value: ${value}`); } // Output: // =&amp;gt; Key: one and Value: 1 // =&amp;gt; Key: two and Value: 2</pre><div class="contentsignin">ログイン後にコピー</div></div>

Set

Set

オブジェクトを使用すると、任意のタイプの一意の値 (プリミティブ値またはオブジェクト) を保存できます。 SetObject は単なる値のコレクションです。 Set要素の繰り返しは挿入順序に基づいており、各値は 1 回だけ出現します。同じ要素を持つ Set を複数回作成した場合でも、それは単一の要素とみなされます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const iterable = new Set([1, 1, 2, 2, 1]); for (const value of iterable) { console.log(value); } // Output: // =&amp;gt; 1 // =&amp;gt; 2</pre><div class="contentsignin">ログイン後にコピー</div></div>作成した

Set

には複数の 1 と 2 がありますが、トラバーサル出力は 1 と ## のみです#2。 String

String は、データをテキスト形式で保存するために使用されます。

const iterable = 'javascript';

for (const value of iterable) {
    console.log(value);
}

// Output:
// => "j"
// => "a"
// => "v"
// => "a"
// => "s"
// => "c"
// => "r"
// => "i"
// => "p"
// => "t"

ここでは、文字列を反復処理して、各インデックスの (

index

) にある文字を出力します。

Arguments オブジェクト

パラメータ オブジェクトは、関数に渡されるパラメータに対応する配列のようなオブジェクトと考えてください。使用例は次のとおりです:

function args() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

args('a', 'b', 'c');

// Output:
// => a
// => b
// => c

いったい何が起こっているのかと思われるかもしれません。前に述べたように、関数を呼び出すとき、引数は

args()

関数に渡された引数を受け取ります。したがって、

20 引数を args() 関数に渡すと、20 引数が出力されます。 オブジェクト、配列、関数を args()

関数に渡すなど、上記の例に基づいて調整を加えます。

function fn(){
return 'functions';
}

args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());

// Output:
// => "a"
// => "w3cplus"
// => "c"
// => Object {
// =>     "name": "airen"
// => }
// => Array [
// =>    "a",
// =>    1,
// =>    3
// => ]
// => "functions"

Generators

ジェネレーターは、関数を終了し、後で関数に再度入ることができる関数です。

function* generator(){ 
    yield 1; 
    yield 2; 
    yield 3; 
};

for (const g of generator()) { 
    console.log(g); 
}

// Output:
// => 1
// => 2
// => 3

function* ジェネレーター オブジェクトを返すジェネレーター関数を定義します。ジェネレーターの詳細については、

ここをクリックしてください

。

イテレータを閉じる

JavaScript には、ループを終了する 4 つの既知のメソッドが用意されています: break

、

Continue、return、throw。例を見てみましょう:

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
console.log(value);
break;
}

// Output:
// => mini

この例では、break

キーワードを使用してループを終了し、

mini のみを出力します。

通常のオブジェクトは反復可能ではありません

for...of

ループは反復でのみ機能します。ただし、通常のオブジェクトは反復可能ではありません。見てみましょう:

const obj = { fname: 'foo', lname: 'bar' };

for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

ここでは、for...of

を

obj## に試みるときに、通常のオブジェクト obj を定義します。エラーが報告されます: TypeError: obj[Symbol.iterator] は関数ではありません。 配列のようなオブジェクトを配列に変換できます。オブジェクトには length プロパティがあり、その要素にはインデックスを付けることができます。例を見てみましょう:

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
const array = Array.from(obj);
for (const value of array) { 
    console.log(value);
}
// Output:
// => foo
// => bar
// => baz

Array.from()このメソッドは、配列のような (Array-lik) オブジェクトまたは反復可能なオブジェクトから新しい配列インスタンスを作成します。

#…の

#vs.<span style="font-size: 20px;"> </span>…の for...inループでは、オブジェクト内のすべての列挙可能なプロパティが走査されます。

Array.prototype.newArr = () => {};
Array.prototype.anotherNewArr = () => {};
const array = ['foo', 'bar', 'baz'];
for (const value in array) { 
    console.log(value);
}
// Outcome:
// => 0
// => 1
// => 2
// => newArr
// => anotherNewArr

for...in配列で宣言された値を列挙できるだけでなく、コンストラクターのプロトタイプから継承された非列挙プロパティを検索することもできます。上の例のように、newArr

と

anotherNewArr を入力して出力します。

for...of可以对数组和对象等做更具体的操作，但并不表示包括所有对象。

注意：任何具有Symbol.iterator属性的元素都是可迭代的。

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

总结

理解for...of循环在开发过程中的用法，可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐！

相关免费学习推荐：js视频教程

以上がJS の for...of ループについて詳しく学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。