Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

reaccionar-vernáculo-campaña-02 Objeto JavaScript ES6

Prefacio

El artículo anterior presentó JavaScript ES6.

  1. let, const, var diferencias
  2. Literales de plantilla
  3. Función de flecha

Hoy continuaremos presentando otras sintaxis novedosas de JavaScript ES6.

  1. Desestructuración de objetos
  2. Mejora literal de objeto
  3. Desestructuración de matrices
  4. 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

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESEspañol