計算機科学のブログ

オブジェクトと配列 分割 単一の分割代入文、リテラル

入門JavaScriptプログラミング (JD Isaacks(著)、株式会社クイープ(監修、翻訳)、翔泳社)のUNIT2(オブジェクトと配列)、LESSON 11(分割)、11.6(練習問題)、Q11-1の解答を求めてみる。

コード

// ウォーミングアップ
// オブジェクトリテラルをつかてデータ構造を作成
let potus = {
    name: {
        first: 'Barack',
        last: 'Obama',
    },
    address: {
        street: '1600 Pennsylvania Ave NW',
        region: 'Washington, DC',
        zipcode: '20500',
    },
};

// 分割代入文
let { name: {
    first: firstName,
    last: lastName
},
    address: {
        street,
        region,
        zipcode,
    } } = potus;

console.log(firstName);
console.log(lastName);
console.log(street);
console.log(region);
console.log(zipcode);

// 問題のコードを単一の分割代入文に変換
let products = [
    {
        name: 'name0',
        price: 'price0',
        images: [
            'image00', 'image01',
        ],
    },
    {
        name: 'name1',
        price: 'price1',
        images: [
            'image10', 'image11',
        ],
    },
];

let [{
    name: firstProductName,
    price: firstProductPrice,
    images: [
        firstProductImage,
    ],
},
    {
        name: secondProductName,
        price: secondProductPrice,
        images: [
            secondProductImage,
        ],
    },
] = products;

console.log(firstProductName);
console.log(firstProductPrice);
console.log(firstProductImage);
console.log(secondProductName);
console.log(secondProductPrice);
console.log(secondProductImage);

// 配列リテラルではなくオブジェクトで
let {
    0: { name: firstProductName0,
        price: firstProductPrice0,
        images: {
            0: firstProductImage0
        } },
} = products;
console.log(firstProductName0);
console.log(firstProductPrice0);
console.log(firstProductImage0);

入出力結果(Console)

% node sample1.js
Barack
Obama
1600 Pennsylvania Ave NW
Washington, DC
20500
name0
price0
image00
name1
price1
image10
name0
price0
image00
%