JavaScript 配列の追加・削除・検索とは?push・pop・indexOfを初心者向けに解説【第6.5講】

■ 今回のゴール

前回は配列とオブジェクトの基本を学びました。

今回は「配列の基本操作」を学びます。

今日のゴールは、配列に対して追加・削除・検索ができるようになることです。

■ 配列の基本操作とは

配列は複数のデータをまとめて扱うことができます。

その配列に対して、データを追加したり削除したり、検索する操作を行うことができます。

これらは実務でも頻繁に使う非常に重要な操作です。

■ 要素の追加(push)

pushは配列の最後に新しい要素を追加するメソッドです。

追加後の配列の要素数(長さ)が戻り値として返ります。

let fruits = ["apple", "banana"];
let result = fruits.push("orange");

console.log(fruits); // ["apple", "banana", "orange"]
console.log(result); // 3

「配列の末尾に追加する」と覚えておきましょう。

■ 要素の削除(pop)

popは配列の最後の要素を削除するメソッドです。

削除された要素が戻り値として返ります。

let fruits = ["apple", "banana", "orange"];
let removed = fruits.pop();

console.log(fruits); // ["apple", "banana"]
console.log(removed); // "orange"

「最後の要素を取り出す」と覚えると理解しやすいです。

■ 要素数の取得(length)

lengthは配列の要素数を取得するためのプロパティです。

let fruits = ["apple", "banana", "orange"];

console.log(fruits.length); // 3

繰り返し処理(for文など)と一緒に使うことが多いです。

■ 要素の検索(indexOf)

indexOfは指定した値が配列の何番目にあるかを調べるメソッドです。

見つかった場合はインデックス番号(0から始まる)を返し、見つからない場合は-1を返します。

let fruits = ["apple", "banana", "orange"];

console.log(fruits.indexOf("banana")); // 1
console.log(fruits.indexOf("grape")); // -1

「存在チェック」によく使われます。

■ 応用:存在チェック

indexOfを使うことで、特定の要素が存在するかを判定できます。

let fruits = ["apple", "banana", "orange"];

if (fruits.indexOf("banana") !== -1) {
  console.log("存在します");
} else {
  console.log("存在しません");
}

■ まとめて理解する

操作 メソッド 説明
追加 push 末尾に追加
削除 pop 末尾を削除
要素数 length 要素数を取得
検索 indexOf 位置を取得(なければ-1)

■ 演習

次の配列を使って問題を解いてみましょう。

let numbers = [10, 20, 30];
  • 40を追加する
  • 最後の要素を削除する
  • 20が含まれているか確認する
  • 要素数を表示する

■ 次回予告

次回は配列の加工(map・filterなど)を学びます。

今回の内容がそのまま応用されるので、しっかり理解しておきましょう。

コメント

タイトルとURLをコピーしました