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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Firefox:アドレスバーで検索するとURLの自動補完が誤爆する (02/18)
  • iPhone: iOS 12 にしたら設定から「機能制限」が消えた件 (02/15)
  • Windows:「FontCache」がSSDに書き込みまくるので停止する (02/13)
  • ニコニコ生放送:「実験放送」のタイムシフトでレジュームを使う (02/11)
  • LINE:複数のトークルームを一括で既読にする方法 (02/08)
  • 管理人より
    2019年もよろしくおねがいします。

    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()、適切な方を使って下さい。




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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • スパムコメント防止のため一部ホストを規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使用経験がないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ