¿Cuáles son las características de ES6 que vale la pena aprender?
El karma es trabajador
01 Prefacio
ES6 es ahora el estándar de lenguaje de próxima generación. El aprendizaje front-end ha alcanzado una nueva etapa. Nuestro lenguaje JavaScript ya se puede utilizar para escribir aplicaciones complejas a gran escala y convertirse en un lenguaje de desarrollo de nivel empresarial. Y la posición de desarrollo front-end es ahora una de las posiciones más importantes en la empresa, por lo que es normal aprender nuevas tecnologías e impulsar productos con tecnología.
Para el estudio de ES6, sugerimos echar un vistazo al tutorial del Sr. Ruan Yifeng, que detalla cada punto de conocimiento, que es muy fácil de entender. A continuación, hablaré sobre algunas de las características más importantes que ES6 ha agregado, que se pueden usar en nuestros proyectos y entrevistaré las preguntas frecuentes.
02 nuevas características
Se han agregado muchas características nuevas al ES6, y es imposible dar más detalles sobre cada una de ellas. Encontré lo siguiente en la entrevista. Puede pasarlo si lo describe claramente.
- La diferencia entre let, var y const
- Función de flecha
- Asignación de desestructuración
- Cadena de plantilla
- Conjunto, estructura de datos del mapa
- Objeto de promesa
- Apoderado
La diferencia entre let, var y const
Todas estas palabras clave se utilizan para declarar variables / constantes. En el pasado, solíamos usar var para declarar, pero existen algunas desventajas y es fácil cometer errores.
Primero, comprendamos el problema de la promoción y el alcance variables.
Promoción variable: cuando usa var para la declaración, puede usarlo sin declaración. Por ejemplo:
console.log(a); //undefined
¿Mejorará la función? ¿Qué función o variable tiene mayor prioridad?
console.log(a); //f (a){}
var a=1;
function a(){};
El resultado que obtenemos es que la función tiene mayor prioridad que la variable. Entonces, ¿cuál es el alcance?
var a=1;
function b(){
var a=2
console.log(a);
}
b()
Ejecución de este código, obtendremos el resultado es 2
var a = 1;
function b() {
// var a = 2
console.log(a);
}
b()
Pero cuando comentemos el código, encontraremos que el resultado se convierte en 1.
Alcance: cuando no puede encontrar una declaración en el dominio de trabajo actual, irá al alcance del padre para encontrarla. De esta manera, encontrará la cadena progresivamente y finalmente formará una cadena.
Let y var son operadores que se pueden usar para declarar variables, pero la diferencia entre ellos es que var tiene promoción de alcance, y let se limita al uso del alcance actual, de lo contrario se informará un error. También será incorrecto usarlo antes de la declaración.
console.log(a)
let a
Dirá que a no está definido
const se usa para declarar una constante. No se puede cambiar después de la declaración y no hay ningún problema de promoción variable. Si se usa antes de la modificación o declaración, se informará un error. También debemos tener en cuenta que las declaraciones let y const no se colgarán en la ventana.
var a = 1
let b = 1
const c = 1
console.log(window.b) // undefined
console.log(window. c) // undefined
La pregunta de la entrevista para el examen regular es, ¿qué genera el siguiente código?
for (var i =0; i <5; i++) {
setTimeout(()=>{
console.log(i);
},i*1000)
}
//5 5 5 5 5
Este es el problema del alcance a nivel de bloque. Si se reemplaza con una instrucción let, generará 0 1 2 3 4
Para resumir:
- var tiene promoción variable y puede usarse antes de la declaración. Los otros dos tienen una zona muerta temporal y no se pueden usar antes de la declaración
- let y const son básicamente lo mismo, este último no se puede asignar de nuevo
- Promoción de funciones debido a promoción variable
Función de flecha
La función de flecha es un nuevo método de escritura de funciones agregado por ES6. Los siguientes dos métodos de escritura son en realidad los mismos:
setTimeout(function(){
console.log("Hello World!");
},1000)
setTimeout(()=>{
console.log("Hello World!");
},1000)
¿Cuál es la diferencia entre él y las funciones ordinarias?
- No se puede usar como constructor, no prototipo
- esto apunta a heredado y no cambiará
Asignación de desestructuración
La asignación de desestructuración es una forma de escribir la coincidencia de patrones. En el pasado, cuando asignamos valores, generalmente tenemos que asignarlos por separado, como:
let a = 1;
let b = 2;
let c = 3;
Sin embargo, la asignación de desestructuración nos permite asignar valores de esta manera. Tanto el lado izquierdo como el derecho corresponden a la copia. Si la desestructuración no tiene éxito, el valor será indefinido
let [a, b, c] = [1, 2, 3];
let [a, b, c] = [1, 2];
console.log(a,b,c); //1, 2, undefined
Generalmente hay dos aspectos que usamos comúnmente. Uno es la deconstrucción de cadenas JSON, como:
const {name,age,number} = {name:'rose',age:12,number:123}
console.log(name,age,number); //rose 12 123
También hay una operación de intercambio que podemos usar para datos, como:
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b); //2, 1
Cadena de plantilla
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
En comparación con el uso anterior, la costura es mucho más simple y legible. La sintaxis es usar backticks para declarar, y la variable usa $ {variable}.
Conjunto, estructura de datos del mapa
Set it es un constructor, utilizado para generar la estructura de datos Set. Similar a una matriz, pero a diferencia de una matriz, no repite cada elemento. El efecto también se puede usar para operaciones de deduplicación de matrices.
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
Deduplicación de matriz, relativamente simple
function unique(arr) {
return [...new Set(arr)]
}
Map es una colección de pares clave-valor similares a los objetos, pero el rango de claves no está limitado a cadenas, y se pueden usar varios tipos de valores como claves, incluido el objeto.
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
Como constructor, Map también puede aceptar una matriz como parámetro, los miembros de la matriz también son una matriz de pares clave-valor.
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
Objeto de promesa
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
El constructor Promise acepta una función como parámetro. Los dos parámetros de la función son resolver y rechazar. Son dos funciones proporcionadas por el motor de JavaScript y no es necesario que las implemente usted mismo.
La función de la función resolver es cambiar el estado del objeto Promise de "incompleto" a "exitoso" (es decir, de pendiente a resuelto), que se llama cuando la operación asincrónica tiene éxito y pasa el resultado de la operación asincrónica como un parámetro; rechazar La función de la función es cambiar el estado del objeto Promise de "incompleto" a "fallido" (es decir, de pendiente a rechazado), llamado cuando falla la operación asincrónica, y pasar el error informado por la operación asincrónica como un parámetro.
Después de que se genera la instancia de Promise, puede usar el método then para especificar la función de devolución de llamada del estado resuelto y el estado rechazado respectivamente.
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Apoderado
Proxy puede entenderse como el establecimiento de una capa de "intercepción" frente al objeto de destino. El acceso externo al objeto primero debe ser interceptado por esta capa. Por lo tanto, proporciona un mecanismo para filtrar y reescribir el acceso externo. Existen los siguientes 13 tipos de intercepción de Proxy: Para un uso específico, puede encontrar el Proxy que escribí antes.
- get (target, propKey, receptor) intercepta la lectura de la propiedad del objeto
- set (target, propKey, value, receptor) Intercepta la configuración de las propiedades del objeto
- tiene (target, propKey) 拦截 propkey en proxy
- deleteProperty (target, propKey) 拦截 delete proxy [propKey]
- ownKeys (objetivo)
- getOwnPropertyDescriptor (target, propKey) devuelve el objeto interceptor de descripción de propiedad de objeto
- defineProperty (target, propKey, propDesc)
- ProventExtensions (target)
- getPrototypeOf (target)
- isExtensible (objetivo)
- setPrototypeOf (target, proto)
- aplicar (objetivo, objeto, argumentos)
- construct (target, args) intercepta instancias de proxy como operaciones llamadas por el constructor
03 Resumen
Muchas funciones nuevas de ES6 pueden simplificar las nuestras, pero necesitamos comprender cada detalle que contenga, ya que una escritura incorrecta puede hacer que nuestro programa produzca resultados operativos diferentes. Si los lectores quieren saber más detalles, recomiendo leer la tercera edición del estándar de entrada ES6 de Ruan Yifeng, que definitivamente ganará mucho.
