このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

JavaScript:連想配列の要素数(length)を取得したい

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

先日、JavaScript で
「連想配列」の要素数(長さ)を取得したいことがありました。

簡単そうに見えるんですが、これが意外とできなくて
「配列」のように「length」プロパティを使おうとしてもダメなんですよね。

でも、わざわざ「for」などを使って手動で数えるのは面倒……。

何か簡単な方法、ないんですか!?




連想配列は「length」プロパティが使えない

「配列」と「連想配列」、どちらも名称に「配列」が付いていますが
要素数を調べる「length」プロパティは、「配列」でしか使えません。
var member = [
'dia',
'kanan',
'hanamaru'
];

var color = {
dia: 'red',
kanan: 'emerald green',
hanamaru: 'yellow'
};

console.log(member.length);// 3
console.log(color.length);// undefined

「連想配列」の方は「undefined(未定義)」になってしまいました。
連想配列は、単なる「オブジェクト」なので
「length」プロパティ自体が存在していないからです。




解決方法

Object.values() を使うと、「連想配列」でも「length」プロパティを使えます。
「for」などで要素を手動で数える必要はありません。
var color = {
dia: 'red',
kanan: 'emerald green',
hanamaru: 'yellow'
};

var len = Object.values(color).length;
console.log(len);// 3

「length」プロパティを使う前の状態を確認してみると
連想配列の「値」が、配列として取得されているのが分かります。
配列になっているから、「length」プロパティが使えるわけですね。
これは、for...in を使って配列に取り出したものとまったく同じです。
var color = {
dia: 'red',
kanan: 'emerald green',
hanamaru: 'yellow'
};

var val = Object.values(color);
console.log(val);// Array(3) [ "emerald green", "red", "yellow" ]

//for...in を使って配列に取り出したものと同じ
var arr = [];
for(var key in color) {
arr.push( color[key] );
}
console.log(arr);// Array(3) [ "emerald green", "red", "yellow" ]

「値」が取り出せるのなら、「キー」も取り出せるのでは?
そうなんです、できます。
var color = {
dia: 'red',
kanan: 'emerald green',
hanamaru: 'yellow'
};

var key = Object.keys(color);
console.log(key);// Array(3) [ "kanan", "dia", "hanamaru" ]
console.log(key.length);// 3

要素数のカウントで「値」「キー」どちらを使う方が良いのかは
状況によって異なると思うので
Object.values()Object.keys()、適切な方を使って下さい。




このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ