配列とオブジェクトのループ処理

配列

for

特徴：標準的なループ処理であり、配列のインデックスを使用することができる。
注意点：ループの終了条件が明確でない場合、無限ループに陥る可能性がある。

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

for...of

特徴：forループと同様に配列の要素に対する処理を行うことができるが、配列のインデックスを意識する必要がないため、コードがシンプルになる。
注意点：ループの終了条件が明確でない場合、無限ループに陥る可能性がある。

const array = [1, 2, 3];
for (const element of array) {
  console.log(element);
}
// 出力結果: 1, 2, 3

forEachメソッド

特徴：配列の各要素に対して、指定された処理を順番に実行することができる。
注意点：ループの終了条件がなく、中断することができない。

const array = [1, 2, 3];
array.forEach((element) => {
  console.log(element);
});
// 出力結果: 1, 2, 3

mapメソッド

特徴：配列の各要素に対して、指定された処理を行い、その結果を新しい配列に格納することができる。
注意点：元の配列自体は変更されず、新しい配列が生成されるため、処理が重い場合にはパフォーマンスの問題が発生する可能性がある。

const array = [1, 2, 3];
const newArray = array.map((element) => {
  return element * 2;
});
console.log(newArray);
// 出力結果: [2, 4, 6]

filterメソッド

特徴：配列の各要素に対して、指定された処理を行い、trueを返した要素だけを新しい配列に格納することができる。
注意点：元の配列自体は変更されず、新しい配列が生成されるため、処理が重い場合にはパフォーマンスの問題が発生する可能性がある。

const array = [1, 2, 3];
const newArray = array.filter((element) => {
  return element > 1;
});
console.log(newArray);
// 出力結果: [2, 3]

reduceメソッド

特徴：配列の各要素に対して、指定された処理を行い、その結果を累積して1つの値を返すことができる。
注意点：初期値が必要であり、その型と処理の返り値の型が一致している必要がある。

const array = [1, 2, 3];
const result = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(result);
// 出力結果: 6

オブジェクト

for...inループ

特徴

オブジェクトのプロパティを順番にループできます。
プロパティ名を取得するため、for...inループの変数には、オブジェクトのプロパティ名が順番に格納されます。

注意点

オブジェクトのプロパティの順番が保証されていません。
オブジェクトの継承元のプロパティも取得します。
配列などの他のデータ型に対しては使えません。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Alice
// age: 30
// gender: female

Object.keys()メソッド

特徴

オブジェクトのプロパティ名のみを取得し、配列として返します。
ループ回数が自動的に決定されます。プロパティの数だけループが行われます。

注意点

オブジェクトのプロパティの順番が保証されていません。
オブジェクトの継承元のプロパティは取得しません。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const keys = Object.keys(person);

for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(key + ": " + person[key]);
}

// Output:
// name: Alice
// age: 30
// gender: female

Object.values()メソッド

特徴

オブジェクトのプロパティの値のみを取得し、配列として返します。
ループ回数が自動的に決定されます。プロパティの数だけループが行われます。

注意点

オブジェクトのプロパティの順番が保証されていません。
オブジェクトの継承元のプロパティは取得しません。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const values = Object.values(person);

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

// Output:
// Alice
// 30
// female

Object.entries()メソッド

特徴

オブジェクトのプロパティ名と値のペアを、配列として取得します。
ループ回数が自動的に決定されます。プロパティの数だけループが行われます。
各要素は、プロパティ名と値のペアを持つ配列として返されます。

注意点

オブジェクトのプロパティの順番が保証されていません。
オブジェクトの継承元のプロパティは取得しません。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const entries = Object.entries(person);

for (let i = 0; i < entries.length; i++) {
  const key = entries[i][0];
  const value = entries[i][1];
  console.log(key + ": " + value);
}

// Output:
// name: Alice
// age: 30
// gender: female

配列に変換する方法としては、Object.entries()メソッドを使用して取得したプロパティ名と値のペアの配列を、Array.prototype.map()メソッドを使って値の配列に変換することができます。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const values = Object.entries(person).map(entry => entry[1]);

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

// Output:
// Alice
// 30
// female

Object.getOwnPropertyNames()メソッド

特徴

オブジェクト自身が持つ全てのプロパティ名を、配列として取得します。
プロパティ名の順番は、オブジェクトの定義順に従います。
プロパティ名だけが取得されるため、値は取得できません。

注意点

Object.getOwnPropertyNames()は、オブジェクトの継承元のプロパティを取得しません。継承元のプロパティも含めて全てのプロパティを取得したい場合は、Object.getOwnPropertyNames()とObject.getPrototypeOf()を組み合わせて使用する必要があります。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const properties = Object.getOwnPropertyNames(person);

for (let i = 0; i < properties.length; i++) {
  const key = properties[i];
  console.log(key + ": " + person[key]);
}

// Output:
// name: Alice
// age: 30
// gender: female

配列に変換する場合には以下のように値を取得する方法が必要です。

const person = {
  name: "Alice",
  age: 30,
  gender: "female"
};

const properties = Object.getOwnPropertyNames(person);
const values = [];

for (let i = 0; i < properties.length; i++) {
  values.push(person[properties[i]]);
}

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

// Output:
// Alice
// 30
// female