配列とmapの使い方

JavaScriptの配列はJSON形式も含めて、比較的使いやすいです。主に、forEachとmap,filterはよく使います。またmapもKEYが必要な値の場合はよく使いますので基本的な使い方を掲載します。

  • 配列の使い方(定義)

配列を定義する際は、明示的にArrayオブジェクトをインスタンス化する方法と、[]とすることで、配列として定義することができます。

// Array定義
var list1 = new Array('100', '200', '300');

// []定義
var list2 = ['100', '200', '300'];

// 要素数定義
var list3 = new Array(3);
var list4 = [3];

// 配列の件数分、繰り返す
for (var i = 0; i < list1.length; i++) {
    console.log(list1[i]);
}

// 単純並び替え
list1.sort();
  • 配列の使い方(要素追加、削除)

要素を追加する場合、存在しない添え字を指定して値を設定するか、pushする方法があります。自分で添え字を正しく管理できているのであれば、要素位置を指定して代入してもよいですが、私は基本的にはpushをよく使います。要素を削除する場合は、delete,spliceとありますがdeleteはほとんど使いません。deleteは要素そのものを削除してくれるのではなく、中身を削除するという仕様ですので、配列の要素数も変わらない為、使い方が難しいです。spliceは削除分を詰めてくれますので、便利です。

var list1 = ['100','200'];
 
// 3番目の要素に追加する方法
list1[2] = '300';
 
// 最後に要素を追加する方法
list1.push('400');

// 特定の要素の中身を削除(全体の配列要素数は変わらない)する場合(delete)
delete list1[2];

// 特定の要素開始位置(添え字:2)から、
// 削除したい要素数(3)を指定して削除する場合
list1.splice(2,3);
  • 配列の使い方(ループ、絞り込み)

配列の繰り返しはforEachで行っていますが、単純な要素数のループでも問題ないと思います。絞り込みはfiltterを使っています。

var list1 = [100, 200, 300];

// 配列の件数分、繰り返す(単純)
for (var i = 0; i < list1.length; i++) {
    console.log(list1[i]);
}

// 配列の件数分、繰り返す(forEach)
list1.forEach(function(val) {
    console.log(val);
});

// filterを使って、リストを絞り込む
var list2 = list1.filter(function(val) {

    // 200以下のみのリストとする
    return value <= 200;
});
  • 配列の使い方(区切り文字で分割)

特定の文字列を区切り文字(カンマ等)で区切って配列化したい場合はよくあります。この場合はsplitを使って配列化します。

var strList = "AAA,BBB,CCC";

// カンマで分割し配列化する。
var arrayList = strList.split(",");

// 配列の件数分処理する。
for (var i=0;i<arrayList.length;i++) {
   console.log(arrayList[i]);
}
  • mapの使い方(定義、追加、削除)

Mapは便利ですので使いますが、配列でもfilterやmapを使って、同様のデータ処理が可能ですので、JSON形式とうまく使ってあげると、Mapは使わなくてもいい場合が多いです。端的にキーに対する値が欲しいときにのみ使っています。

// map定義
var map = new Map();

// KEYを指定して値を設定する
map.set('key1', 'test1');
map.set('key2', 'test2');

// KEYを指定して値を取得する
console.log(map.get('key1'));
console.log(map.get('key2'));

// KEYを指定して要素を削除
map.delete('key1');

// mapを初期化する。
map.clear();

// KEYが存在するか判定する場合
if (map.has('key1')) {
    alert("KEYが存在");
}

// mapのKEYより繰り返し処理
for(var key of map.keys()) {
    console.log(key);
}

// mapのVALUEより繰り返し処理
for(var val of map.values()) {
    console.log(val);
}