JavaScript | 配列から要素を削除する（pop, shift）

JavaScript

2020.07.252025.10.25

主な内容の要点

主な内容の要点

JavaScript では、配列から要素を削除する方法がいくつかあります。代表的なのは次の 4 つです。

1. pop() メソッド：配列の最後の要素を削除

配列の最後の要素を削除する
削除した要素を戻り値として返す
配列が空なら undefined を返す

let fruits = ["apple", "melon", "peach"];
let removed = fruits.pop();
console.log(fruits); // ["apple", "melon"]
console.log(removed); // "peach"

let fruits = ["apple", "melon", "peach"];
let removed = fruits.pop();
console.log(fruits); // ["apple", "melon"]
console.log(removed); // "peach"

JavaScript

2. shift() メソッド：配列の最初の要素を削除

配列の最初の要素を削除する
削除した要素を戻り値として返す
残りの要素は前に詰められる

let fruits = ["apple", "melon", "peach"];
let removed = fruits.shift();
console.log(fruits); // ["melon", "peach"]
console.log(removed); // "apple"

let fruits = ["apple", "melon", "peach"];
let removed = fruits.shift();
console.log(fruits); // ["melon", "peach"]
console.log(removed); // "apple"

JavaScript

3. length プロパティを使って要素数を手動で削減

length を小さくすると、後ろの要素が削除される
length = 0 にすると配列が空になる

let fruits = ["apple", "melon", "peach", "grapes"];
fruits.length = 2;
console.log(fruits); // ["apple", "melon"]

fruits.length = 0;
console.log(fruits); // []

let fruits = ["apple", "melon", "peach", "grapes"];
fruits.length = 2;
console.log(fruits); // ["apple", "melon"]

fruits.length = 0;
console.log(fruits); // []

JavaScript

4. 空の配列を代入

変数に新しい空の配列 [] を代入する方法
ただし「元の配列を参照している別の変数」には影響しない点に注意

let fruits = ["apple", "melon", "peach"];
let fruits2 = fruits;

fruits = [];
console.log(fruits);  // []
console.log(fruits2); // ["apple", "melon", "peach"]

let fruits = ["apple", "melon", "peach"];
let fruits2 = fruits;

fruits = [];
console.log(fruits);  // []
console.log(fruits2); // ["apple", "melon", "peach"]