概要：このチュートリアルでは、JavaScript Array の unshift() メソッドを使用して、配列の先頭に1つまたは複数の要素を追加する方法を学びます。
JavaScript Array unshift() メソッドの紹介
Array.prototype.unshift() メソッドは、配列の先頭に1つまたは複数の要素を追加し、新しい配列の長さを返します。
以下に unshift() メソッドの構文を示します。
unshift(element);
unshift(element1, element2);
unshift(element1, element2,...elementN);Code language: CSS (css)unshift() メソッドは既存の要素のインデックスを再設定する必要があるため、配列に多数の要素がある場合は処理が遅くなります。
配列の末尾に1つまたは複数の要素を追加するには、代わりに push() メソッドを使用できることに注意してください。
JavaScript Array unshift() メソッドの例
unshift() メソッドの使用例をいくつか見てみましょう。
1) JavaScript Array unshift() メソッドを使用して配列の先頭に要素を追加する
次の例では、unshift() メソッドを使用して、数値 10 を numbers 配列に追加します。
let numbers = [30, 40];
const length = numbers.unshift(20);
console.log({ length });
console.log({ numbers });
Code language: JavaScript (javascript)出力
{ length: 3 }
{ numbers: [ 20, 30, 40 ] }Code language: CSS (css)仕組み
まず、2つの要素を持つ配列を定義します。
let numbers = [20, 30];Code language: JavaScript (javascript)numbers 配列の長さは2です。
次に、数値 10 を numbers 配列の先頭に追加し、新しい配列の長さを length 変数に代入します。
const length = numbers.unshift(10);Code language: JavaScript (javascript)3番目に、length 変数と numbers 変数をコンソールに出力します。
console.log({ length });
console.log({ numbers });
Code language: JavaScript (javascript)次の図は、unshift() 関数がどのように動作するかを示しています。
2) JavaScript Array unshift() メソッドを使用して配列の先頭に複数の要素を追加する
次の例では、unshift() メソッドを使用して、配列の先頭に2つの要素を追加します。
let numbers = [30, 40];
const length = numbers.unshift(10, 20);
console.log({ length });
console.log({ numbers });
Code language: JavaScript (javascript)出力
{ length: 4 }
{ numbers: [ 10, 20, 30, 40 ] }Code language: CSS (css)
3) JavaScript Array unshift() を使用して、ある配列の要素を別の配列に追加する
次の例では、unshift() メソッドを使用して、ある配列の要素を別の配列の先頭に追加します。
let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];
for (const weekend of weekends) {
days.unshift(weekend);
}
console.log(days);Code language: JavaScript (javascript)出力
['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']Code language: JSON / JSON with Comments (json)ES6以降では、スプレッド演算子を使用してコードをより簡潔にすることができます。例えば、次のようになります。
let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];
days.unshift(...weekends);
console.log(days);
Code language: JavaScript (javascript)JavaScript Array unshift() メソッドを配列のようなオブジェクトで使用する
unshift() メソッドはジェネリックです。したがって、配列のようなオブジェクトでもうまく機能します。配列のようなオブジェクトから unshift() メソッドを呼び出すには、call() または apply() メソッドを使用して配列オブジェクトから借りてきます。
次の例を見てください。
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
prepend(message) {
[].unshift.call(this, message);
return this.length;
},
};
greetings.prepend('Good day');
console.log(greetings);
Code language: JavaScript (javascript)出力
{
'0': 'Good day',
'1': 'Hi',
'2': 'Hello',
'3': 'Howdy',
length: 4,
prepend: [Function: prepend]
}Code language: JavaScript (javascript)仕組み
まず、次のプロパティを持つ greetings オブジェクトを定義します。
0、1、および3という名前のプロパティは、greetingsオブジェクトの要素を表します。lengthプロパティは3の値で初期化され、これは greetings オブジェクトが持つ要素の数を示します。prepend()メソッドは、unshift()メソッドのcall()メソッドを呼び出し、thisをgreetingsオブジェクトに設定します。言い換えれば、greetingsオブジェクトは配列オブジェクト ([]) からunshift()メソッドを借ります。
次に、greetings オブジェクトの prepend() メソッドを呼び出して、インデックス 0th に要素を追加します。
3番目に、greetings オブジェクトをコンソールに出力します。
prepend() メソッドで greetings オブジェクトに1つまたは複数の要素を追加できるようにするには、レストパラメータとスプレッド演算子を次のように使用できます。
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
prepend(...messages) {
[].unshift.call(this, ...messages);
return this.length;
},
};
greetings.prepend('Good day', 'Bye');Code language: JavaScript (javascript)この例では、prepend() メソッドは1つ以上のメッセージ (...messages) を受け取り、スプレッド演算子を使用して unshift() メソッドに個別に渡します。
まとめ
- JavaScript 配列の
unshift()メソッドを使用して、配列の先頭に1つまたは複数の要素を追加します。 unshift()メソッドは、call()またはapply()メソッドを使用することで、配列のようなオブジェクトでも動作します。
