JavaScript ES6 Object – React 白話文運動 02

JavaScript ES6 Object – React 白話文運動02

前言

前一篇 JavaScript ES6介紹了

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

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

1. 物件解構（Object Destructuring）
2. 物件語法強化（Object Literal Enhancement）
3. 陣列解構（Array Destructuring）
4. 延展運算子（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）的語法由三個句點組成 …。並且可購透過延展運算子來實作一些功能，也是現代語法中常使用的語法之一。

組合陣列

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

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

備註

目前文章已移至 JavaScript ES6 – React 白話文運動 01

未來文章一併更新於此網站 Hogan.B Lab

並且包含多語系 繁體中文、英文、日文、簡體中文

觀看分類：React 白話文運動、其他系列

其他文章

React 白話文運動 01-JavaScript ES6

為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置

你真的懂Monorepo？ 5 分鐘帶你認識前端大型架構

Zustand 是什麼？ React 前端狀態管理