TRAINO CAMP

JavaScript
2022.07.07
JavaScriptの配列操作をマスター！初期化や要素追加・削除方法まとめ
2023.11.15

 
この記事ではJavaScriptにおける配列とはなにか、どのような操作方法があるのか実際のコードを交えて紹介します。ぜひ最後までご覧ください。

1．JavaScriptの配列とは？

配列とはプログラミングにおいて用いるデータ構造のひとつです。複数の値をひとつのデータ群として扱い、arrayと表現されます。

Pythonのリストも配列型のデータです。

配列の中に格納される値を要素と言います。複数の要素を持つデータを作成することで、様々な属性を持ったデータを表現できるのです。

2．配列の基本的な使い方


ここからは配列の使い方を紹介します。

①配列の宣言

JavaScriptには配列の宣言方法がふたつあります。


配列コンストラクタを使う方法

配列コンストラクタ「Array」を使う方法です。newでArrayのインスタンスを作成します。

let array1 = new Array("要素1", "要素2", "要素3");

ご覧のようにArrayに要素を加えることでデータを格納しています。


配列リテラルを使う方法

次に配列リテラルを使う方法です。


JavaScriptでは配列を[]を用いて表します。[]内に要素を入力することで配列を作成します。

let array2 = ["要素1", "要素2", "要素3"];

これで配列コンストラクタを用いた例と同様の配列を作成できました。

②配列の初期化

配列の初期化も宣言同様に2パターンありますが、どちらも考え方は同じです。

array1 = new Array();
array2 = [];

ご覧のように要素が入っていない空の配列を宣言することで初期化できます。

③要素の取得

要素を取得するにはインデックスを指定します。インデックスは0から順番に割り当てられています。

let array1 = new Array("要素1", "要素2", "要素3");
console.dir(array1); // [“要素1", "要素2", "要素3"]

let arrayFirstVal = array1[0];
console.log(arrayFirstVal); //要素1

let arrayLastVal = array1[array1.length-1];
console.log(arrayLastVal); //要素3

④要素の代入

すでに作成されている配列に要素を作成する場合、配列名[インデックス]=値で代入します。

let array1 = new Array("要素1", "要素2", "要素3");

let beforeVal = array1[2];
console.log(beforeVal); //要素3

array1[2] = "新要素3";

let changeVal = array1[2];
console.dir(changeVal); //新要素3




よく使う配列操作【要素に対する操作】


ここからは実際によく使う配列の操作を紹介します。

①要素の検索：indexOfメソッド

指定の要素を検索するためにIndexOfメソッドがあります。

let array1 = new Array("要素1", "要素2", "要素3");

let idx = array1.indexOf("要素2"); 
console.log(idx); //1

ご覧のように、indexOfの引数に与えた要素のインデックスが返されます。

なお、indexOfメソッドで取得する値は一番初めにあるインデックスになります。

let array1 = new Array("要素1", "要素2", "要素3", "要素2", "要素1", "要素4", "要素3");
let idx = array1.indexOf("要素2");
console.log(idx); //1

この場合、要素2はインデックス1と3の箇所にありますが、indexOfで返す値は1となります。


値が重複している場合は、最初のインデックス値を返します。例えば、

console.log(array1.indexOf("要素3"));

とすると、3番目を意味する2が出力されますね。

②要素数のカウント：lengthプロパティ

配列の要素数（長さ）を確認するためにlengthメソッドがあります。

let array1 = new Array("要素1", "要素2", "要素3");
​​let l = array1.length;
console.log(l); //3

ご覧のように配列の要素数を取得できます。

複雑なソースコードになると要素数で条件分岐などを行う場合があるので、覚えておきましょう。

③要素の追加：pushメソッド

配列に要素を加えるには、pushメソッドを使います。


基本的な使用方法で紹介した代入ではインデックスで指定した要素の上書きでしたが、こちらは新たに要素を追加します。


挙動の差を意識しながら確認しましょう。

let array1 = new Array("要素1", "要素2", "要素3");
array1.push("要素4");
console.log(array1); //["要素1", "要素2", "要素3", "要素4"]

④要素の削除：delete演算子

配列の要素を削除するためにdelete演算子があります。削除したい要素をインデックスで指定しましょう。


今までのメソッドと異なり演算子なので、利用方法が異なる点に注意が必要です。

let array1 = new Array("要素1", "要素2", "要素3");
delete array1[2];
console.log(array1); //["要素1", "要素2"]

ご覧のように要素でなくインデックスを指定して要素を削除します。


要素の値で削除したい場合は、先ほど紹介したindexOfメソッドと組み合わせることで実現可能です。

let array2 = new Array("要素１", "要素２", "要素３");
let delTarget = array2.indexOf("要素３");
console.log(delTarget);

delete array2[delTarget]; 
console.log(array2);
console.log(array2.length);

結果

2
['要素１', '要素２', なし]
3

delete後も配列の長さは変わらないことに注意しましょう。

⑤要素の抽出：filterメソッド

特定の要素を抽出するためにfilterメソッドがあります。filter関数内に条件を設定し、条件にあった要素のみ抽出します。

let array1 = [1, 5, 10, 2, 6, 11, 3, 4, 12];
let array2 = array1.filter(function(value) {
   return value > 6;
});

console.log(array2); //[10, 11, 12]

今回の例では6より大きい値を抽出しています。returnの箇所で指定した条件にあった要素のみ抽出しています。

⑥重複する要素の排除：setメソッド

重複する要素を削除するためにsetメソッドがあります。

let array1 = new Array("要素1", "要素2", "要素3", "要素2", "要素1", "要素4", "要素3");
let array2 = Array.from(new Set(array1));
console.log(array2); //["要素1", "要素2", "要素3", "要素4"]

ご覧のように直感的に重複要素を削除できます。


また、重複する要素の削除は⑤で使ったfilterメソッドでも実現可能です。

let beforeArray = new Array("要素1", "要素2", "要素3", "要素2", "要素1", "要素4", "要素3");

let afterArray = beforeArray.filter(function(element, idx){
   return beforeArray.indexOf(element) == idx;
});

console.log(afterArray); //["要素1", "要素2", "要素3", "要素4"]

上記コードでは以下の手順で重複削除をしています。

  1. filterメソッドがbeforeArrayのひとつめの要素”要素1”を取得
  2. beforeArray.indexOfでひとつめの要素のインデックスを取得
  3. idx(インデックス管理、0から順に値が入る)と2で取得したインデックスを比較
  4. 等しい値だった場合afterArrayの要素に入る

前述の通りindexOfは一番初めの要素のインデックスを返します。そのため、ひとつ目ではない一番最初以外の場合indexOfで返す値とidxが異なり配列に追加されません。


以上を繰り返すことで重複する要素を削除できます。


基本的に重複要素の削除にはsetメソッドを利用しますが、filterメソッドでも実現可能と覚えておきましょう。

3．よく使う配列操作【配列に対する操作】


ここまでは、配列の要素に対して操作する方法を紹介しました。ここからは、配列自体を操作する方法を確認していきましょう。

①配列の結合：joinメソッド

配列内の各要素を結合するためにjoinメソッドがあります。


各要素を結合する際、間に区切り文字を引数に指定しましょう。

※指定しない場合はカンマになります。

let array1 = new Array("要素1", "要素2", "要素3");
let str = array1.join("/");
console.log(str); //要素1/要素2/要素3

②配列の分割：sliceメソッド

配列の分割をするためにsliceメソッドがあります。sliceメソッドは引数にインデックスを指定しましょう。


第一引数に取得する開始位置、第二引数に終了位置を与えます。なお、第二引数は指定しなくても利用可能です。指定しなかった場合は最後の要素まで取得します。

let array1 = new Array("要素1", "要素2", "要素3", "要素4", "要素5", "要素6");
let array2 = array1.slice(2);
console.log(array2); //["要素3", "要素4", "要素5", "要素6"]

let array3 = array1.slice(1, 4);
console.log(array3); // ["要素2", "要素3", "要素4"]

③配列のコピー：concatメソッド

配列のコピーをするためにconcatメソッドがあります。本来concatメソッドは複数の配列を結合するメソッドです。結合する配列を空の配列にすることで、コピーできます。

let array1 = new Array("要素1", "要素2", "要素3");
let array2 = array1.concat();

console.log(array2); //["要素1", "要素2", "要素3"]

//おまけ
let array3 = new Array("要素4", "要素5", "要素6");
let array4 = array1.concat(array3);
console.log(array4); //[要素1", "要素2", "要素3", "要素4", "要素5", "要素6"]

④配列をソート：sortメソッド

配列内の要素をソートするためにsortメソッドがあります。sortメソッドでは文字列同士を比較し、昇順にソートします。

let array1 = new Array("あさ", "おか", "うみ", "いか", "えき");
let array2 = array1.sort();

console.log(array2); //["あさ", "いか", "うみ", "えき", "おか"]

sortメソッドは日本語にも対応しています。




4．配列のループ処理

配列でループ処理を行いたい場合、いくつかの方法で処理できます。


ここからはさまざまな書き方と、各書き方の特徴を紹介します。

①for文を使う

最もシンプルなfor文の紹介です。指定した回数処理を繰り返します。

let array1 = new Array("要素1", "要素2", "要素3", "要素4", "要素5", "要素6");
for(let i = 0; i < array1.length; i++) {
   console.log(array1[i]);
}

i < array1.lengthで配列の要素数分繰り返しています。

②for…of文を使う

配列全体にループ処理を行う場合は、for…of文がシンプルで使いやすいです。

let array1 = new Array("要素1", "要素2", "要素3", "要素4", "要素5", "要素6");
for (const element of array1) {
   console.log(element);
}

elementにarray1の要素が順番に格納されます。


for文のように条件を指定できませんが、全体に対してループ処理をしたい場合に便利です。

③forEachメソッドを使う

要素だけでなくインデックスも利用したい場合はforEachメソッドが便利です。

let array1 = new Array("要素1", "要素2", "要素3", "要素4", "要素5", "要素6");
array1.forEach(function(element, idx) {
   console.log(idx + ":" + element);
});

ご覧の例では各要素の前にインデックスの数字を加えています。このように要素だけでなくインデックスを利用したい場合はforEachメソッドが便利です。


上記例は以下のように書き換えられます。

let array1 = new Array("要素1", "要素2", "要素3", "要素4", "要素5", "要素6");
array1.forEach(((element, idx) => {
   console.log(idx + ":" + element);
}));

アロー関数を用いることで、より簡略化して記述できます。

また、インデックスが不要の場合も利用できます。

array1.forEach(element => console.log(element));

こちらはfor-ofのように全体のループ処理に利用できます。

5．配列と文字列の変換


ここからは配列の要素を文字列に変換する方法を紹介します。

①配列から文字列へ変換

配列から文字列へ変換する方法はふたつあります。


toStringメソッドを使う

配列を文字列に変換するためにtoStringメソッドがあります。

let array1 = new Array("要素1", "要素2", "要素3");
console.log(typeof array1); //object

let str1 = array1.toString();
console.log(typeof str1); //string
console.log(str1); //要素1,要素2,要素3


Stringコンストラクタを使う

Stringコンストラクタを使うことでも文字列に変換できます。

let array1 = new Array("要素1", "要素2", "要素3");
console.log(typeof array1); //object

let str1 = String(array1);
console.log(typeof　str1); //string
console.log(str1); //要素1,要素2,要素3

②文字列から配列へ変換

文字列から配列に変換するためにfromメソッドがあります。

let str1 = "文字列1"
let array1 = Array.from(str1);
console.log(array1); //["文", "字", "列", "1"]

引数に与えられた文字列を配列に格納します。各要素の文字数などは指定できず、一文字ずつが要素になります。


form()メソッドの他には、split()メソッドがありますね。コンマ（,）やスペース毎に文字を分割し、配列に格納できます。

let helloText = "How are you doing today?";
console.log(typeof helloText);

let helloArray = helloText.split(" ");
console.log(typeof helloArray);

for (const elem of helloArray) {
  console.log(elem);
}

結果

string
object
How
are
you
doing
today?

スペース毎に文字が分割できていることが確認できますね。

6．配列を比較


ここからは配列の比較方法や配列を比較する際の注意点を紹介します。

①for文を用いて比較

こちらが一番確実な方法です。比較ミスを起こしたくない場合はfor文を使いましょう。

let array1 = new Array("要素1", "要素2", "要素3");
let array2 = new Array("要素1", "要素2", "要素3");

function arr_eq(array1, array2){
   for(let i = 0; i < array1.length; i++) {
       if(array1[i] !== array2[i])return false;
   }
   return true;
}
arr_eq(array1, array2);

for文でふたつの配列の各要素を順番に比較しています。

②文字列に変換して比較

Stringコンストラクタの引数に配列を与えることで、配列の要素を文字列にできます。

let array1 = new Array("要素1", "要素2", "要素3");
let array2 = new Array("要素1", "要素2", "要素3");

String(array1) == String(array2);

また、文字列に変換するtoStringメソッドがありますが、文字列の比較においてはおすすめできません。どちらかの配列がnullの場合エラーが発生します。

let array1 = new Array("要素1", "要素2", "要素3");
let array2 = null;

array1.toString() == array2.toString(); //実行時エラー

配列比較をする場合はStringコンストラクタを利用しましょう。

③JSON型に変換して比較

最後にJson文字列型に変換する方法を紹介します。JSON.stringifyメソッドを用いて配列をJson文字列型に変換します。

let array1 = new Array("要素1", "要素2", "要素3");
let array2 = new Array("要素1", "要素2", "要素3");

JSON.stringify(array1) == JSON.stringify(array2);

④【注意点】==演算子で比較しない

JavaScriptでは通常 == や ===のような比較演算子を用いて比較します。


しかし、配列は値ではなく各要素のメモリアドレスを格納しているため、同じ値でも違うアドレスに格納されている場合予期しない結果になります。


==演算子は使わず、上記で説明した方法を使うようにしましょう。

7．多次元配列（2次元配列）とは？


JavaScriptの配列はどのようなデータでも保持でき、配列自身も例外でなく、数値や文字列のように配列の要素にできます。このように「配列を要素にもつ配列」を多次元配列と言います。

文章でイメージを持つのは難しいので例を確認しましょう。

let array1 = [
   ["Taro", 22, "Tokyo"],
   ["Jiro", 19, "Osaka"],
   ["Saburo", 17, "Fukuoka"]
]

上記の例は氏名、年齢、出身地を保持した二次元配列になります。このように配列自体も配列の要素にできます。

8．連想配列とは？


プログラムにおいて配列の種類はいくつかあります。ここまでの例では通常の配列を紹介してきましたが、ここでは連想配列を紹介します。

①連想配列と配列の違い

連想配列と通常の配列との一番の違いは、「値」と「キー」で構成されている点です。連想配列ではひとつの要素が「キー:値」となります。


Pythonでは辞書型と呼ばれています。

②連想配列の使い方

先ほど多次元配列の例で紹介したTaroさんのオブジェクトを連想配列で再現すると、以下のようになります。

let array1 = {name: "Taro", age: 22, birthplace: "Tokyo"};
console.log(array1.name); //Taro

配列の場合インデックスで要素を指定しますが、連想配列の場合はキーで指定できます。

この記事をシェア
関連記事
  •
    JavaScript

    TypeScript実践力を身につける！コードスニペットで学ぶ型付けとインターフェース

    2023.06.22
  • JavaScript

    Reactチュートリアルとフレームワーク比較！Vue.jsとAngularとの違い

    2023.06.16
  • JavaScript

    【最新】JavaScriptフレームワーク一覧｜おすすめ・人気はどれ？

    2023.01.12
    • カテゴリ