最新！JavaScript入門講座ー配列の要素取得と代入をわかりやすく解説！

配列は要素ひとつひとつの集合です。それらひとつひとつの要素にアクセスして何かしらの操作を行う、ということが配列の入門です。
配列の基本は必ず押さえておきたいものです。今回は、JavaScriptの配列の要素の取得と代入について解説していきます。

配列の基本操作解説

配列の要素を取得する

では、最初に配列の要素を取得する方法について解説していきます。
配列の要素を操るときに使うのが、インデックスです。前回の記事でも解説しましたね。配列は添字を必ず使用します。

まずは添字の使い方を見てみましょう。

インデックスは配列名の後の[]のなかに記述します。このカッコは半角なので注意しましょう。
では、さっそく実際のコードを解説していきます。

let corp = ["nvidia","AMD","Intel","Qualcomm","ASML","マイクロン・テクノロジー"];

console.log(corp[0]);
console.log(corp[3]);
console.log(corp[5]);

$ node array.js

nvidia
Qualcomm
マイクロン・テクノロジー

まずはインデックスの基本的使い方がこうなります。かっこにインデックスを記述します。
では、これに加えてfor文を加えてみましょう。

let corp = ["nvidia","AMD","Intel","Qualcomm","ASML","マイクロン・テクノロジー"];
let n = 6;

for(let i = 0;i < 6;i++){
    console.log(`company name ${i} : ${corp[i]}`);
}

$ node array.js

company name 0 : nvidia
company name 1 : AMD
company name 2 : Intel
company name 3 : Qualcomm
company name 4 : ASML
company name 5 : マイクロン・テクノロジー

インデックスには変数も利用できます。
配列は複数の値を持つことが普通です。なので、配列はfor文といった繰り返し処理と一緒に使うことが多いです。相性もいいので、しっかりと抑えておきましょう。

配列要素に代入する

では次に配列の要素に代入をする方法を解説していきます。先ほどと同じようにインデックスを使っていきます。

let pref = [];

pref[0] = "北海道";
pref[1] = "宮城";
pref[2] = "愛知";
pref[3] = "大阪";
pref[4] = "京都";
pref[5] = "広島";
pref[6] = "福岡";

console.log(pref);

$ node array.js

[
  '北海道', '宮城',
  '愛知',   '大阪',
  '京都',   '広島',
  '福岡'
]

変数を代入するときと同様、=を使います。
for文を用いた例は次のようになります。

let number = [];
let index = 0;
for(let i = 0;i < 10; i++){
    if(i % 2 == 0){
        number[index] = i;
        index += 1;
    }
}

console.log(number);

$ node array.js

[ 0, 2, 4, 6, 8 ]

これは0から9までで偶数であるときのみ代入するものです。こちらも同様です。

配列の存在しないインデックスを指定する場合

let hokkaido = ["札幌","旭川","函館","釧路","苫小牧"];

console.log(hokkaido[100]);

$ node array.js

undefined

配列でこのような存在しないインデックスを指定した場合、定義されていないという結果が返されます。ただ、これはエラーではありません。
あくまで定義されていないだけなので覚えておきましょう。

まとめ

では今回のまとめです。本記事ではこのようなことを学びました。

今回はここまでとなります。お疲れ様でした。

参考文献

文法とデータ型 - JavaScript | MDN

この節では JavaScript の基本文法、変数宣言、データ型、リテラルについて説明します。

developer.mozilla.org

配列 · JavaScript Primer #jsprimer

配列は値を順番に格納できるオブジェクトです。この配列の作成、更新、削除などの基本的な操作や実際に使い方についてを紹介します。また配列における破壊的なメソッドと非破壊的メソッドの違いについても紹介します。

jsprimer.net

https://www.freecodecamp.org/

www.freecodecamp.org