內容目錄
Toggle前言
前一篇 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 分鐘快速建置