メインコンテンツにスキップ
モジュール 3 · レッスン 4 / 4コース内の 12/32~10 min
モジュールのレッスン (4/4)

コレクションの反復処理

コレクションの操作は、ほとんどの場合反復、つまりウォークスルーを意味します。 要素を一度に 1 つずつ処理し、それぞれに対して何かを実行します。このレッスンでは、 基本的な構文を見てください。 関数配列 モジュール内 (map / filter/reduce) それらをより宣言的に書く方法を学びます。

for…of (配列の場合)

これは、配列を反復するためにほぼ常に使用するループです。 すべてのステップで 値 を抽出します。

JS
const colori = ['rosso', 'verde', 'blu'];

for (const c of colori) {
  console.log(c);
}
// 'rosso'
// 'verde'
// 'blu'

インデックスも必要な場合は、entries() を使用します。

JS
for (const [i, c] of colori.entries()) {
  console.log(`${i}: ${c}`);
}
// '0: rosso', '1: verde', '2: blu'

オブジェクトの for…in — 注意が必要です

for…in は、オブジェクトの キー (文字列) を反復します。

JS
const utente = { nome: 'Anna', eta: 28 };
for (const k in utente) {
  console.log(`${k} = ${utente[k]}`);
}

Object.keys / values / entries

これらはオブジェクトを反復するための堅牢な方法です。それらは配列を返します。 これらは for…of と非常によく組み合わされます。

JS
const utente = { nome: 'Anna', eta: 28 };

Object.keys(utente); // ['nome', 'eta']
Object.values(utente); // ['Anna', 28]
Object.entries(utente); // [['nome', 'Anna'], ['eta', 28]]

for (const [k, v] of Object.entries(utente)) {
  console.log(`${k} → ${v}`);
}

クラシック for

「昔ながらの」for はまだ存在します。使用頻度は低いですが、便利ですよ インデックスを細かく制御する必要がある場合 (要素のスキップ、反復処理) 後ろ向き):

JS
for (let i = 0; i < colori.length; i++) {
  console.log(i, colori[i]);
}

// Backwards
for (let i = colori.length - 1; i >= 0; i--) {
  console.log(colori[i]);
}

試してみてください

運動#js.m3.l4.e1
試行回数: 0読み込み中…

`numbers = [3, 5, 7]` とすると、for...of を繰り返してすべての要素の合計 (15) を計算します。最後の式は合計として評価される必要があります。

エディターを読み込み中…
ヒントを表示

for (数値の定数 n) { 合計 = 合計 + n; }

3 回の試行後に解決策が利用可能になります

復習演習

運動#js.m3.l4.e2
試行回数: 0読み込み中…

`prices = { mela: 0.4, pera: 0.55, Banana: 0.3 }` とすると、Object.keys を使用してオブジェクト内のエントリの合計数 (3) を返します。

エディターを読み込み中…
ヒントを表示

Object.keys(obj) は配列を返します。 .length はキーの数を示します。

3 回の試行後に解決策が利用可能になります