ES6 JavaScript ES6 Object - React 白話文運動 02

Prefacio

前一篇 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）的語法由三個句點組成 …。並且可購透過延展運算子來實作一些功能，也是現代語法中常使用的語法之一。

組合陣列

透過延展運算子，可以將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' ]

Conclusión

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

Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!

Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~

Cita

https://www.w3schools.com/js/js_es6.asp

https://www.javascripttutorial.net/es6/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

其他文章

React 白話文運動 01-JavaScript ES6

¿Por qué las grandes empresas utilizan Nx? La herramienta Monorepo se puede configurar rápidamente en 5 minutos.

¿Entiendes realmente Monorepo? 5 minutos para presentarle la arquitectura front-end a gran escala

¿Qué es Zustand? Reaccionar la gestión del estado front-end

Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

Tabla de contenido