🌐

ループするコード

2023/05/29に公開

JavaScript

tech

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、ここを教本にしていきます。
その為、抜粋しながら進めたいと思います。

今回はこちらです。

コレクション^[1]内のループ処理

コレクションには、Array, String, TypedArray, Map, Set, NodeListなどがあります。

for...of

for...ofはコレクションをループ処理をする基本的なツールです

for (変数 of 配列) {
  文;
}

「for...of」の使用例

const numbers = ['1','2','3'];
for (const n of numbers) {
  console.log(n);
}
//1
//2
//3

map()

map()メソッドは、配列データに使うメソッドであり、各要素1つずつに対して「コールバック関数」を実行し、その結果を新しい配列として返すことが出来るようになっています。

const numbers = [ 配列データ ];
numbers.map( コールバック関数 );

「map()」の使用例

function toUpper(string) {
  return string.toUpperCase();
}
const items = ['Sun', 'Moon', 'Mars', 'Mercury', 'Jupiter'];
const upperItems = items.map(toUpper);
console.log(upperItems);
// ['SUN', 'MOON', 'MARS', 'MERCURY', 'JUPITER']

toUpperCase()メソッドは、呼び出す文字列の値を大文字に変換して返します。
（文字列でない場合は文字列に変換して返します）

filter()

filter()メソッドは、この配列の中から「コールバック関数」を実行し、一致するアイテムのみを格納した新しい配列を作成します。

const items = 配列データ;
items.filter( コールバック関数 )

「filter()」の使用例

function mItem(item) {
  return item.startsWith('M');
}
const items = ['Sun', 'Moon', 'Mars', 'Mercury', 'Jupiter'];
const filtered = items.filter(mItem);
console.log(filtered);
// ['Moon', 'Mars', 'Mercury'] （0:"Moon", 1:"Mars", 2:"Mercury", length:3）

startsWith()メソッドは文字列が引数で指定された文字列で始まるかを判定してtrue か false を返します。
もし true を返すなら、アイテムは新しい配列に含まれます。
ここではアイテムが文字「M」で始まるかどうかなので、名前が「M」で始まるものだけを含む配列になります。

map() と filter() は、どちらもよく関数式と一緒に使われます。
関数式を使用すると、上の例をもっとコンパクトに書き直すことができます。

const items = ['Sun', 'Moon', 'Mars', 'Mercury', 'Jupiter'];

const filtered = items.filter((item) => item.startsWith('M'));
console.log(filtered);
//['Moon', 'Mars', 'Mercury']

for

for文は、決められた回数だけ処理を繰り返す場合に使用します。事前にどんな処理を何回繰り返すのかを決めておくのが一般的です。

for (初期化処理; 条件; 最後の式) {
  // 実行するコード
}

「for()」の使用例

let num = '';
for (let i = 0; i < 5; i++) {
  num = num + i;
}
console.log(num);
// 01234

初期化処理: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。この変数をカウンター変数と呼ぶことがあります。

条件: これは、ループがいつ繰り返しをやめるかを定義します。これはふつう、比較演算子を伴って、終了条件に達したかどうかを確認します。

最後の式: これはループの 1 回が終了する度に評価される（または実行される）コードです。通常、カウンター変数を増加させ（場合によっては減少させ）、条件がtrue ではなくなるポイントに近づけていきます。

for ループでコレクションを繰り返し処理

for...of ループを使用してコレクションを反復処理する方法を見てみましょう。

const numbers = ['1','2','3'];
for (const n of numbers) {
  console.log(n);
}

こちらのfor...of ループは下記のように書き換えることができます。

const numbers = ['1','2','3'];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
  }
//1
//2
//3

時には、配列を繰り返し処理するために for ループを使用する必要があります。

配列を繰り返し処理するためにforループを使用する必要例

const items = ['Sun', 'Moon', 'Mercury'];
let myFavoriteItems = 'My items are called ';
for (const item of items) {
  myFavoriteItems += `${item}, `
}
console.log(myFavoriteItems); 
// My items are called Sun, Moon, Mercury,

「Moon, Mercury,」より「Moon, and Mercury.」の表示の方が綺麗なので書き換えたい。
そのためにはループがいつ最後の反復処理に入ったかを知る必要があります。
（for ループを使い、i の値を調べます）

const items = ['Sun', 'Moon', 'Mercury'];
let myFavoriteItems = 'My items are called ';
for (let i = 0; i < items.length; i++) {
  if (i === items.length - 1) {
    myFavoriteItems += `and ${items[i]}.`
  } else {
    myFavoriteItems += `${items[i]}, `
  }
}
console.log(myFavoriteItems);
// My items are called Sun, Moon, and Mercury.

break でループを終了

break 文を使用することで即時（すべての反復処理が終了する前）にループを抜けて、プログラムの制御を終了した文の次の文に移動します。

「break文の対象」となるのは for 文、 while 文、 do...while 文、 for...in 文、 for...of 文、 switch 文です。

break文の対象 {
　　　//文
if('条件') {
      break;
}
    }

「break」の使用文

let i = 0;
while (i < 10) {
  if (i === 5) {
    break;
  }
  i = i + 1;
}
console.log(i);
//5

continue で繰り返しをスキップする

continue 文は break と同じような動作をしますが、ループを完全に抜けてしまうのではなく、次の繰り返しまで飛ばします。

「continue文の対象」となるのは for 文、 while 文、 do...while 文、 for...in 文、 for...of 文です。

continue文の対象 {
　　　//文
if('条件') {
      continue;
}
    }

「continue」の使用文

let text = '';
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  text = text + i;
}
console.log(text);
//012346789

while と do...while

do...while ループと while ループの主な違いは、条件式の記載場所です。
do...while ループはループ内のコードの後に条件式が来るので、中のコードは1度は実行され、その後、もう一度実行する必要があるかどうかをチェックするのです。
while ループや for ループでは、条件式が最初に来るので、そのコードは一度も実行されないかもしれません。

では、見てみましょう。

while

while 文は、回数の決まっていない繰り返し処理を行うために使われるメソッドです。つまり、条件式が true と評価されている間、指定された文を実行するループを作成します。
条件式はその文を実行する前に評価されます。

初期化処理
while (条件式) {
  // 繰り返し処理(最後の式)  
}

「while」の使用文

const items = ['Sun', 'Moon', 'Mercury'];
let myFavoriteItems = 'My items are called ';
let i = 0;
while (i < items.length) {
  if (i === items.length - 1) {
    myFavoriteItems += `and ${items[i]}.`;
  } else {
    myFavoriteItems += `${items[i]}, `;
  }
  i++;
  }
console.log(myFavoriteItems); 
  //My items are called Sun, Moon, and Mercury.

for ループととてもよく似た動作を行いますが、書き方は異なります。
while文では初期化変数(初期化処理)がループの前に設定され、繰り返し処理(最後の式)が中括弧の中に含まれています。
条件式だけは括弧の中に入っていますが、その前にはforではなくwhileが置かれています。

3つの項目(初期化処理,条件式,最後の式)がfor ループと同じ順番で存在します。
これは、条件式がtrueかどうかをチェックする前に、初期化処理を定義しておく必要があるためです。そして、ループ内のコードが実行された（反復処理が完了した）後に最後の式が実行されますが、これは条件がまだ真(true)である場合にのみ実行されます。

do...while

do...while 文は、条件式に関わらず必ず処理を最初に1回だけ実行します。
そのあとで、条件式を評価し、false に評価されるまで実行するループを作成します。

初期化処理
do {
  //繰り返し処理(最後の式)
} while (条件式)

「do...while」の使用文

const items = ['Sun', 'Moon', 'Mercury'];
let myFavoriteItems = 'My items are called ';
let i = 0;
do {
  if (i === items.length - 1) {
    myFavoriteItems += `and ${items[i]}.`;
  } else {
    myFavoriteItems += `${items[i]}, `;
  }
  i++;
} while (i < items.length);
console.log(myFavoriteItems); 
// My items are called Sun, Moon, and Mercury.