【JavaScript】配列の要素取得やループ・ソート方法を10個まとめ

今回はJavaScriptの配列について、

好きな要素の取得する方法、
ループを使って各要素にアクセスする方法、
ソート(並べ替え)を行う方法についてまとめました。

非常によく使う項目なので、しっかりロジックを理解して使いこなせるようになりましょう。

配列に関する値の取得

各要素の取得

配列に格納されている各要素を取得するには、
インデックスと呼ばれる配列の要素番号を指定します。

const array=["a","i","u","e","o"];

//最初の要素を取得
console.log(array[0]); //="a"

//3番目の要素を取得
console.log(array[2]); //="u"

1番目のインデックスは0、
2番目のインデックスは1、

のように、インデックスは0から始まることに注意しましょう。

配列の要素数を取得 length

配列の要素数(長さ)は lengthプロパティで取得できます。

const array=["a","i","u","e","o"];

//要素数を取得
console.log(array.length); //=5

指定要素のうち最初の位置を取得 indexOf()

indexOf()メソッドを使えば、
配列で指定した要素を検索して最初に見つかった位置を取得出来ます。

要素が見つからなかった場合は-1になります。

const array=["a","i","u","u","o"];

//最初の"i"の位置を取得
console.log(array.indexOf("i")); //=1

//最初の"u"の位置を取得
console.log(array.indexOf("u")); //=2

//最初の"z"の位置を取得
console.log(array.indexOf("z")); //=-1

指定要素のうち最後の位置を取得 lastIndexOf()

lastIndexOf()メソッドを使えば、
配列で指定した要素を最後から検索して最初に見つかった位置を取得出来ます。

要素が見つからなかった場合は-1になります。

const array=["a","i","u","u","o"];

//最後の"i"の位置を取得
console.log(array.lastIndexOf("i")); //=1

//最後の"u"の位置を取得
console.log(array.lastIndexOf("u")); //=3

//最後の"z"の位置を取得
console.log(array.lastIndexOf("z")); //=-1

指定位置から一つ以上の要素を取得 slice()

構文 : 配列名.slice(開始位置,終了位置)
戻り値: インデックスが開始位置以上、終了位置未満の要素

slice()メソッドを使えば、好きな位置から好きな数の要素を取得できます。

戻り値は、該当する要素が複数ある場合、配列で返ります。

const array=["a","i","u","e","o"];

//インデックス1以上2未満の要素取得
console.log(array.slice(1,2)); //="i"

//インデックス2以上4未満の要素取得
console.log(array.slice(2,4)); //=["u","e"]

//インデックス3以上7未満の要素取得
console.log(array.slice(3,7)); //=["e","o"]

終了位置に指定したインデックスの要素は取得されないということに注意してください。

配列のループ(繰り返し処理)

配列の要素全てに対して、何らかの処理を行いたい場合はループを使うと便利です。

for

構文:for(初期値; 条件式; 増減値) { ループする処理 }
for(let i=0; i<array.length; i++){
    console.log(array[i]);
}

初期値や条件式を変更することで、配列の途中からループをかけたりすることが出来ます。

forの{}内に iを減らす処理 を入れると無限ループが発生するので注意。
バグに繋がるので、for内で変数iを変更する処置は書かないことをオススメします。

ちなみに初期値で指定する変数は何でも良いのですが、
indexの頭文字である i を使うのが慣習とされています。

以下のように入れ子にする場合は、j,k,l,m…とアルファベット順に変数を使うことが多いです。

for(let i=0; i<array.length; i++){
    for(let j=0; j<array2.length; j++){
        console.log(array[i]+" "+array2[j]);
    }
}

for…in

構文:for(変数名 in 配列名 ) { ループする処理 }
for(let i in array){
    console.log(array[i]);
}

正直覚えなくて良い方法ですが紹介だけしておきます。

最初から最後までループを回します。
インデックスを変数として取り出して扱うことができます。

for文で事足りますし、汎用性が低いので使用することは少ないです。

for…of

構文:for(変数名 of 配列名 ) { ループする処理 }
for(let value of array){
    console.log(value);
}

最初から最後までループを回します。
各要素を変数として取り出して扱うことができます。

for文に比べて要素を扱いやすいので便利ですね。

正直for…in文は役に立ちませんが、for…of文は結構使えます。

また、array.entries()メソッドを使えば、
以下のようにインデックスと要素の両方を取り出して扱うこともできます。

for(let [i, value] of array.entries()) {
  console.log(i+" "+value);
}

forEach()メソッド

構文:配列.forEach(callback関数)

具体的には以下のように書きます。

array.forEach(function(value,i,array){
 console.log(i+" "+value);
});

callback関数の順番は、「要素、インデックス、配列」の順であることに注意しましょう。

ただ、forEach文は上記のようにコードが長くなるので、for…ofを使う方が良いです。

配列のソート(並べ替え)

構文:配列名.sort([compare関数])

配列の要素をソート(並べ替え)するには、sort()メソッドを使います。

compare関数を使わない場合

let array=["a","i","u","e","o"];

array.sort();

console.log(JSON.stringify(array));//=["a","e","i","o","u"]

単純にsort()メソッドを実行すると、昇順に並べ替えられます。
なので、配列の要素がアルファベットの時、アルファベット順になります。

※ JSON.stringify はオブジェクトや配列をJSON文字列に変換します。配列の中身を表示させるときに便利です。

let array=["A","b",1,2,"1","2","亜","イ","う"];

array.sort();

console.log(JSON.stringify(array));//=[1,"1",2,"2","A","b","う","イ","亜"]
数字(数値・文字列は区別しない)
アルファベット(大文字小文字は区別しない)
ひらがな
カタカナ
漢字

の順に並ぶことが分かります。

compare関数を使う場合

compare関数を使えば昇順や降順でソートを行うことができます。

引数にはaとbを指定し、以下の基準で並べ替えを行います。

compare関数が 0 より小さい場合、a を b の前に並べ替える。
compare関数が 0 と等しい場合、a と b は並べ替えない。
compare関数が 0 より大きい場合、b を a の前に並べ替える。
let array=[4,7,2,3,8,1];

//昇順ソート(小さい順)
array.sort(function(a,b){
    return a-b; //a<bのときaをbの前 に並べ換える。(a-bが0より小さくなるので)
});

console.log(JSON.stringify(array));//=[1,2,3,4,7,8]


//降順ソート(大きい順)
array.sort(function(a,b){
    return b-a; //a<bのときbをaの前 に並べ換える。(a-bが0より大きくなるので)
});

console.log(JSON.stringify(array));//=[8,7,4,3,2,1]

compare関数を使えば、以下のような並べ替えもできます。

let array=["white","red","yellow","blue","black"];

//文字数の短い順に並べる
array.sort(function(a,b){
    return a.length-b.length;
});

console.log(JSON.stringify(array));//=["red","blue","white","black","yellow"]


array=["one","two","three","four","five"];

//子音(a,i,u,e,o以外)の数が少ない順に並べる
array.sort(function(a,b){
    return a.replace(/a|i|u|e|o/g,'').length-b.replace(/a|i|u|e|o/g,'').length;
});

console.log(JSON.stringify(array));//=["one","two","four","five","three"]

まとめ

要素の取得
 特定のindexの要素を取得したい → Array[index]で個別に取得する。
 全要素から条件にあった要素を取得したい → ループを使ってif文で場合分けして取得する。
 指定位置から任意の数の要素を取得したい → slice()

要素数を取得したい → length

指定要素の位置を取得
 最初にある位置を取得したい → indexOf()
 最後にある位置を取得したい → lastIndexOf()

並べ替え
 昇順で並べ替え → sort()
 それ以外で並べ替え → sort(compare関数)

のように使い分けられます。

初心者の方へ

冒頭で解説した各取得方法は、よく使うので必ず覚えましょう。

ループは、for文とfor...of文だけ覚えておけばほとんどの場合事足りると思います。

並べ変えのsort()は、compare関数のロジックとなる
「0より大きい時、0に等しい時、0より小さい時」の挙動の違いが肝です。

上記のように、よく使うポイント、重要なポイントを抑えておきましょう。

Twitterでもプログラミングの有益情報を配信しています。フォローはこちらから→

おすすめの記事