例えば、次のオブジェクトがあるとします。

let company = {
  name: "ABCO商事",
  staff: ["田中", "佐藤", "鈴木"],
  office: ["東京", "埼玉"],
  department: { sales: { one: "営業部1課", two: "営業部2課" } },
}

オブジェクトの中身を取り出すときは、company.〇〇とします。

company.nameconsole.log()で確認すると、

image2

会社名が表示されました。

別の方法として、以下のコードでも取り出すことができます。

let { name } = company

console.log(name);で確認すると、

image3

company.nameと同じ結果が得られました。

このままでは、プロパティ名と変数名が同じなので、変数名を変えたい場合は、変数名の後に『:□□』と書きます。

□□ の中には、新しい名前が入ります。

let { name: companyName } = company

console.log(companyName);で確認すると、

image4

変数名を変更しても、得られる値は同じでした。

例えば、company オブジェクトの中には電話番号が入っていませんが、初期値として入れることもできます。

let { tel = [] } = company

image5

空の配列ができました。

ネストされたオブジェクトの値を取り出します。

companyName = "DEDO商事"

image6

別の方法で、オブジェクトの中身を変更してみます。

let {
  department: {
    sales: { one, two },
  },
} = company

image7

company オブジェクトに会社概要の関数を作成してみます。

let company = {
  name: "ABCO商事",
  staff: ["田中", "佐藤", "鈴木"],
  office: ["東京", "埼玉"],
  department: { sales: { one: "営業部1課", two: "営業部2課" } },

  description: function ({ staffNumber, officeNumber }) {
    console.log(
      `会社名:${name}、代表者:${this.staff[staffNumber]}、本社:${this.office[officeNumber]}`
    )
  },
}

company.description({ officeNumber: 0, staffNumber: 0 })

image8

会社概要を作成することができました。

呼び出す順番が異なっても、問題なく表示されています。

ブログ一覧