JavaScriptオブジェクトのプロパティ

JavaScriptオブジェクトのプロパティについて知る必要があるすべてを見つけてください

JavaScriptオブジェクト値に関連付けられたラベルで構成されるプロパティがあります。

私たちが見たオブジェクトリテラル構文:

const car = {

}

次のようなプロパティを定義しましょう。

const car = {
  color: 'blue'
}

ここにありますcar名前の付いたプロパティを持つオブジェクトcolor、値付きblue

ラベルは任意の文字列にすることができます。引用符を使用しなかったことに注意してくださいcolor、しかし、プロパティ名に変数名として無効な文字を含めたい場合は、次のことを行う必要があります。

const car = {
  color: 'blue',
  'the color': 'blue'
}

これは、スペース、ハイフン、およびその他の特殊文字を意味します。

ご覧のとおり、各プロパティはコンマで区切ります。

プロパティの値を取得する

2つの異なる構文を使用して、プロパティの値を取得できます。

最初はドット表記

car.color //'blue'

2つ目は、無効な名前のプロパティに必須であり、角かっこを使用することです。

car['the color'] //'blue'

存在しないプロパティにアクセスすると、undefined

car.brand //undefined

プロパティ値をチェックする良い方法ですが、デフォルトでは事前定義された値を使用することです||オペレーター:

const brand = car.brand || 'ford'

前述のように、オブジェクトはプロパティとしてネストされたオブジェクトを持つことができます。

const car = {
  brand: {
    name: 'Ford'
  },
  color: 'blue'
}

を使用してブランド名にアクセスできます

car.brand.name

または

car['brand']['name']

または混合さえ:

car.brand['name']
car['brand'].name

プロパティの値を設定する

上で見たように、オブジェクトを定義するときにプロパティの値を設定できます。

ただし、後でいつでも更新できます。

const car = {
  color: 'blue'
}

car.color = ‘yellow’ car[‘color’] = ‘red’

また、オブジェクトに新しいプロパティを追加することもできます。

car.model = 'Fiesta'

car.model //‘Fiesta’

プロパティを削除する方法

与えられたオブジェクト

const car = {
  color: 'blue',
  brand: 'Ford'
}

を使用して、このオブジェクトからプロパティを削除できます

delete car.brand

Delete a property from an object in JavaScript

また、次のように表現されます。

delete car['brand']
delete car.brand
delete newCar['brand']

プロパティを未定義に設定する

非常に最適化された方法でこの操作を実行する必要がある場合、たとえば、ループ内の多数のオブジェクトを操作している場合、別のオプションは、プロパティをに設定することです。undefined

その性質上、deleteかなり遅い単純な再割り当てよりもundefined、50倍以上遅くなります。

ただし、プロパティはオブジェクトから削除されないことに注意してください。その値は消去されますが、オブジェクトを反復処理してもまだ存在します。

Iterate over the object

使用するdeleteはまだ非常に高速です。この種のパフォーマンスの問題は、正当な理由がある場合にのみ調べる必要があります。そうでない場合は、より明確なセマンティクスと機能を使用することをお勧めします。

オブジェクトを変更せずにプロパティを削除する

可変性が懸念される場合は、削除するプロパティを除いて、古いプロパティからすべてのプロパティをコピーすることで、完全に新しいオブジェクトを作成できます。

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => { if (key !== prop) { object[key] = car[key] } return object }, {})

Create a new object without mutating the original

JavaScriptオブジェクトのプロパティの数を数える方法

使用Object.keys()検査するオブジェクトを渡して、オブジェクトのすべての(独自の)列挙可能なプロパティの配列を取得するメソッド。

次に、をチェックしてその配列の長さを計算しますlengthプロパティ:

const car = {
  color: 'Blue',
  brand: 'Ford',
  model: 'Fiesta'
}

Object.keys(car).length

私は列挙可能なプロパティを言いました。これは、それらの内部列挙可能フラグがデフォルトであるtrueに設定されていることを意味します。MDNを確認してくださいこのテーマの詳細については。

JavaScriptオブジェクトのプロパティが未定義かどうかを確認する方法

JavaScriptプログラムでは、オブジェクトのプロパティが未定義かどうかを確認する正しい方法は、typeofオペレーター。

typeofオペランドのタイプを示す文字列を返します。括弧なしで使用され、チェックしたい値を渡します。

const list = []
const count = 2

typeof list //“object” typeof count //“number” typeof “test” //“string” typeof color //“undefined”

値が定義されていない場合、typeof'undefined'を返しますストリング

今、あなたが持っているとしましょうcar1つのプロパティを持つオブジェクト:

const car = {
  model: 'Fiesta'
}

これはあなたがcolorプロパティはこのオブジェクトで定義されています:

if (typeof car.color === 'undefined') {
  // color is undefined
}

動的プロパティ

プロパティを定義するとき、角かっこで囲むと、そのラベルを式にすることができます。

const car = {
  ['c' + 'o' + 'lor']: 'blue'
}

car.color //‘blue’

オブジェクトプロパティとして変数を含めるためのより単純な構文

する代わりに

const something = 'y'
const x = {
  something: something
}

あなたはこの単純化された方法を行うことができます:

const something = 'y'
const x = {
  something
}

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: