JavaScript でのオブジェクトの分解に関するガイド

オブジェクトの分解

オブジェクトの分解は、オブジェクトのプロパティにアクセスするためのアプローチです.重複を取り除くことでコードを乾燥させるため、オブジェクトの構造化を使用します.オブジェクトの分解を使用する理由はたくさんあります.今日は、いくつかお話ししましょう.

プロパティの割り当て

プロパティを変数に割り当てる方法として最も一般的に見られます.伝統的に、次のようなプロパティの割り当てが表示されることがあります.

person = {
    title: 'Software Engineer',
    name: '',
    age: ''
}

const title = person.title

上記の例では、いくつかのプロパティを持つ「person」というオブジェクトを宣言しています.次に、"title"という名前の定数変数を宣言し、オブジェクト "person"の "title"プロパティに設定します.アプリケーションで title プロパティを頻繁に使用するために、このタイプの変数割り当てに参加することがあります.

オブジェクトの分解により、よりシンプルで簡潔なバージョンを作成できます.次に例を示します.

person = {
    title: 'Software Engineer',
    name: '',
    age: ''
}

const { title } = person

同様に、オブジェクト「person」と「title」という名前の定数を宣言します.ただし、この代入では、定数を単純にオブジェクト「人」に代入します.

定数を角かっこで囲むことにより、宣言する定数と同じ名前のプロパティのオブジェクトを探すようにコードに指示しています.

上記の単純な例では、オブジェクトの構造化を使用するのは冗長であるか、ばかげているようにさえ見えるかもしれません.ただし、オブジェクトがアプリケーションとともに成長するにつれて複雑さが増し、簡潔でドライなコードの必要性も高まります.

複数のプロパティの割り当て

オブジェクトの構造化を使用して、コード内で一度に複数のプロパティを割り当てる方法は次のとおりです.

person = {
    title: 'Software Engineer',
    name: '',
    age: ''
}

const { title, name, age } = person

そして、これが「従来の」同等のバージョンです.

person = {
    title: 'Software Engineer',
    name: '',
    age: ''
}

const title = person.title
const name = person.name
const age = person.age

オブジェクトの構造化により、かなりの量のコードを削除しました!

他にどのように使用できますか?

エイリアス

元のプロパティ名を使用したくない場合は、オブジェクトの分解を使用してプロパティ名にエイリアスを付けることができます.

person = {
    title: 'Software Engineer',
    name: '',
    age: ''
}

const { title: jobTitle } = person

上記の例では、まだ「person.title」にアクセスしていますが、新しい識別子「jobTitle」を付けています. 「jobTitle」をコンソールすると、戻り値は「Software Engineer」になります.かっこいいでしょ?

ネストされたオブジェクトのプロパティ

前の例では、JavaScript オブジェクトは単純なデータ型 (つまり文字列) のプロパティのみを表していました.私たちはシンプルさが好きですが、JavaScript オブジェクトは複雑になりがちです. JavaScript オブジェクトには、配列またはオブジェクト自体であるプロパティがある場合があります.次に例を示します.

person = {
    title: 'Software Engineer',
    name: '',
    age: '',
    previousJob: {
        title: 'SEO Specialist',
        location: 'NYC'
    }
}

"person"オブジェクトには "previousJob"というプロパティがあり、"previousJob"には "title"と "location"の 2 つのプロパティがあります.これは入れ子です.別のオブジェクトの中にオブジェクトがあります.

ネストされたオブジェクトのプロパティにアクセスするには、もちろんオブジェクトの分解を使用できます.方法は次のとおりです.

person = {
    title: 'Software Engineer',
    name: '',
    age: '',
    previousJob: {
        title: 'SEO Specialist',
        location: 'NYC'
    }
}

const { previousJob: { location } } = person 

コンソールに「場所」を尋ねると、「NYC」という戻り値が返されます.

要約

オブジェクトの構造化によってコードが乾燥します.

オブジェクトの分解により、オブジェクトのプロパティが変数に割り当てられます.

オブジェクトの分解により、プロパティの値が変数にバインドされます.

オブジェクトの分解は、複雑なアプリケーションで役立ちます.

読んでくれてありがとう！

🌻 ディスカッションを続けるには、以下にコメントしてください.私はあなたから学びたいです! 🌻