オブジェクトの長さの取得方法

15559 ワード

programming webdev beginners javascript テキストリンク

配列と異なり、オブジェクトの長さを取得するのは常にトリッキーです.まあこれ以上!
オブジェクト.keysオブジェクトの列挙可能なプロパティキーの配列を返します.そしてその後、単にコールすることができますlength , とVoila!あなたは物の長さを持っている🎉

const object = {one: '1️⃣', two: '2️⃣'};

// Using Lodash
_.size(object); // 2

// Using JavaScript
Object.keys(object).length; // 2

なぜ私たちはオブジェクトの長さを呼び出すことができませんか

あなたはなぜ私たちは単に呼び出すことができない疑問に思うかもしれないlength 直接私たちのオブジェクト.どうすればよいかを見ましょう.

const object = {one: '1️⃣', two: '2️⃣'};

object.length; // undefined

object.hasOwnProperty('length'); // false

それはできないからobject 持っていないlength プロパティ.のみstring and arrays を持っているlength プロパティ.

const string = 'hello';
const array = [1,2,3];

string.hasOwnProperty('length'); // true
array.hasOwnProperty('length'); // true

列挙体とは

それでは、別のトピックをカバーしましょう.初めに言ったObject.keys 列挙可能なプロパティキーの配列を返します.それで、どこでこれを理解しましょうenumerable 属性が由来する.

プロパティの割り当て

通常、オブジェクトにプロパティを追加する場合は、ドット表記を使用するだけです.

const object = {};

object.one = '1️⃣';

console.log(object); // { one: '1️⃣' }

プロパティの定義

あるいは、我々はまたObject.defineProperty . これは3パラメータを受け入れます.そして、それは我々が列挙可能属性をセットすることができるプロパティ記述子にあります.

Object.defineProperty(object name, property name, property descriptor)

それでは、このメソッドでプロパティを定義しましょう.

const object = {};

Object.defineProperty(
  object,
  'one', {
    value: '1️⃣'
  }
);

console.log(object); // {} 
// ☝️ Why is it empty? 🤔

うーんそれは変だ.なぜ、我々の資産は現れませんでしたか🤔 さて、それは私たちがこのようにプロパティを定義するときenumerable 属性はデフォルトでfalse . それで、我々がそれを示したいならば、我々はセットする必要がありますtrue それに.

const object = {};

Object.defineProperty(
  object,
  'one', {
    value: '1️⃣',
    enumerable: true // 👈
  }
);

console.log(object); // { one: '1️⃣' } 
// ☝️ Great, it shows up now!

省略可能なデフォルト値

オブジェクトのプロパティの例に戻りましょう.なぜそれが自動的に表示されましたか?まあ、それは私たちがそのようにプロパティを割り当てるときenumerable 属性は自動的にtrue .

const object = {};

object.one = '1️⃣';

object.propertyIsEnumerable('one'); // true

列挙可能要約

私たちのほとんどのために、我々のプロパティを定義するとき、我々は列挙可能な属性にめったに触れません.これは、単に我々が作成した特定のプロパティが表示されるか、またはオブジェクトを反復処理するときに非表示になる場合に制御する方法ですObject.keys .
あなたが列挙性についてもっと学びたいなら、この記事を読むことをお勧めします.Enumerability in ECMAScript 6 .

Therefore, the attribute enumerable is used to hide properties that should not be iterated over. That was the reason for introducing enumerability in ECMAScript 1.

アクセル・ラシュチャメエ博士

オブジェクト。キー対オブジェクト。getownPropertyNames

今あなたが理解するenumerable , あなたが長さを得るオプションとして見るかもしれないもう一つの方法をカバーしましょう.Object.getOwnPropertyNames .

const object = {one: '1️⃣'};

Object.defineProperty(
  object,
  'two', {
    value: '2️⃣',
    enumerable: false
  }
);

Object.keys(object); // [ 'one' ]

Object.getOwnPropertyNames(object); // [ 'one', 'two' ]

ご覧の通りObject.getOwnPropertyNames を返しますObject.keys を返します.前に述べたように、列挙可能な属性はおそらく理由のために隠されているので、あなたはそれにアクセスしたくないかもしれません.したがって、Object.getOwnPropertyName オブジェクトの長さを取得するためのメソッドではないかもしれません.

シンボルのオブジェクト長

デフォルトの前にObject.keys オブジェクトの長さを取得します.もう一つ考慮したい.ECMAScript 6、ES 6、新しい原始データ型が導入されたsymbol . そして、あなたはsymbol オブジェクトのプロパティ名として.

const animal = {
  [Symbol('ghost')]: '👻',
  turtle: '🐢'
};

しかし、あなたがいるとき、Gotchaはありますsymbol プロパティ名として.Object.keys nor Object.getOwnPropertyNames 動作します.

Object.keys(animal);
// [ 'turtle' ] <-- no symbol

Object.getOwnPropertyNames(animal);
// [ 'turtle' ] <-- no symbol

だから解決策を使用することですObject.getOwnPropertySymbols

Object.getOwnPropertySymbols(animal);
// [ Symbol(ghost) ]

つのメソッドを組み合わせて、適切な長さを取得します.

const enumerableLength = Object.keys(animal).length;
const symbolLength = Object.getOwnPropertySymbols(animal).length;

const totalObjectLength = enumerableLength + symbolLength;
// 2 <-- 👍