5選!JavaScript unshiftの使い方、応用例とサンプルコード

JavaScript unshiftの使い方と応用例 JS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めばJavaScript unshiftの使い方や応用例が身に付き、プログラムを効率的に書くことができるようになります。

●JavaScript unshiftとは

○unshiftの基本

JavaScriptのunshiftメソッドは、配列の先頭に要素を追加するために使用されます。

これにより、配列の要素が後ろにずれ、新しい要素が先頭に挿入されます。

●unshiftの使い方

○サンプルコード1:配列の先頭に要素を追加

unshiftを使って配列の先頭に要素を追加するコードを紹介します。

この例では、数字の配列に新しい数字を先頭に追加しています。

const numbers = [2, 3, 4];
numbers.unshift(1);
console.log(numbers); // [1, 2, 3, 4]

○サンプルコード2:複数の要素を追加

unshiftを使って配列の先頭に複数の要素を追加するコードを紹介します。

この例では、文字列の配列に新しい文字列を先頭に追加しています。

const fruits = ['apple', 'banana', 'cherry'];
fruits.unshift('orange', 'grape');
console.log(fruits); // ['orange', 'grape', 'apple', 'banana', 'cherry']

●unshiftの応用例

○サンプルコード3:配列内の要素を逆順にする

このコードではunshiftを使って配列内の要素を逆順にする方法を紹介しています。

この例では、元の配列から一つずつ要素を取り出し、新しい配列の先頭に追加しています。

const originalArray = [1, 2, 3, 4, 5];
const reversedArray = [];

for (let i = 0; i < originalArray.length; i++) {
  reversedArray.unshift(originalArray[i]);
}

console.log(reversedArray); // [5, 4, 3, 2, 1]

○サンプルコード4:二次元配列の先頭に要素を追加

このコードではunshiftを使って二次元配列の先頭に要素を追加する方法を紹介しています。

この例では、二次元配列に新しい行を先頭に追加し、値を設定しています。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const newRow = [0, 0, 0];
matrix.unshift(newRow);

console.log(matrix);
// [
//   [0, 0, 0],
//   [1, 2, 3],
//   [4, 5, 6],
//   [7, 8, 9]
// ]

○サンプルコード5:オブジェクト配列の先頭に要素を追加

このコードではunshiftを使ってオブジェクト配列の先頭に要素を追加する方法を紹介しています。

この例では、オブジェクトの配列に新しいオブジェクトを先頭に追加しています。

const users = [
  { id: 2, name: 'Taro' },
  { id: 3, name: 'Hanako' }
];

const newUser = { id: 1, name: 'Ichiro' };
users.unshift(newUser);

console.log(users);
// [
//   { id: 1, name: 'Ichiro' },
//   { id: 2, name: 'Taro' },
//   { id: 3, name: 'Hanako' }
// ]

●注意点と対処法

unshiftメソッドは、配列の要素を追加する際に、他の要素を後ろにずらすため、大きな配列で繰り返し使用するとパフォーマンスが低下することがあります。

この問題を回避するためには、unshiftの使用を避けて別の方法を検討するか、Array.prototype.splice()メソッドを使って要素を追加することができます。

まとめ

この記事では、JavaScriptのunshiftメソッドの基本的な使い方から、応用例まで詳しく解説しました。

unshiftメソッドを使って配列の先頭に要素を追加する方法や、逆順にする方法、二次元配列やオブジェクト配列の先頭に要素を追加する方法など、様々な応用例を紹介しました。

この記事を読んだことで、JavaScriptで配列を扱う際のunshiftメソッドの使い方や応用例について理解が深まったことでしょう。

これらの知識を活かして、JavaScriptを使ったプログラミングに役立ててください。