JavaScript で for ループ ってどう書くんだっけ？

• あるWebサービスの開発メモ・目次ページに戻る
• あるWebサービスの開発メモ・JavaScript チートに戻る

やりたいこと

本サービスではユーザの生まれ年を登録していただこうとしています。これには mui の Select コンポーネントを使用します。あらかじめ選択肢をセットした配列を作成し、これを map で展開して Select コンポーネントの選択肢として設定しようとしています

実装

const years = [];
for (let i = 1921; i <= 2022; i++) {
  years.push(String(i));
}

JavaScript の for ループは C と全く同じでした。これならもう忘れることなく for ループは書けそうです

JSX 側ではこのように Select コンポーネントに選択肢をセットしています

<Select
  value={editedProfile.year_of_birth || ""}
  label=""
  onChange={(e) => yearHandleChange(e)}
>
  <MenuItem key="1920" value="1920">
    1920年以前
  </MenuItem>
  {years.map((val) => (
    <MenuItem key={val} value={val}>
      {val}
    </MenuItem>
  ))}
  <MenuItem key="9999" value="9999">
    教えない
  </MenuItem>
</Select>

for-of

配列要素を順次取り出して処理する場合に使用します

react-query で読み出したキャッシュは、オブジェクトの配列になっているため、これらを読み出しつつ、何らかのデータ操作を行う場合に　for-of を使用しています

// キャッシュを　posts に取得しておく

let exwk: Date;
let dtstr: string;
for (const post of posts) {
  // 例えば date 型のオブジェクトから `1月23日` といった文字列に変換する　とか
  exwk = new Date(post.expire);
  dtstr = （exwk.getMonth() + 1) + "月" + exwk.getDate() + "日"
  console.log(dtstr)
}

## for-in

私はあまり使用しません。オブジェクトの全プロパティを取り出す必要があれば使うことになるんだと思います

for (const post of posts) {
for (const name in post) {
console.log(${name}: ${post[name]});
}
}