🙆‍♀️

JavaScriptの基礎をもう一度おさらいしたい【配列操作/配列メソッド編】

に公開
JavaScript
tech

以前はUdemyを中心に受講していたのですが、学んだきり仕事でも使うことがなく1,2年経過していました...

復習として、後から見返せるように記事として残してみたいと思います。

何編かに分けたいと思いますが、今回は配列操作/配列メソッド編です。

以前私が受講したUdemy講座はこちらです。

以下MDNを参考にして進めていきます
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide

配列

配列は値をリストのようにひとまとまりにしたものです。
以下のように定義します。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
console.log(animals);
console.log(animals[0]);//doc
console.log(animals[3]);//rabbit

配列操作

for文

配列をループ処理してそれぞれの値に何かしらの処理を加えます。
条件によっては途中でループ処理を止めることができます。

// for
const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

forEach

配列をループ処理して配列内のすべての値に何かしらの処理を加えます。
こちらはfor文と違い、メソッドになります。

// forEach
const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
animals.forEach((val) => {
  console.log(val);
});

for ... of

配列をループ処理してそれぞれの値に何かしらの処理を加えます。
forEachと異なる点は、途中で処理を止めることができる（for文とforEachの性質を併せ持つ）のが特徴です。

// for of
const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
for (const val of animals) {
  console.log(val);
}

indexOf

配列内の値からその値のインデックス番号を取得します。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
console.log(animals.indexOf("rabbit"));//2

push

配列の末尾に値を追加します。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
animals.push("horse", "giraffe");
console.log(animals);

pop

配列の最後の値を削除します。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
animals.pop();
console.log(animals);

splice

配列の位置と指定の位置から何個目かを指定し、値を置き換えたり、追加したり、削除したりします。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
animals.splice(2, 0, "monkey");
console.log(animals);

map

配列のすべての値を処理して、新たな配列として返します。

const users = [
  {
    name: "Bob",
    from: "America",
  },
  {
    name: "Mary",
    from: "America",
  },
  {
    name: "Yamada",
    from: "Japan",
  },
  {
    name: "Suzuki",
    from: "Japan",
  },
];

const usersGreet = users.map((user) => {
  if (user.from === "America") user.greet = "Hello!";
  if (user.from === "Japan") user.greet = "こんにちは！";
});

console.log(usersGreet);

filter

配列のすべての値に対して、条件を与えて絞り込み処理を行い、新たな配列として返します。

const users = [
  {
    name: "Bob",
    from: "America",
  },
  {
    name: "Mary",
    from: "America",
  },
  {
    name: "Yamada",
    from: "Japan",
  },
  {
    name: "Suzuki",
    from: "Japan",
  },
];

const japaneseUsers = users.filter((user) => user.from === "Japan");
console.log(japaneseUsers);

reducer

配列のすべての要素に対して処理を行い、前後の要素使用して計算した結果を返します。

const items = [
  { name: 'リンゴ', price: 100 },
  { name: 'バナナ', price: 200 },
  { name: 'オレンジ', price: 150 }
];

const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 450

join

配列の要素の文字列を1つの文字列として連結し、返却します。

const animals = ["doc", "cat", "rabbit", "lion", "elephant"];
console.log(animals.join(","));//「,」で区切る

split

文字列を分割し、配列として返却します。

const animals = "doc,cat,rabbit,lion,elephant";
console.log(animals.split(","));//「,」で区切る

参考資料

まとめ

  • 配列操作：for文、forEach、for...ofでループ処理（途中で止めたい時はfor文かfor...of）
  • 配列の変更：push（末尾追加）、pop（末尾削除）、splice（任意の位置で操作）
  • 配列の検索・変換：indexOf（位置取得）、map（新配列作成）、filter（絞り込み）、reduce（集計処理）
  • 文字列との変換：joinで配列→文字列、splitで文字列→配列
  • 重要：map、filter、reduceは元の配列を変更せず新しい配列を返す（非破壊的）
  • 配列操作は元の配列を変更してしまわぬように、時には[...Array]などでコピー作成することが大切

次回はPromiseについて復習予定です。

Discussion