JavaScript ES6 - Reaccionar movimiento vernáculo 01

reaccionar-campaña-vernácula-01 JavaScript ES6

Prefacio

Antes de ingresar al marco front-end de React, primero permítanme ayudar a los lectores a revisar el conocimiento sobre JavaScript ES6. Este artículo lo explicará.

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

Lo anterior es sobre la traducción al chino. Actualmente, se utiliza la traducción oficial al chino de MDN. Los lectores pueden dejar mensajes si hay algún error administrativo.

Historia de JavaScript ES6

Brendan Eich publicado en 1995 JavaScript, inicialmente la función principal de JavaScript era implementar algunas funciones simples en páginas web. Más tarde, aparecieron Ajax, Jquery, React.js, Vue.js, Node.js y TypeScript. Poco a poco, JavaScript se convirtió en uno de los lenguajes de programación más utilizados antes de convertirse en algo común y se puede utilizar tanto para el front-end. y desarrollo back-end.

Es posible que algunos lectores conozcan ES5 y ES6, pero ¿qué es ese ES?

El nombre completo de ES es ECMAScript, donde ECMA es la abreviatura de European Computer Manufacturers Association (Asociación Europea de Fabricantes de Computadoras), y el siguiente número es la generación, por lo que ES5 es la quinta generación de ECMAScript y ES6 es la sexta generación de ECMAScript. .

Entonces, ¿por qué no se escuchan con frecuencia las versiones de ES1 a ES4?

La razón principal es que después de la llegada de ES1 en 1997, ES2, ES3 y ES4 aún implementaban funciones simples, respectivamente, solucionaron algunos problemas o agregaron expresiones regulares y procesamiento de cadenas. Cuando apareció ES5 en 2009, realmente tenía bastantes. funciones, incluidos métodos de matriz extendidos, propiedades de objetos y JSON.

JavaScriptES6

ES6 apareció en 2015 y agregó muchas funciones convenientes y útiles, que también se implementan en varios tipos de aplicaciones JavaScript.

Si hay lectores que quieran comprender el contexto histórico en profundidad, también pueden consultar

Diferencias entre var, let y const

1.var

Var es un método de declaración temprana de ES5. Puede usar var para declarar y tiene un alcance funcional o global.

2. dejar

let es un método de declaración relativamente reciente en ES6. Puede utilizar let para realizar declaraciones. Además de implementar el alcance de la variable estática (Alcance de la variable léxica), el uso de llaves también generará un bloque de programa (Bloque de código). En la declaración de let, esta variable será el alcance del bloque (alcance del bloque).

3. constante

const es un método de declaración relativamente reciente en ES6. Puede usar const para declarar y es un área de bloque (con alcance de bloque).
La mayor diferencia entre const y let es que const es un valor que no será reasignado.

Diferencias entre var y let

Utilice rápidamente dos códigos para mostrar la diferencia. Primero use var en ES5 para declarar. Puede encontrar que después de declarar nuevamente en el discriminante, dejar el bloque de código en el discriminador (Bloque de código), las variables aún se declaran en el bloque de código. valor.

				
					var input = "Global"; if(input){ var input = "Block"; console.log("input"); // Se generará la variable Block } console.log("input"); El bloque saldrá
				
			

Si usa let en ES6 para la declaración nuevamente, puede encontrar que después de declararlo nuevamente en el discriminante, su alcance de influencia solo estará en el bloque de programa (Bloque de código) y las variables no afectarán las variables globales externas (global variable)

				
					let input = "Global"; if(input){ let input = "Block"; console.log("input"); // El bloque se generará } console.log("input");
				
			

A través de los ejemplos anteriores, debería poder encontrar que la declaración var en ES5 se declara en el bloque, lo que contaminará otras variables con el mismo nombre. Por lo tanto, la declaración principal ahora usa let o const para la declaración.

Literales de plantilla

Lo que se utiliza aquí es WEB MDN es un nombre propio y se utiliza su traducción al chino, pero en algunos lugares también se le llama cadena de plantilla (Template String).
En la sintaxis tradicional de JavaScript, utilizamos el signo más para concatenar cadenas. Sin embargo, esta sintaxis tradicional es bastante poco intuitiva.

				
					console.log("Hola, este es "+ Nombre + " y mi número de teléfono es "+ Número de teléfono)
				
			

Después de que aparezca la sintaxis de los literales de la plantilla, podemos usar una marca inversa para encerrar la cadena y colocar las variables en la cadena mediante el tamaño de fuente y las llaves ${}. Si se reescribe el código anterior, se convertirá en lo siguiente:Puede ver que toda la cadena se vuelve más concisa y más fácil de entender.

				
					console.log(`Hola, soy ${Name} y mi número de teléfono es ${PhoneNumber}`)
				
			

Función de flecha

Declaración (Definir)

En la sintaxis tradicional de ES5, se usa la siguiente sintaxis para declarar. Hay una función de palabra clave al principio para declarar, seguida del nombre de la función, y luego las llaves envuelven la implementación dentro de la función.

				
					función imprimirHolaMundo() { consola.log("Hola Mundo") } var imprimirHolaMundo = función() { consola.log("Hola Mundo") }
				
			

Otra forma de declarar es la expresión de función (Expresión de función), que primero declara una variable y luego asigna una función a la variable.

Izar

Aquí también hablamos de un concepto sobre funciones. Hay dos métodos de declaración diferentes, a saber, declaración de función y especificación de función. Se izará (Hoist) en la declaración de función pero no en la especificación de función.

				
					printHelloWorld() function printHelloWorld() { console.log("Hello World") } // No hay problema en ejecutar de esta manera printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } // Al ejecutarlo de esta manera hay un problema.
				
			

paso de parámetros

En ES5 tradicional, los parámetros se pueden pasar en funciones. El sustantivo formal aquí es argumento (Argumento).

				
					función imprimirHola(nombre) { console.log(`Hola, mi nombre es ${nombre}`) } imprimirHola("Hogan")
				
			

Pero, ¿qué pasa si al usar una función no se dan valores de argumento?

será mostrado Hola, mi nombre no está definido.

En ES6, también se proporcionan los valores predeterminados de la función. Siempre que asigne la cotización directamente al valor en la declaración de la función, puede evitar problemas.

				
					function printHello(name = "Hogan") { console.log(`Hola, mi nombre es ${name}`) } printHello() // Hola, mi nombre es Hogan printHello("Bo Bo") // Hola, My El nombre es Bo Bo.
				
			

Función de flecha

La función de flecha es una de las nuevas características de ES6. Puede declarar funciones sin usar la palabra clave de función, o incluso sin dar un nombre de función y un valor de retorno.

En futuras implementaciones de React, las funciones de flecha se utilizarán con bastante frecuencia, ya que son una característica muy importante y fácil de usar.

El siguiente es el método tradicional de declaración de funciones de ES5, incluidas las palabras clave function y return

				
					var imprimirHola = función(nombre) { return ("Hola " + nombre) } console.log(imprimirHola("Hogan"))
				
			

A través de la función de flecha, se puede reescribir de la siguiente manera

				
					const printHola = (nombre) => `Hola ${nombre}` console.log(printHello("Hogan"))
				
			

Conclusión

Este artículo presenta algunas características y conceptos nuevos en JavaScript ES6 y los explica utilizando el código del programa.

Permita que los lectores revisen la sintaxis original de JavaScript antes de ingresar a la sintaxis del marco de front-end de React.

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

Si te gusta la serie de artículos de React Vernacular Movement, no dudes en darle me gusta y compartirla para que más personas puedan verla ~

Otras referencias de artículos

¿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