JavaScript オブジェクトの構造化使用分析 (詳細な例)

この記事では、JavaScript でのオブジェクトの構造化使用分析に関する関連知識を提供します。お役に立てば幸いです。

ES6 (ES2015) のリリースでは、オブジェクト プロパティを処理するためのより便利で高速な方法が JavaScript に提供されます。このメカニズムは、分割と呼ばれます (分割割り当てとも呼ばれます)。でも本当に使いますか？さまざまなシナリオにおける構造化代入の使用法を本当に理解していますか?

オブジェクトから値を取得するために構造化を使用する

オブジェクトの構造化の最も基本的な使用法は、オブジェクトからプロパティ キーの値を取得することです。

たとえば、名前と年齢という 2 つのプロパティを持つオブジェクトを定義します。

const User = {
  name: '搞前端的半夏',
  age: 18
}

伝統的に、ドット (.) 表記または添え字 ([]) 表記を使用して値を取得します。オブジェクト。次のコード スニペットは、ドット表記を使用してオブジェクトの値 ID と名前を取得する例を示しています。従業員

オブジェクト内の特定の属性の値を取得する前は、通常、. または [] を使用していました。

const name = User['name'];
const age = User.age;

もちろん、この 2 つの方法は現状では問題ありませんが、User 属性が多すぎると、常にコピー＆ペーストする必要があり、コードの繰り返しが多くなります。

構造体の割り当てを使用すると、値をすばやく取得できます。たとえば、オブジェクトのキー名を使用して変数を作成し、オブジェクトの値を同じキーに割り当てます。この方法では、属性の数に関係なく、属性名を割り当てるだけで済むため、コードの繰り返しも大幅に削減されます。

const { name, age } = User;

構造化を使用してネストされたオブジェクトから値を取得する

上記の例では、User は単純な単一層オブジェクトであり、日常の開発オブジェクトでもネストされたオブジェクトに遭遇します。構造体の代入を使用して、ネストされたオブジェクトの値を取得するにはどうすればよいですか。次に、User オブジェクトを再定義し、ユーザーの電話を含む連絡先属性をこのオブジェクトに追加します。 。

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

. を使用してphone の値を行ったり来たりすると、2 回かかります。

const phone = User.contact.phone;

分割代入を使用する場合: 記述は次のようになります:

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

かどうか この書き方に従えば、ネストが何段になっても、必ず特定の値が得られます。

オブジェクトの構造化を使用して新しい変数とデフォルト値を定義する

デフォルト値

もちろん、日々の開発プロセスでは多くの極端な状況に遭遇する可能性があります。

たとえば、バックエンドから渡されたオブジェクトにはいくつかのフィールドが欠落している可能性があります

const User = {
  name: '搞前端的半夏',
}

または属性に特定の値がない場合:

const User = {
  name: '搞前端的半夏',
  age: ''
}

分割代入を使用する場合: age が存在するかどうかは関係ありません。が属性の場合、年齢変数が作成されます。

const { name, age } = employee;

User.age に特定の値がない場合、

const { name, age=18 } = employee;

を使用して年齢にデフォルト値を与えることができます。

新しい変数

ちょっと待ってください。解体セクションではさらに多くの魔法が展示されています。まったく新しい変数を作成し、オブジェクトのプロパティ値を使用して計算された値を割り当てるにはどうすればよいですか?複雑に聞こえますか?これは一例ですが、

User 属性の結合値を出力したい場合はどうすればよいでしょうか。

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18

JavaScript オブジェクトの構造化エイリアスの使用

JavaScript オブジェクトの構造化では、構造化変数のエイリアスに名前を付けることができます。変数名の競合の可能性を減らすのに非常に便利です。

const User = {
  name: '搞前端的半夏',
  age: ''
}

age 属性の値を取得するために構造化代入を使用したいが、変数 age がすでにコード内にあるとします。このとき、構造内でエイリアスを定義する必要があります。

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

年齢を使用すると、エラーが報告されます。

console.log(age);

オブジェクト分割を使用して動的な名前プロパティを処理する

API 応答データを JavaScript オブジェクトとして処理することがよくあります。これらのオブジェクトには動的データが含まれる場合があるため、クライアントとしてはプロパティ キーの名前さえ事前にわからない場合があります。

const User = {
  name: '搞前端的半夏',
  age: ''
}

キーをパラメータとして渡すと、User オブジェクトのプロパティ値を返す関数を作成できます。ここでは [] を使用してパラメータを受け取り、js はこのキー ペアに基づいてオブジェクトからパラメータを取得します。

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');
console.log(contact, name); // 空  搞前端的半夏

関数パラメータ内のオブジェクトの構造化と戻り値

代入パラメータの構造化とパラメータの受け渡し

オブジェクトの構造化を使用して、属性値をパラメータとして関数に渡します。

const User = {
  name: '搞前端的半夏',
  age: 18
}

name 次に、 と 属性値を使用してブラウザ コンソールにログインするためのメッセージ部門を作成する簡単な関数を作成しましょう。

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

値を関数パラメータとして直接渡し、内部で使用します。

consoleLogUser(User); // 搞前端的半夏 今年 18

関数オブジェクトの戻り値の構造化

オブジェクト構造化関数には別の使い方もあります。関数がオブジェクトを返す場合、値を直接変数に分解できます。オブジェクトを返す関数を作成しましょう。

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

ループ内でのオブジェクトの構造化の使用

最後に説明する (ただし重要な) 使用法は、ループの構造化です。従業員オブジェクトのセットを考えてみましょう。配列を反復処理し、各従業員オブジェクトのプロパティ値を使用したいと考えています。

const User= [
  { 
       'name': '爱分享的半夏',
    'age': 16
  },
  { 
      'name': '搞前端的半夏',
    'age': 18
  },
  { 
        'name': '敲代码的半夏',
    'age': 20
  }
];

for-of ループを使用して User オブジェクトを反復し、オブジェクト分割代入構文を使用して詳細を取得できます。

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

関連する推奨事項: JavaScript 学習チュートリアル

以上がJavaScript オブジェクトの構造化使用分析 (詳細な例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。