11ループ
11-1 for文の使い方
for (変数宣言; 繰り返し回数定義; どう繰り返すのか) {
繰り返し処理
}forを使って配列をループで取得すると以下のようになります。
let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];
for (let i = 0; i<=3; i++){
console.log(flower[i]);
}
// ひまわり
// あさがお
// チューリップ
// どくだみ11-2 forEach文の使い方
forEachメソッドを用いると、上より簡単に配列の中身を取り出すこともできます。
let flowers = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];
function getFlower(flower){
console.log(flower);
}
flowers.forEach(getFlower);
// ひまわり
// あさがお
// チューリップ
// どくだみ11-3 for…of
「for…of」は「反復可能オブジェクト」を一つずつ取り出して、処理を行うために使います。ここでいう反復可能オブジェクトとは、配列やMap、Setなどのことを指します。
それでは、これらのオブジェクトに対してどのように「for…of」が使用できるのか実際に見てみましょう。
配列: 複数の値を順序づけて格納するために使用します。
const numbers = [1, 2, 3, 4, 5]
for (const number of numbers) {
console.log(number);
}
> 1
> 2
> 3
> 4
> 5Map: キーと値のペアを格納するために使用します。setの際にkey, valueの形で格納されます。
const map = new Map();
map.set("apple", "りんご");
map.set("banana", "バナナ");
for (const row of map) {
// 配列の0番目にキー、1番目に値が格納されている
console.log(row[0], row[1]);
}
> apple りんご
> banana バナナまた、Mapの場合は「分割代入」のように任意の変数名でキーと値を受け取り、ループ内で使用もできます。
const capitals = new Map();
capitals.set('日本', '東京');
capitals.set('アメリカ', 'ワシントンD.C.');
for (const [country, capital] of capitals) {
console.log(`${country}の首都は${capital}です。`);
}
> 日本の首都は東京です。
> アメリカの首都はワシントンD.C.です。Set: 重複しない値を格納するために使用します。配列と似ているが各要素がユニークです。
const uniqueNumbers = new Set();
uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(3);
uniqueNumbers.add(2); // 重複する値は無視されるため、uniqueNumbersの中身は「1, 2, 3」
for (const number of uniqueNumbers) {
console.log(number);
}
> 1
> 2
> 3以上が「for…of」の使用方法になります。
この構文は、データの集まりを一つずつ取り出して処理する際に、非常に役立ちます。
11-4 for…in
「for…in」はオブジェクトのすべての列挙可能なプロパティを通じてループするために使われます。
これはオブジェクトのキー（プロパティ名）を取得するのに便利です。
構文:
for (const key in obj) {
オブジェクトの各プロパティに対する繰り返し処理
}key: オブジェクトのプロパティが1つずつ渡されます。
obj: オブジェクトや配列を設定します。
例:
const fruits = { apple: "りんご", banana: "バナナ", orange: "オレンジ" };
for (const key in fruits) {
console.log(`キー[${key}] 値:[${fruits[key]}]`);
}
> キー[apple] 値:[りんご]
> キー[banana] 値:[バナナ]
> キー[orange] 値:[オレンジ]「for…in」は配列に対しても使用できますが、渡される要素の順番が担保されていないため配列に対しては「for」文や「for…of」を使用するのが推奨されています。
「for…in」と「for…of」は似ていますが、それぞれ使用する目的が異なります。
for…in: オブジェクトのプロパティ(キー)を列挙するために使用。
for…of: 反復可能オブジェクトの要素に繰り返しアクセスするために使用。
上記のことを意識して使い分けることを推奨します。
コメントを残す