JavaScriptのunshift()関数：配列の先頭に新しい要素を追加する

定義と使用方

unshift()関数は、配列の先頭に新しい要素を1つ以上追加します。

特徴

新しい配列を返さず、元の配列自体を直接変更します。
このとき、追加された要素の分だけ配列の長さも増加します。
追加後の配列の長さを整数で返します。

基本の例

JavaScript

const arr = [1, 2, 3];

// 配列の先頭に1つの要素を追加します。
arr.unshift(4);
console.log(arr); // 出力: [4, 1, 2, 3]

// 配列の先頭に複数の要素を追加します。
arr.unshift(5, 6, 7);
console.log(arr); // 出力: [5, 6, 7, 4, 1, 2, 3]

push()関数はこれと似ていますが、配列の末尾に1つ以上の新しい要素を追加します。

構文

arrは、unshift()関数を適用する配列オブジェクトです。

パラメーター

unshift()関数のパラメーターの説明
`element1`, ..., `elementN`	配列の先頭に追加する要素です。配列に追加する1つ以上の値を指定できます。

戻り値

戻り値は、配列に要素が追加された後の合計要素数を示します。この値は整数（例：1、2、3、…）として返されます。

JavaScript

const arr = [1, 2, 3];

// 配列の先頭に1つの要素を追加し、戻り値を保存します。
const totalElements = arr.unshift(4);
console.log(totalElements); // 出力: 4

例

次の例は、unshift()関数を使用する例です。

1つの要素を追加

単一の要素を追加する場合は、unshift()関数に追加したい要素を引数として指定します。

JavaScript

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

// 配列の先頭に1つの要素を追加します。
fruits.unshift("date");

// 配列の内容を確認します。
console.log(fruits); // 出力: ['date', 'apple', 'banana', 'cherry']

複数の要素を追加

複数の要素を追加する場合は、unshift()関数に追加したい要素をカンマ（,）で区切って順に指定します。

JavaScript

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

// 配列の先頭に複数の要素を追加します。
fruits.unshift("date", "elderberry");

// 配列の内容を確認します。
console.log(fruits); // 出力: ['date', 'elderberry', 'apple', 'banana', 'cherry']

`unshift()`関数を使用した配列要素の逆順並べ替え

配列の要素を逆順に並べ替えたい場合、unshift()関数を使用することができます。

JavaScript

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = [];

numbers.forEach(number => {
    reversedNumbers.unshift(number);
});

console.log(reversedNumbers); // 出力: [5, 4, 3, 2, 1]

コード補足説明
forEach()関数は、配列を走査して各要素をコールバック関数で処理するための関数です。配列の各要素に対して、指定されたコールバック関数を順に1回ずつ実行します。

まず、numbersという配列を定義し、初期値として[1, 2, 3, 4, 5]を持たせています。
reversedNumbersという空の配列を作成します。この配列は、後で逆順に並べ替えられた要素を格納するために使用されます。
forEach()関数を使用して、numbers配列の各要素を順に処理します。各反復処理のたびに、現在の要素がnumber変数に格納されます。
unshift(number)関数を使用して、reversedNumbers配列の先頭に現在の要素であるnumberを追加します。この処理を繰り返すことで、要素が逆順にreversedNumbers配列へ追加されます。