こんにちは、さち です。
先日、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()、適切な方を使って下さい。
コメント