配列とは、1つの変数や定数に対して、複数の要素を格納するための入れ物です。
「フルーツ」という変数の中に、「りんご」「みかん」「ぶどう」が入っているって感じです。
りんごとみかんとぶどうとそれぞれの変数に入れることもできるのですが、フルーツという１つの変数にまとめて入れることで、管理や操作が楽になるのが特徴です。
今回はそんな配列をどのように定義し、どのように取得・操作していくかを紹介します。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
配列の定義
まずは基本的な形から見ていきましょう。
const 変数名 = ['要素1', '要素2', '要素3'];これで「変数名」という名前の変数に「要素1」「要素2」「要素3」が格納された配列の完成です。
constは定数なので通常上書きができないのですが、配列の中身であれば編集していくことが可能です。
サンプルコード
変数fruitsにフルーツを格納しています。
<script>
const fruits = ['りんご', 'みかん', 'ぶどう'];
console.log(fruits);
</script>配列の出力 その1（配列内の特定の要素のみ取得する）
配列内の特定の要素のみを扱いたい場合、
変数名[番号]と記述することで取得することができます。
配列は、自動的に格納された左から順に、0から番号が割り当てられます。
今回のフルーツの場合、りんごが0、みかんが1、ぶどうが2となっています。
サンプルコード
変数fruitsから「みかん」を取り出します。
<script>
const fruits = ['りんご', 'みかん', 'ぶどう'];
console.log(fruits[1]);
</script>配列の出力 その2（全ての要素を順番に取得する）
forEachを使うことで、配列の要素を1つずつ順番に処理していってくれます。
functionの引数が、その1つ1つの要素になります。
forEachについて分からない方はこちら
functionについて分からない方はこちら
サンプルコード
<script>
const fruits = ['りんご', 'みかん', 'ぶどう'];
fruits.forEach((e)=>{
console.log(e);
});
</script>またforEachなので、forによって取得し、出力することもできます。
iを定義し、i番目から順に要素を取得していくという形になります。
「何回繰り返すのか」についてですが、
「配列名.length」で、配列の数を取得することができます。
<script>
const fruits = ['りんご', 'みかん', 'ぶどう'];
for(let i = 0; fruits.length > i; i++){
console.log(`配列fruitsの${i}番目は${fruits[i]}です。`);
}
</script>配列の編集方法
私自身あまり現場で使うことはないのですが、配列の中身を後から変更していくことができます。
そんなにややこしいものではないので、サクっとサンプルコードで紹介します。
サンプルコード
<script>
const fruits = ['りんご', 'みかん', 'ぶどう'];
// 特定の要素を書き換え
fruits[1] = 'オレンジ';
console.log(fruits);
// 配列の最後に新しい要素を追加
fruits.push('マスカット');
// 配列に最初に新しい要素を追加
fruits.unshift('さくらんぼ')
console.log(fruits);
// 配列の最後の要素を削除
fruits.pop();
// 配列の先頭の要素を削除
fruits.shift();
console.log(fruits);
</script>
