ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript オブジェクトの値を割り当ておよび取得するメソッド

JavaScript オブジェクトの値を割り当ておよび取得するメソッド

Susan Sarandon
Susan Sarandonオリジナル
2024-12-04 16:05:26173ブラウズ

Methods to assign and retrieve values in a JavaScript object

導入

キーと値をオブジェクトに割り当てる方法は 4 つあります。

  1. ドット表記
  2. 角かっこ表記
  3. Object.defineProperty() メソッド
  4. Object.defineProperties() メソッド

ドット表記

ドット表記は、JavaScript でオブジェクトのプロパティにアクセスするために簡単で一般的に使用される方法です。ドット表記を使用してプロパティを作成し、オブジェクトに割り当てることができます。このアプローチにより、オブジェクトの作成後にプロパティを動的に定義できます。

let objectName = {};  // "object literal" syntax
objectName.someKey = someValue; // set property and value

const value = objectName.someKey; // retrive value

長所

可読性:

読みやすく、理解しやすいです。

: person.name は person['name'] よりも解釈が簡単です。

使いやすさ:

すぐに書けるシンプルな構文。

静的プロパティ名:

有効な識別子 (文字、数字、アンダースコア、$) を使用してプロパティにアクセスするのに最適です。

短所

有効な識別子に限定されます:

プロパティ名に特殊文字、スペースが含まれている場合、または動的である場合は失敗します。

: person.first-name はエラーをスローします。代わりに person["first-name"] を使用してください。

変数は使用できません:

: プロパティ名が変数に格納されている場合、ドット表記では使用できません。

角括弧表記

角かっこ表記を使用すると、文字列または変数を使用してオブジェクトのプロパティに動的にアクセスしたり操作したりできます。角かっこは任意のプロパティ名または変数を使用できるため、ドット表記よりも柔軟性が高くなります。ただし、書くのは少し難しくなります。

長所

動的プロパティアクセス:

プロパティ名を変数または式にすることができます。

: propName が変数の場合、obj[propName] は柔軟です。

特殊文字とスペース:

特殊文字、スペース、または予約キーワードを含むプロパティ名を処理します。

: obj["first-name"] または obj["class"].

柔軟な反復:

オブジェクトのプロパティをループする場合に便利です。

短所

読みにくくなります:

特にネストされたプロパティの場合、ドット表記に比べて読みにくくなります。

タイプミスが起こりやすい:

プロパティ名の間違いは、開発中に検出されない可能性があります (例: obj["naem"])。

詳細:

より多くの入力と文字列キーの引用符の使用が必要です。

Object.defineProperty() メソッド

Object.defineProperty() メソッドは、オブジェクトに新しいプロパティを定義するか、既存のプロパティを更新して、オブジェクトを返します。

let objectName = {};  // "object literal" syntax
objectName.someKey = someValue; // set property and value

const value = objectName.someKey; // retrive value

Object.defineProperties() メソッド

Object.defineProperties() メソッドは、オブジェクト上で新しいプロパティを定義するか、既存のプロパティを直接変更して、オブジェクトを返します。

const user = {};

Object.defineProperty(user,  'firstName', {
  value: 'John',
  writable: true, // `false` is default
});

console.log('First name', user.firstName);

以上がJavaScript オブジェクトの値を割り当ておよび取得するメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。