JavaScript初心者必見!配列操作の10選テクニックで効率アップ!

JavaScriptでの配列操作JS
この記事は約6分で読めます。

 

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

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

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

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

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

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

はじめに

この記事を読めば、JavaScriptでの配列操作が効率的に行えるようになります。

JavaScript初心者でも分かりやすく、配列の追加・削除・結合・検索・ループ・初期化・存在チェック・要素数・宣言を徹底解説します。

さあ、始めましょう!

●配列の宣言方法

JavaScriptでは、主に下記の2つの方法で配列を宣言できます。

○配列リテラル

配列リテラルを使って、簡単に配列を宣言できます。

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

○Arrayコンストラクタ

Arrayコンストラクタを使って、配列を宣言することもできます。

const fruits = new Array('apple', 'banana', 'cherry');

●配列要素の追加

配列に要素を追加する方法は、主に次の2つです。

○pushメソッド

配列の末尾に要素を追加できます。

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

○unshiftメソッド

配列の先頭に要素を追加できます。

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

●配列要素の削除

配列から要素を削除する方法は、下記の3つです。

○popメソッド

配列の末尾から要素を削除できます。

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

○shiftメソッド

配列の先頭から要素を削除できます。

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

○spliceメソッド

配列の指定した位置から要素を削除できます。

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1); // 1番目の要素から1つ削除
console.log(fruits); // ['apple', 'cherry']

●配列の結合

○concatメソッド

複数の配列を結合して新しい配列を作成できます。

const fruits1 = ['apple', 'banana'];
const fruits2 = ['cherry', 'orange'];
const allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ['apple', 'banana', 'cherry', 'orange']

●配列の検索

○indexOfメソッド

配列の中から指定した要素が最初に現れるインデックスを返します。

要素が存在しない場合は-1を返します。

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.indexOf('banana')); // 1
console.log(fruits.indexOf('orange')); // -1

○findメソッド

配列の中から条件に一致する最初の要素を返します。

一致する要素がない場合はundefinedを返します。

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
console.log(found); // 4

●配列のループ処理

○forループ

配列の要素を順番に処理できます。

const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // apple, banana, cherry
}

○forEachメソッド

配列の要素を順番に処理できます。

コールバック関数に要素とインデックスが渡されます。

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit, index) => {
  console.log(`Index: ${index}, Fruit: ${fruit}`); // Index: 0, Fruit: apple, Index: 1, Fruit: banana, Index: 2, Fruit: cherry
});

●配列の初期化

配列を空にする方法は下記の2つです。

  1. 配列のlengthプロパティに0を代入します。
const fruits = ['apple', 'banana', 'cherry'];
fruits.length = 0;
console.log(fruits); // []
  1. 新しい空の配列を代入します。
const fruits = ['apple', 'banana', 'cherry'];
fruits = [];
console.log(fruits); // []

●配列の存在チェック

配列の要素が存在するか確認する方法は下記の2つです。

  1. indexOfメソッドを使って要素のインデックスが-1以外であることを確認します。
const fruits = ['apple', 'banana', 'cherry'];
const exists = fruits.indexOf('banana') !== -1;
console.log(exists); // true
  1. includesメソッドを使って要素が存在するか確認します。
const fruits = ['apple', 'banana', 'cherry'];
const exists = fruits.includes('banana');
console.log(exists); // true

●配列の要素数取得

配列の要素数は、lengthプロパティを使って取得できます。

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 3

まとめ

この記事では、JavaScriptで配列に要素を追加、削除、結合、検索、ループ処理、初期化、存在チェック、要素数取得を行う方法を紹介しました。

各操作には様々なメソッドが用意されており、状況に応じて適切なものを選んで利用することが重要です。

これらの操作を理解し、活用することで、JavaScriptでの配列操作がスムーズになることでしょう。