目錄
前言
前一篇 JavaScript ES6介紹了
- let、const、var 差異
- 樣板字面值（Template Literals）
- 箭頭函式（Arrow Function）
而今天會接續介紹 JavaScript ES6其他新穎的語法
- 物件解構（Object Destructuring）
- 物件語法強化（Object Literal Enhancement）
- 陣列解構（Array Destructuring）
- 延展運算子（Spread Operator）
ES6 物件解構（Object Destructuring）
解構賦值（Destructuring Assignment）可以讓我們針對物件拆出特定的值並且做使用
我們也可以搭配前一篇所提及的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
ES6 物件語法強化（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
ES6 延展運算子（Spread Operator）
延展運算子（Spread Operator）的語法由三個句點組成 …。並且可購透過延展運算子來實作一些功能，也是現代語法中常使用的語法之一。
組合陣列
const animal1 = ["cat", "dog"]
const animal2 = ["elephant", "zibra"]
const animal = [...animal1, ...animal2]
console.log(animal);
//[ 'cat', 'dog', 'elephant', 'zibra' ]
複製陣列
在一些情況下，我們會在取得陣列值時，會修改原有的陣列，因此這種情況下會希望可以快速複製一個陣列。例如：想要獲得一個陣列的最後一個值，就可以使用延展運算子。
這邊先舉不使用延展運算子的做法，可以發現程式執行了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實作中，是相當常使用的功能。
如果有任何建議與疑問也歡迎留言！
如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～
引用
https://www.w3schools.com/js/js_es6.asp
https://www.javascripttutorial.net/es6/
https://developer.mozilla.org/en-US/docs/Web/JavaScript
其他文章
為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置
繁體中文 
English 
简体中文 
한국어 
日本語 
Español