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á.
- Historia de JavaScript
- let, const, var diferencias
- Literales de plantilla
- 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
¿Entiendes realmente Monorepo? 5 minutos para presentarle la arquitectura front-end a gran escala
Español 
繁體中文 
English 
简体中文 
한국어 
日本語