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

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

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

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



最新記事
  • Gmailログイン時に「Chrome」が自動ログインしないようにする (10/19)
  • ニコニコ動画に再生速度ボタンを設置するスクリプトを修正しました (10/17)
  • iPhone:変態から「AirDrop痴漢」されないための自衛と対策 (10/15)
  • Windows:標準機能を使ってPCの性能を測定してみる (10/12)
  • Affinity Photo:「アンカーポイント(回転の中心)」を使いこなす (10/10)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

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









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




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





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

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

    ブログパーツ