ES6 JavaScript ES6 Object - React Vernacular Campaign 02

Preamble

Previous Article JavaScript ES6 Introduced

let, const, var Difference
Template Literals
Arrow Function

Today, we will continue to introduce other new syntax of JavaScript ES6.

Object Destructuring
Object Literal Enhancement (OLE)
Array Destructuring
Spread Operator

ES6 Object Destructuring

Destructuring Assignment allows us to extract specific values for an object and use them.

We can also use it with the Arrow Function mentioned in the previous post to deconstruct it.

Situations where deconstruction is not used

				
					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

Use of Deconstruction

				
					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 can be thought of as a reverse deconstruction by which variables can be grouped into objects.

				
					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

In addition to objects, arrays can be deconstructed and values can be obtained by commas.

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

ES6 Spread Operator

The syntax of the Spread Operator consists of three clauses.... The Spread Operator can be purchased to implement some functions, and is one of the most commonly used grammars in modern languages.

Combined Arrays

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

				
					const animal1 = ["cat", "dog"] const animal2 = ["elephant", "zibra"] const animal = [...animal1, ...animal2] console.log(animal); //[ 'cat ', 'dog', 'elephant', 'zibra' ]

Copy Array

In some cases, we may want to modify an array when we get its values, so it is desirable to be able to quickly duplicate an array in this case. For example, if you want to get the last value of an array, you can use the extended operator.

Here is an example of how to do it without using the extension operator, you can see that the program will modify the original array after executing reverse().

				
					const animal = ["cat", "dog"] const [last] = animal.reverse(); console.log(last); // dog console.log(animal); // [ 'dog', 'cat' ]

On the other hand, if you use a stretching operator, you can copy a new array without modifying the original one.

				
					const animal = ["cat", "dog"] const [last] = [...animal].reverse(); console.log(last); // dog console.log(animal); // [ 'cat ', 'dog' ]

Conclusion

Following the introduction of ES6 syntax in the previous article, this article introduces the use of the deconstruction, object enhancement, and extension operators in ES6, of which the deconstruction and extension operators are quite commonly used in React implementations.

Feel free to leave a comment if you have any suggestions or questions!

If you like this series of articles, please do not hesitate to click like and share it so that more people can see it!

Quote

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

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

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

JavaScript ES6 Object - React Vernacular Campaign 02

Table of Contents