オブジェクトの数の数えるにはkeysメソッドを使うって知ってた？
JavaScriptでは、しょっちゅう配列やオブジェクトを使います。その数を計算するのも日常茶飯です。でも、そんな日常茶飯な作業であっても、案外知らずにハマっている方もおられるかもしれないと思って、小ネタを作りました。
そんなの常識でしょ。と言われちゃうかもしれません。でも、私はハマりました。
オブジェクトって配列に入っているのと、オブジェクトを含んだオブジェクトと２パターンがありますよね。
colors=[
{
color: '#72aee6',
name: 'Blue 20'
},
{
color: '#3582c4',
name: 'Blue 40'
},
{
color: '#e65054',
name: 'Red 40'
},
{
color: '#8a2424',
name: 'Red 70'
},
{
color: '#f2d675',
name: 'Yellow 10'
},
{
color: '#bd8600',
name: 'Yellow 40'
}
]
これはcolorsという名前の配列の中に、オブジェクトが入っています。いくつオブジェクトを含んでいますか？
そうこれはcolors.lengthで６が返ってきます。
これとオブジェクト内のオブジェクトの数を返す方法を同じと考えてはいけません。
border = {
topLeft: "0px",
topRight: "0px",
bottomRight: "0px",
bottomLeft: "0px",
value: "0px"
}
このborderオブジェクトにはいくつのオブジェクトが含まれていますか。
ついborder.lengthとやってしまいそうですが、これってundefinedが返ります。
正しくは
Object.keys(radius_heading).length
としないといけないのです。
念のため説明を加えると、Object.keys(radius_heading) というのは、オブジェクトが持っている全てのプロパティ名を配列にするコマンドです。これでプロパティ名が配列になったので、その.length プロパティを使って長さを取得します。それがオブジェクトの数というわけです。
オブジェクト自体はlengthプロパティは持っていません。案外知らなかったということはありませんか？