shift（Array、配列）
このページでは豊富な例を用いてJavaScript（js）のArrayオブジェクトのshiftメソッドの使い方を学ぶことができます。
JavaScript（js）のshiftメソッドはArrayオブジェクト（配列）のメソッドの1つです。
shiftメソッドは呼び出し元の配列の先頭の要素（インデックスの値が0の要素）を削除し、削除した要素を返り値として返します。
また、shiftメソッドは呼び出した配列自体を変更するメソッドであることに注意して使用してください。
TL;DR
基本
// 配列の先頭の要素を削除し、削除した値を返り値として返します
const array1 = ['js', 'javascript', 'typescript'];
console.log(array1.length);
==> 3
const returnValue1 = array1.shift();
console.log(returnValue1);
==> js
// 呼び出し元の配列は変更される
console.log(array1);
==> [ 'javascript', 'typescript' ]
console.log(array1.length);
==> 2
// オブジェクトの配列
const array2 = [{ name: 'Alice' }, { name: 'Anushka' }];
console.log(array2.shift());
==> { name: 'Alice' }
console.log(array2);
==> [ { name: 'Anushka' } ]
// 空配列
const array3 = [];
console.log(array3.shift());
==> undefinedループ処理中のshiftの使用
// ループ処理中に配列の長さが変わる場合.1（for）
const array1 = [100, 200, 300];
for (let i = 0; i < array1.length; i++) {
if (i === 1) {
array1.shift();
console.log(array1);
}
console.log(array1[i]);
}
==> 100
==> [ 200, 300 ]
==> 300
console.log(array1);
==> [ 200, 300 ]
// ループ処理中に配列の長さが変わる場合.2（for...of）
const array2 = [100, 200, 300];
for (const element of array2) {
if (element === 300) {
array2.shift();
}
console.log(element);
}
==> 100
==> 200
==> 300
console.log(array2);
==> [ 200, 300 ]
// ループ処理中に配列の長さが変わる場合.3（forEach）
const array3 = [100, 200, 300];
array3.forEach(element => {
if (element === 100) {
array3.shift();
}
console.log(element);
});
==> 100
==> 300
console.log(array3);
==> [ 200, 300 ]関連情報：for文の使用方法
関連情報：for...of文の使用方法
関連情報：forEachメソッド（Array、配列）の使用方法
解説
基本
shiftメソッドはArrayオブジェクト（配列）のメソッドであり、呼び出し元配列の先頭の要素を削除します。
返り値は削除した要素が返ります。
要素が1つもない（長さが0）の配列に対して使用すると、返り値はundefinedとなります。
shiftメソッドを使用すると呼び出し元配列を直接変更することになるので、この点に注意して使用してください。
// 配列の先頭の要素を削除し、削除した値を返り値として返します
const array1 = ['Foo', 'Bar', 'Ninja'];
console.log(array1.length);
==> 3
const returnValue1 = array1.shift();
console.log(returnValue1);
==> Foo
// 呼び出し元の配列が変更されている
console.log(array1);
==> [ 'Bar', 'Ninja' ]
console.log(array1.length);
==> 2
const array2 = [{ subject: 'math', score: 80 }, { subject: 'science', score: 100 }];
console.log(array2.shift());
==> { subject: 'math', score: 80 }
console.log(array2);
==> [ { subject: 'science', score: 100 } ]
// 空配列
const array3 = [];
console.log(array3.shift());
==> undefinedループ処理中のshiftの使用
for文 などを用いたループ処理の最中にshiftメソッドを使用すると、先頭の要素が削除されるため処理している配列の長さ（length）が変わります。
ループ処理中に配列の長さが変わらない場合と、配列の長さが変わる場合では挙動が異なります。 ループ処理中にshiftメソッドを使用する際はこの点を意識して使用してください。
// ループ処理中に配列の長さが変わる場合.1（for）
const array1 = ['js', 'JavaScript', 'TypeScript'];
for (let i = 0; i < array1.length; i++) {
if (i === 1) {
array1.shift();
console.log(array1);
}
console.log(array1[i]);
}
==> js
==> [ 'JavaScript', 'TypeScript' ]
==> TypeScript
console.log(array1);
==> [ 'JavaScript', 'TypeScript' ]
// ループ処理中に配列の長さが変わる場合.2（for...of）
const array2 = ['js', 'JavaScript', 'TypeScript'];
for (const element of array2) {
if (element === 'JavaScript') {
array2.shift();
}
console.log(element);
}
==> js
==> JavaScript
console.log(array2);
==> [ 'JavaScript', 'TypeScript' ]
// ループ処理中に配列の長さが変わる場合.3（forEach）
const array3 = ['js', 'JavaScript', 'TypeScript'];
array3.forEach(element => {
if (element === 'js') {
array3.shift();
}
console.log(element);
});
==> js
==> TypeScript
console.log(array3);
==> [ 'JavaScript', 'TypeScript' ]関連情報：for文の使用方法
関連情報：for...of文の使用方法
関連情報：forEachメソッド（Array、配列）の使用方法