ES6 JavaScript Objeto ES6 - React Movimiento vernáculo 02

Tabla de contenido

Prefacio

El artículo anterior presentó JavaScript ES6.

let, const, var diferencias
Literales de plantilla
Función de flecha

Hoy continuaremos presentando otras sintaxis novedosas de JavaScript ES6.

Desestructuración de objetos
Mejora literal de objeto
Desestructuración de matrices
Operador de propagación

Desestructuración de objetos ES6

La asignación de estructuración nos permite separar valores específicos para objetos y usarlos

También podemos usarlo junto con la función de flecha mencionada en el artículo anterior para deconstruirlo.

Sin desestructurar

				
					const persona = { nombre_persona: "Hogan", teléfono: "0123456789", correo electrónico: "hoganlin.tech@gmail.com" } const showInfo = () => { console.log(`nombre: ${persona.nombre_persona}\ nphone: ${persona.phone}`) } showInfo() //nombre: Hogan //teléfono: 0123456789

Usando desestructuración

				
					const persona = { nombre_persona: "Hogan", teléfono: "0123456789", correo electrónico: "hoganlin.tech@gmail.com" } const showInfo = ({ nombre_persona, teléfono }) => { console.log(`nombre: ${ nombre_persona}\nteléfono: ${teléfono}`) } showInfo(persona) //nombre: Hogan //teléfono: 0123456789

Mejora literal de objetos ES6

La mejora literal de objetos se puede considerar como una desestructuración inversa. Las variables se pueden combinar en objetos a través de esta sintaxis.

				
					const person_name = "Hogan"; const phone = "0123456789"; const email = "hoganlin.tech@gmail.com"; const printEmail = () => { console.log(`email: ${persona.email}`) } const persona = { nombre_persona, teléfono, correo electrónico, imprimirEmail } console.log(`nombre: ${persona.nombre_persona}\nteléfono: ${persona.teléfono}`); /teléfono: 0123456789

Desestructuración de matrices

Además de los objetos, también se pueden deconstruir matrices y obtener valores mediante comas.

				
					const [primerNombre] = ["Hogan", "Pipi", "Fifi", "Bobo"] console.log(primerNombre) //Hogan const [, , , cuartoNombre] = ["Hogan", "Pipi", "Fifi " ", "Bobo"] console.log(cuarto nombre) //Bobo

Operador de extensión ES6 (Operador de extensión)

La sintaxis del operador spread (Operador Spread) consta de tres puntos…. Y algunas funciones se pueden implementar mediante operadores de extensión, que también es una de las gramáticas comúnmente utilizadas en la gramática moderna.

Combinando matrices

A través del operador de extensión, animal1 y animal2 se pueden combinar y especificar como animal

				
					const animal1 = ["gato", "perro"] const animal2 = ["elefante", "zibra"] const animal = [...animal1, ...animal2] console.log(animal); ', 'perro', 'elefante', 'zibra']

copiar matriz

En algunos casos, cuando obtenemos el valor de la matriz, modificaremos la matriz original, por lo que en este caso queremos poder copiar rápidamente una matriz. Por ejemplo: si desea obtener el último valor de una matriz, puede utilizar el operador de extensión.

Aquí hay un ejemplo de no usar el operador de extensión. Puede encontrar que después de que el programa ejecute Reverse (), modificará la matriz original.

				
					const animal = ["gato", "perro"] const [último] = animal.reverse(); console.log(último); // perro console.log(animal); // [ 'perro', 'gato' ]

Por el contrario, si utiliza el operador de extensión, puede copiar una nueva matriz sin modificar la matriz original.

				
					const animal = ["gato", "perro"] const [último] = [...animal].reverse(); console.log(último); // perro console.log(animal); ', 'perro' ]

Conclusión

Continuando con el artículo anterior, presenté la sintaxis de ES6. Este artículo presenta el uso de operadores de desestructuración, mejora de objetos y extensión en ES6. Los operadores de desestructuración y extensión son funciones muy utilizadas en la implementación de 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

Otros artículos

Reaccionar movimiento vernáculo 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