かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

javascript 連想配列(オブジェクト)の要素数が知りたい。

javascript連想配列(オブジェクト)の要素数を知りたい時Object.keys()を使うと便利。

var myKantai = {
  flagship:     '鬼怒',
  destroyer1: '吹雪',
  destroyer2: '白雪',
  destroyer3: '初雪',
  destroyer4: '深雪'
};

例えば上の様なオブジェクトの要素数を知りたい時は

var length = Object.keys(myKantai).length;
console.log(length); // 5

の様な感じで要素数が取れます。
 

// 第20駆逐隊に編成
myKantai.flagship = '神通';
myKantai.destroyer1 = '東雲';
myKantai.destroyer2 = '吹雪';
myKantai.destroyer3 = '磯波';
// destroyer4は削減
delete myKantai.destroyer4;

// 艦隊の数は
var length = Object.keys(myKantai).length;
console.log(length); // 4

オブジェクト内の要素を編集してもちゃんと要素数が取れます。

 
Object.keys(オブジェクト名)はそのオブジェクトのキーの名前が配列で返されるので、オブジェクトをループで回す時にも使えそうです。

よくあるfor in でのループ

for( var key in myKantai) {
  if( myKantai.hasOwnProperty(key) ) {
    console.log(key, myKantai[key]);
  }
}


Object.keys() を使ってループ

var keys = Object.keys(myKantai);
for( var i=0, l=keys.length; i<l; i+=1) {
  console.log(keys[i], myKantai[ keys[i] ]);
}

ループ中にhasOwnPropertyを使って判定しなくて良くなるので
ちょっとだけ高速になりそうな気がします!

Object.keys()ってそのオブジェクトのキーだけ取れる。
で合ってますよね... (少し不安)


追記 forEach()で回す方法を書きました。

追記 for...ofで回す方法を書きました。


初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発