前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇ES6介紹了

1. let、const、var 差異
2. 樣板字面值（Template Literals）
3. 箭頭函式（Arrow Function）

而今天會接續介紹ES6其他新穎的語法

1. 物件解構（Object Destructuring）
2. 物件語法強化（Object Literal Enhancement）
3. 陣列解構（Array Destructuring）
4. 延展運算子（Spread Operator）

物件解構（Object Destructuring）

解構賦值（Destructuring Assignment）可以讓我們針對物件拆出特定的值並且做使用

const person = {
    person_name: "Hogan",
    phone: "0123456789",
    email: "hoganlin.tech@gmail.com"
}

const { person_name, phone } = person
console.log(`name: ${person_name}\nphone: ${phone}`)
/*
name: Hogan
phone: 0123456789
*/

我們也可以搭配前一篇所提及的Arrow Function 一起做使用，對此進行解構

不使用解構的情況

const person = {
    person_name: "Hogan",
    phone: "0123456789",
    email: "hoganlin.tech@gmail.com"
}

const showInfo = () => {
    console.log(`name: ${person.person_name}\nphone: ${person.phone}`)
}

showInfo()
//name: Hogan
//phone: 0123456789

使用解構的情況

const person = {
    person_name: "Hogan",
    phone: "0123456789",
    email: "hoganlin.tech@gmail.com"
}

const showInfo = ({ person_name, phone }) => {
    console.log(`name: ${person_name}\nphone: ${phone}`)
}

showInfo(person)
//name: Hogan
//phone: 0123456789

物件語法強化（Object Literal Enhancement）

物件語法強化（Object Literal Enhancement）可以想像成反向的解構，可以透過此語法將變數組合成物件。

const person_name = "Hogan";
const phone = "0123456789";
const email = "hoganlin.tech@gmail.com";
const printEmail = () => {
    console.log(`email: ${person.email}`)
}
const person = {
    person_name,
    phone,
    email,
    printEmail
}

console.log(`name: ${person.person_name}\nphone: ${person.phone}`);
person.printEmail();
//name: Hogan
//phone: 0123456789

陣列解構（Array Destructuring）

除了物件以外，也可以針對陣列進行解構，可以透過逗號來去取得值。

const [firstName] = ["Hogan", "Pipi", "Fifi", "Bobo"]
console.log(firstName)
//Hogan
const [, , , fourthName] = ["Hogan", "Pipi", "Fifi", "Bobo"]
console.log(fourthName)
//Bobo

延展運算子（Spread Operator）

延展運算子（Spread Operator）的語法由三個句點組成 ...。並且可購透過延展運算子來實作一些功能，也是現代語法中常使用的語法之一。

組合陣列

const animal1 = ["cat", "dog"]
const animal2 = ["elephant", "zibra"]
const animal = [...animal1, ...animal2]

console.log(animal);
//[ 'cat', 'dog', 'elephant', 'zibra' ]

透過延展運算子，可以將animal1以及animal2組合並且指定為animal

複製陣列

在一些情況下，我們會在取得陣列值時，會修改原有的陣列，因此這種情況下會希望可以快速複製一個陣列。例如：想要獲得一個陣列的最後一個值，就可以使用延展運算子。

這邊先舉不使用延展運算子的做法，可以發現程式執行了reverse() 之後，會修改原有的陣列

const animal = ["cat", "dog"]
const [last] = animal.reverse();

console.log(last);
// dog
console.log(animal);
// [ 'dog', 'cat' ]

相反的如果使用延展運算子，則可以先複製一個新的陣列，而不會修改原本的陣列

const animal = ["cat", "dog"]
const [last] = [...animal].reverse();

console.log(last);
// dog
console.log(animal);
// [ 'cat', 'dog' ]

結語

接續前一篇介紹了一下ES6的語法，這篇則是介紹ES6中的解構、物件強化、延展運算子的使用方式，其中解構、延展運算子在React實作中，是相當常使用的功能。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～