push, pop, shift, unshiftの使用 | 配列メソッドの基本 | JavaScript 超完全入門 基本から発展までのすべて

配列操作の基本メソッド

JavaScriptには、配列の要素を追加・削除するための便利なメソッドがいくつかあります。その中でもpush、pop、shift、unshiftは、配列操作の基本メソッドとして広く使用されています。

pushメソッド

pushメソッドは、配列の末尾に要素を追加します。このメソッドは、追加後の配列の新しい長さを返します。

pushメソッドの例

const fruits = ["apple", "banana"];

// 新しい要素を末尾に追加
fruits.push("cherry");

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

この例では、配列fruitsに"cherry"が追加され、結果として["apple", "banana", "cherry"]となります。

popメソッド

popメソッドは、配列の末尾の要素を削除し、その要素を返します。このメソッドを使うことで、配列から最後の要素を簡単に取り除くことができます。

popメソッドの例

const fruits = ["apple", "banana", "cherry"];

// 最後の要素を削除
const lastFruit = fruits.pop();

console.log(fruits);      // ["apple", "banana"]
console.log(lastFruit);   // "cherry"

この例では、配列fruitsから"cherry"が削除され、fruitsは["apple", "banana"]になります。また、削除された要素"cherry"が変数lastFruitに格納されます。

shiftメソッド

shiftメソッドは、配列の先頭から要素を削除し、その要素を返します。popが末尾の要素を削除するのに対して、shiftは先頭の要素を削除します。

shiftメソッドの例

const fruits = ["apple", "banana", "cherry"];

// 最初の要素を削除
const firstFruit = fruits.shift();

console.log(fruits);      // ["banana", "cherry"]
console.log(firstFruit);  // "apple"

この例では、shiftメソッドによって配列fruitsの最初の要素"apple"が削除され、["banana", "cherry"]が残ります。

unshiftメソッド

unshiftメソッドは、配列の先頭に新しい要素を追加します。pushが末尾に要素を追加するのに対して、unshiftは先頭に要素を追加します。

unshiftメソッドの例

const fruits = ["banana", "cherry"];

// 先頭に新しい要素を追加
fruits.unshift("apple");

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

この例では、配列fruitsの先頭に"apple"が追加され、結果として["apple", "banana", "cherry"]となります。

push, pop, shift, unshiftの比較

これらのメソッドは、配列の末尾や先頭に対して要素を追加または削除するために使用されます。以下の表でそれぞれのメソッドの特徴を整理します。

まとめ

JavaScriptの配列操作において、push、pop、shift、unshiftは非常に基本的でありながら強力なメソッドです。これらを使うことで、配列の先頭や末尾に対して柔軟に要素を追加したり削除したりすることができます。各メソッドの特徴を理解し、状況に応じて使い分けることで、効率的に配列を操作できるようになります。