ES6學習歷程 10 — 解構賦值（二）

Object Destructuring Assignment 物件解構賦值

Photo by Carl Heyerdahl on Unsplash

假設有一個名為person的物件，其有兩個屬性 firstName 和 lastName

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

在ES6之前，當你想要將person的屬性設為變數時，同常需要這麼做：

let firstName = person.firstName;
let lastName = person.lastName;

在ES6的物件解構語法中提供了另一種方法，能將物件屬性很容易地指定(assign)給變數：

let {
    firstName: fname,
    lastName: lname
} = person;

firstName 和 lastName 被設為 fName 和 lName 變數。

這種語法公式為：

let {
    property1: variable1,
    property2: variable2
} = object;

「:」 之前的property 是物件屬性，「:」 之後的variable是變數名稱。

如果變數的名稱與物件屬性相同，就會直接將屬性值帶入變數：

let {
    firstName,
    lastName
} = person;
console.log(firstName);   // 'John'
console.log(lastName);   // 'Doe'

使用物件解構為變數時，若物件屬性不存在，則變數將會默認為undefined：

let {
    firstName,
    lastName,
    middleName
} = person;
console.log(middleName);   // undefined

因 person 中沒有 middleName，故 middleName 顯示 undefined。

設定默認值

當物件的屬性不存在時，可以為變數預設默認值：

let person = {
    firstName: 'John',
    lastName: 'Doe',
    currentAge: 28
};
let {
    firstName,
    lastName,
    middleName = '',
    currentAge: age = 18
} = person;
console.log(middleName); // ''
console.log(age); // 28

在上述範例中，當person的屬性中沒有middleName時，將middleName預設為空字串。

另外，將currentAge設為變數age，並給定默認值18。

但是，當person中確實具有middleName屬性時，middleName就不會是默認值，而是原本person物件中的值。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    middleName: 'C.',
    currentAge: 28
};
let {
    firstName,
    lastName,
    middleName = '',
    currentAge: age = 18
} = person;
console.log(middleName);   // 'C.'
console.log(age);   // 28

解構一個空物件

某些情況下，函式可能回傳一個物件或是null：

function getPerson() {
    return null;
}

然後使用物件解構：

let {
    firstName,
    lastName
} = getPerson();
console.log(firstName, lastName);

則出現錯誤訊息：

TypeError: Cannot destructure property 'firstName' of 'getPerson(…)' as it is null.

為避免這種情況，可以使用OR運算符( || ) 將null 預設為空物件，這樣就不會拋出錯誤了：

let {
    firstName,
    lastName
} = getPerson() || {};

巢狀物件解構

假設有一個名為employee的物件，其屬性中又有一個物件(name)

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

接下來要解構這個name物件，使其成為單獨的變數

let {
    name: {
        firstName,
        lastName
    }
} = employee;
console.log(firstName); // John
console.log(lastName); // Doe

可以同時將多個屬性設為多個變數：

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};
let {
    name: {
        firstName,
        lastName
    },
    name
} = employee;
console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); // { firstName: 'John', lastName: 'Doe' }

解構函式參數

假設有一個函式顯示person物件：

let display = (person) => console.log(`${person.firstName} ${person.lastName}`);
let person = {
    firstName: 'John',
    lastName: 'Doe'
};
display(person);

可以像下面範例這樣，將要傳遞到函式中的物件進行解構：

let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);
let person = {
    firstName: 'John',
    lastName: 'Doe'
};
display(person);