【超初心者】JavaScript 配列を理解しよう

JavaScriptの基本構文の学習が終わってオブジェクトに入った頃に、おそらく大半の方が一度はここでつまずくのではないでしょうか。

説明を何回聞いても、どんなに優しく説明してもらっても理解ができない上に、この先とても自力で使いこなせそうにない、なんて自信喪失する時期が出てきませんか。

そんな時のたった一つの安心材料は「みんなはじめはそうだったよ」という講師の言葉だけでした。

ですがここが正念場、とにかく前に進んで後から何回でも振り返れば大丈夫です。

ということで、JavaScriptの複雑なデータ操作について、基本の振り返り用に、できるだけ基本事項を網羅できるような構成で本記事を作りました（何回かに分かれています）。

是非参考にしてください。

[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]

JavaScript 配列を理解しよう

配列

配列とは、同じような意味合いのデータをまとめて同じ定数や変数名で扱うことができるデータ構造のことです。

例えば以下の3つのデータを扱うケースを考えてみます。

const score1 = 3;
const score2 = 6;
const score3 = 9;
console.log(score1, score2, score3);

これを配列を使って記述すると、以下のようになります。

const scores = [3, 6, 9] ;
console.log(scores);

各要素を「 , 」（カンマ）で区切ることに注意しましょう。

インデックス

[ ] で囲った配列の中にある要素の順番を指定して呼び出します。

この順番のことを「インデックス」（または添字（そえじ））と呼び、0番目から始まります。

例えば上の配列の例で「6」にアクセスしたい場合は、1番目を指定することになり、その要素を[ ]で囲って呼び出します。

具体的には以下のとおりです。

const scores = [3, 6, 9] ;
console.log(scores[1]);

配列の要素の変更（1）

配列内の要素を変更したい場合は以下のように記述します。

例えば、要素の「9」を「12」に変更する場合は、インデックスの2を[]で囲って指定します。

const scores = [3, 6, 9] ;
scores[2] =12;
console.log(scores);

length

「lenght」は、要素の個数を示すキーワードです。

上記の例だと、要素は「3」と「6」と「9」で、lengthは「3個」になりますね。

これを呼び出す方法は以下のとおりです。

const scores = [3, 6, 9];
console.log(scores.length);

取得したい定数scoresと、lengthの間に「 . 」（ピリオド）を入れて記述すればOKです。

配列の要素数を取得したいときにこのような記述を用います。

配列を使った処理例

配列を使えば、以下のような処理が可能です。

const scores = [3, 6, 9];
console.log(`あなたのスコアは${scores[0]}点です`);
console.log(`あなたのスコアは${scores[1]}点です`);
console.log(`あなたのスコアは${scores[2]}点です`);

テンプレートリテラルでテキストと配列を組み合わせた例ですね。

処理の結果は以下のとおりです。

あなたのスコアは3点です
あなたのスコアは6点です
あなたのスコアは9点です

テンプレートリテラル

テンプレートリテラルについてもう一度復習したい方は » こちら

ループを使った処理例

上の例と同じ処理を、for文を使って表すと以下のとおりになります。

const scores = [3, 6, 9];
for(let i = 0 ; i < 3 ; i++) {
console.log(`あなたのスコアは${scores[i]}点です`);
}

「i」は要素のインデックスを表しているというロジックでfor文が組み立てられています。

配列の要素数が多いときなどは、for文を使って処理した方が確実ですね。

for文

ループ処理についてもう一度復習したい方は » こちら

「 i 」は要素のインデックスを表している、という点に着目して、以下のように「 i 」そのものも出力して表現することが可能です。

const scores = [3, 6, 9];
for(let i = 0 ; i < 3; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

この場合の結果は以下のとおりです。

0あなたのスコアは3点です
1あなたのスコアは6点です
2あなたのスコアは9点です

また、上記のfor文の「i < 3」が、「iが3個未満の間は」、と個数を定義していることに着目して、ここでlengthを使って以下のように定義することができます。

const scores = [3, 6, 9];
for(let i = 0 ; i < scores.length ; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

このように「i < scores.length」とすれば同じ処理結果になります。

冒頭で説明したのと同じように、scoresとlengthの間には「 . 」（ピリオド）が入っていることに注意してください。

Point

この書き方の利点は、配列の要素数が増えたとしても、「i < scores.length」で全ての個数をカバーできることになっているという点にあります。

[3, 6, 9, 12, 20,・・・]となっても書き換える必要がないということですね。

配列の要素の変更（2）文頭・文末の追加・削除

配列の要素について、キーワードを使って、1番目や最後の要素の追加や削除をすることができます。

例えば、以下の配列があったとします。

const scores = [3, 6, 9];

この場合、以下のキーワードでそれぞれ処理することができます。

追加・削除のキーワード

1番目に要素を追加する場合は「unshift()」
最後に追加する場合は「push()」
削除する場合は、先頭の削除は「shift()」
末尾を削除する場合は「pop()」

では、配列[3, 6, 9]に対して、先頭の3を削除し、最後に12と18を加える場合の記述をみてみましょう。

const scores = [3, 6, 9];
scores.shift();
scores.push(12, 18);
for(let i = 0 ; i < scores.length; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

このような記述をすれば、結果は以下のとおりになります。

0あなたのスコアは6点です
1あなたのスコアは9点です
2あなたのスコアは12点です
3あなたのスコアは18点です

配列の要素を変更するケースは多いので、この操作方法は是非覚えておきましょう。

　注意点　

追加の「unshift()」と「push()」は複数指定できます。
その場合、( )内に要素をカンマ区切りで並べます。
一方、削除の「shift()」と「pop()」は一つずつしか指定できません。
そのため、( )内は常に空白になります。

配列の要素の変更（3）文中の追加・削除 splice

「splice（スプライス）」というキーワードを使って、配列の途中にある要素を削除したり追加することができます。

spliceの使い方

splice(変化が開始する位置, 削除数)
splice(変化が開始する位置, 削除数, 追加する要素, ・・・)

※「〜位置」はインデックスで表します

具体例をみてみましょう。

以下の記述に対して、要素の6を削除して5と7を追加してみます。

const scores = [3, 6, 9];
for(let i = 0 ; i < scores.length; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

この時点での出力結果は以下のとおりです。

0あなたのスコアは3点です
1あなたのスコアは6点です
2あなたのスコアは9点です

これに対して、先ほど挙げた「spliceの使い方」を、以下のように当てはめていきます。

要素の6はインデックス1（→変化が開始する位置）
削除する個数は1（→ 削除数,）
追加する要素は5と7（→ 追加する要素）

となるので、書き方は以下のとおりです。

const scores = [3, 6, 9];
scores.splice(1, 1, 5, 7);
for(let i = 0 ; i < scores.length; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

結果は次のとおりです。

0あなたのスコアは3点です
1あなたのスコアは5点です
2あなたのスコアは7点です
3あなたのスコアは9点です

もう一度spliceの使い方

scores.splice(1, 1, 5, 7);

の（　）内の1, 1, 5, 7の意味をもう一度紐解いて説明すると、

インデックス「1」の場所から
「1」個削除して
「5」と「7」を加える

という意味ですね。

「インデックス」（または添字（そえじ））は、0番目から始まるということも併せて思い出しておきましょう。

つまり、「1」は2番目のことになりますね。（「0」が1番目）。

配列の要素の操作　スプレッド構文

複数の配列があった場合に、その要素を一つにまとめて定義できる方法がスプレッド構文です。

例えば、以下のように2つの配列があったとします。

const scores2nd = [25, 35];
const scores = [3, 6, 9] ;

これを「scores2nd」の要素を「scores」の要素にまとめて処理をしたい場合には、以下のように「…」（ピリオド3つ）を使って記述すればOKです。

const scores2nd = [25, 35];
const scores = [3, 6, 9, …scores2nd] ;
for(let i = 0 ; i < scores.length; i++) {
console.log(`${i}あなたのスコアは${scores[i]}点です`);
}

「socores2nd」の要素が「scores」の要素になって処理されることになり、結果は以下のとおりです。