Vue.jsでフロントエンドの開発をしていると、配列のデータを取り扱う場面が多々あります。そこで、JavaScriptで配列のデータを取り扱う場面でよく使うメソッドなどを備忘録として複数記事でまとめていきたいと思います。第一回目はメソッドに当てはまらないのですが、基本的な部分として配列の作成や値を取得する方法をテーマに行くつかあげてみました。  

1. 空の配列を作成する

最も基本的なところですが、定数もしくは変数に配列を定義する方法です。空の角カッコで囲むことで空の配列を定義できます。もしくは「new Array()」でも同義になります。 【javascript】

const arrayData = [];
 // もしくは
const arrayData = new Array();

console.log(arrayData);

  【console】

[]

   

2. 値が入った配列を作成する

配列を定義する時に値を入れることも可能です。初期値として値が入った配列を扱うことができます。 【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう' ];

console.log(arrayData);

  【console】

[ "りんご", "みかん", "ぶどう" ]

   

3. 引数から配列を作成する

「Array.of()」を使うことで引数に設定した値から配列を作ることができます。あまり使うケースはないように思います。 【javascript】

const arrayData = Array.of('りんご', 'みかん', 'ぶどう');

console.log(arrayData);

  【console】

[ "りんご", "みかん", "ぶどう" ]

   

4. 配列をコピーして作成する

「Array.from()」で配列をコピーすることができます。全く同じ配列を新たに作り出します。 【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう' ];
const arrayCopied = Array.from(arrayData);

console.log(arrayCopied);

  【console】

[ "りんご", "みかん", "ぶどう" ]

   

5. 配列内の特定の値を取得

配列名の後にインデックス番号を添えると、そのインデックスに対応した値を取得することができます。インデックス番号は0から始まるので注意が必要です。 【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう', 'さくらんぼ', 'いちご' ];
const orange = arrayData[1];
const cherry = arrayData[3];

console.log(orange);
console.log(cherry);

  【console】

"みかん"
"さくらんぼ"

   

6. 配列の長さ（値の数）を取得する

「Array.length」で配列の長さ、つまり値の数を取得することができます。全てのデータ数などを調べるときによく使います。 【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう', 'さくらんぼ', 'いちご' ];
const arrayLength = arrayData.length;

console.log(arrayLength);

  【console】

5

   

7. 配列が空かどうか判定する

配列に値が入っているか、入っていないつまり空であるかを調べる時に使います。専用の関数はないので、このような形で先ほどの「Array.length」で返り値を見て判断しています。 【javascript】

const arrayData = [];
function isEmpty(array) {
 if ( array.length > 0) {
  console.log('配列は空ではありません'); 
 } else {
  console.log('配列は空です');
 }
}
isEmpty(arrayData);

  【console】

"配列は空です"

   

まとめ

【空の配列を作成】 const ***** = [];　もしくは　const ***** = new Array();   【値が入った配列を作成】 const ***** = [ val1, val2, val3, ..... ];   【引数から配列を作成】 const ***** = Array.of( val1, val2, val3, ..... );   【配列をコピーして作成】 const ***** = Array.from( array );   【配列内の特定の値を取得】 const ***** = array[index];   【配列の長さを取得】 const ***** = Array.length;   【配列の空判定】 if ( Array.length > 0) { }   これらは配列を扱う上で基本的な部分になりますが、JavaScriptでは配列データを扱うのにとても便利なメソッドがたくさん用意されています。また別記事にて色々とまとめていきたいと思います。