ES6 の配列は for of を使用して走査できますか?

es6 の配列は、for of を使用して走査できます。 「for...of」ステートメントは、反復可能なオブジェクトを反復するループを作成します。ES6 では、「for...in」と forEach() を置き換える「for...of」ループが導入され、新しい反復プロトコルがサポートされています。 「for...of」ステートメントを使用すると、開発者は配列、文字列、マップ、セットなどの反復可能なデータ構造をトラバースできます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

for...of ループとは

for...of ステートメントは、反復可能なオブジェクトを反復するループを作成します。 for...of ループは、for...in と forEach() を置き換えるために ES6 で導入され、新しい反復プロトコルをサポートします。 for...of 配列、文字列、マップ、セットなどの反復可能なデータ構造をトラバースできるようにします。

構文

for (variable of iterable) {
    statement
}

• 変数: 各反復の属性値がこの変数に割り当てられます。
• iterable: 列挙可能なプロパティを持ち、反復可能なオブジェクト。

ユースケース

いくつかのユースケースを見てみましょう。

Arrays(array)

Arrays(array) はリストのようなオブジェクトです。配列プロトタイプには、変更やトラバーサルなどの操作を可能にするさまざまなメソッドがあります。次の for...of 操作が配列に対して実行されます:

// array-example.js
const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// mini
// mani
// mo

結果は、iterable 配列内の各値を出力します。

デモ: https://jsbin.com/dimahag/edit?js,console

Maps(マッピング)

Map オブジェクトは key-value(key value) を保存します） 右。オブジェクトとプリミティブ値をキーまたは値として使用できます。マップ オブジェクトは、要素の挿入方法に基づいて要素を反復します。つまり、for...of ループは、反復ごとにキーと値の配列を返します。

// map-example.js
const iterable = new Map([['one', 1], ['two', 2]]);
 
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}
 
// Output:
// Key: one and Value: 1
// Key: two and Value: 2

デモ: https://jsbin.com/lofewiw/edit?js,console

Set(set)

Set(set) オブジェクトを使用すると、任意のデータを保存できます。 type プリミティブ値またはオブジェクトとなる一意の値。 Set オブジェクトは単なる値のコレクションです。 Set 要素の反復は、挿入順序に基づいて行われます。 Set 内の値は 1 回だけ出現します。複数の同一の要素を含む Set を作成した場合でも、それは 1 つの要素とみなされます。

// set-example.js
const iterable = new Set([1, 1, 2, 2, 1]);
 
for (const value of iterable) {
  console.log(value);
}
// Output:
// 1
// 2

セットには複数の 1 と 2 がありますが、出力は 1 と 2 のみです。

デモ: https://jsbin.com/fajozob/edit?js,console

String(String)

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

// string-example.js
const iterable = 'javascript';
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// "j"
// "a"
// "v"
// "a"
// "s"
// "c"
// "r"
// "i"
// "p"
// "t"

ここでは、文字列を反復処理して、各インデックスの文字を出力します。

デモ: https://jsbin.com/rixakeg/edit?js,console

Arguments オブジェクト(パラメータ オブジェクト)

パラメータ オブジェクトをクラスとして考える配列-like オブジェクトであり、関数に渡される引数に対応します。使用例は次のとおりです:

// arguments-example.js
function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');
// Output:
// a
// b
// c

どうしたのかと思っているかもしれません! 前に述べたように、関数を呼び出すと、arguments は受信 args() ## を受け取ります。 # 関数のパラメータ。したがって、20 個の引数を args() 関数に渡すと、20 個の引数が出力されます。

デモ: https://jsbin.com/ciqabov/edit?js,console

Generators

ジェネレーターは、関数を終了し、再度実行できる関数です。後で関数を入力します。

// generator-example.js
function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 
 
for (const g of generator()) { 
  console.log(g); 
}
 
// Output:
// 1
// 2
// 3

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

デモ: https://jsbin.com/faviyi/edit?js,console

反復の終了

JavaScript には、ループの実行を終了するための 4 つの既知のメソッドが用意されています。 Break

、Continue、return、および throw。例を見てみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const iterable = ['mini', 'mani', 'mo'];   for (const value of iterable) {   console.log(value);   break; }   // Output: // mini</pre><div class="contentsignin">ログイン後にコピー</div></div> この例では、

break

キーワードを使用して 1 回の実行後にループを終了するため、mini のみが出力されます。 デモ: https://jsbin.com/tisuken/edit?js,console

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

for...of

ループは反復でのみ機能します。そして、通常のオブジェクトは反復可能ではありません。見てみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const obj = { fname: 'foo', lname: 'bar' };   for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function     console.log(value); }</pre><div class="contentsignin">ログイン後にコピー</div></div>ここでは、通常のオブジェクト

obj

を定義し、それに対して for...of を操作しようとすると、エラーが発生します。報告されます: TypeError: obj[Symbol.iterator] は関数ではありません。 デモ: https://jsbin.com/sotidu/edit?js,console

我们可以通过将类数组(array-like)对象转换为数组来绕过它。该对象将具有一个 length 属性，其元素必须可以被索引。我们来看一个例子：

// object-example.js
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-like)或可迭代对象来创建一个新的 Array(数组) 实例。

Demo: https://jsbin.com/miwofin/edit?js,console

For…of vs For…in

for...in 循环将遍历对象的所有可枚举属性。

//for-in-example.js
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 也会打印出来。

Demo: https://jsbin.com/quxojof/edit?js,console

for...of 更多用于特定于集合（如数组和对象），但不包括所有对象。

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

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

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

Demo: https://jsbin.com/sakado/edit?js,console

小结

了解 for...of 循环的使用可以在开发过程中节省大量的时间。 希望本文帮助你在JavaScript开发中了解和编写更好的循环结构。 让你快乐编码！

完整的示例代码：https://github.com/codediger/javascript-for-of-loop

【相关推荐：javascript视频教程、编程视频】

以上がES6 の配列は for of を使用して走査できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。