1. Expandir operador
Como su nombre lo indica, el operador de expansión (...) usado delante de un objeto o matriz expande una estructura en una lista.
Demostrar:
let firstHalf = [ one , two ];
let secondHalf = [ three , four , ...firstHalf];
¿No es lo suficientemente elegante y conciso? Si no usa el operador de propagación
Tenemos que escribir:
let firstHalf = [ one , two ];
let secondHalf = [ three , four ];
for(var i=0, i <firstHalf.length; i++ ) {
secondHalf.push(firstHalf[i]);
}
El operador de propagación también se aplica a las propiedades del objeto fusionado:
const hero = {
name: Xena - Warrior Princess ,
realName: Lucy Lawless
}
const heroWithSword = {
...hero,
weapon: sword
}
Sin el operador de expansión, debe recorrer las propiedades del objeto:
let keys = Object.keys(hero);
let obj = {};
for(var i=0; i< keys.length; i++) {
obj[keys[i]] = keys[props[i]];
}
2. Los parámetros restantes
Los parámetros restantes incluyen los parámetros restantes en la serie. La característica de JavaScript es que el número de parámetros es muy flexible. Por lo general, hay una variable de argumentos para recopilar parámetros.
Veamos un ejemplo:
function add(first, second, ...remaining) {
return first + second;
}
El fragmento de código anterior solo suma el primero y el segundo juntos, es decir, al llamar a add (1, 2) y add (1, 2, 3, 4) se obtendrá el mismo resultado.
Arreglemoslo a continuación:
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}
Como se mencionó anteriormente, ... left recopila los parámetros restantes, nos proporciona los nombres de estos parámetros e indica claramente que pretendemos procesar los parámetros restantes. Recuerdo que ES5 ya tiene argumentos a más tardar, pero poca gente lo sabe.
3. Interpolación de cadenas
¿Has visto una frase así?
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description
" +
" name: " + this.name +
" description: " + this.description
}
}
Por supuesto, me refiero a la declaración larga de varias líneas mal legible en el método getDescription (). Existen fenómenos similares en la mayoría de los lenguajes de programación. Algunos lenguajes proporcionan interpolación de cadenas y, afortunadamente, JavaScript es uno de ellos.
Reescribamos el método getDescription ():
getDescription() {
return `Full description
:
name: ${this.name}
description ${this.description}
`;
}
La interpolación $ {} se puede utilizar en un par de cadenas envueltas. Parece mucho más cómodo ahora.
4. Atributos taquigráficos
Esto debe estar escrito en ES5:
function createCoord(x, y) {
return {
x: x,
y: y
}
}
Los atributos de taquigrafía se pueden utilizar después de ES6:
function createCoord(x, y) {
return {
x,
y
}
}
¿No se ve más refrescante?
5. Atributos del método
El atributo de método es el atributo que apunta al método definido en el objeto.
Considere el siguiente fragmento de código ES5 como ejemplo:
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}
Después de ES6, solo necesita escribir:
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
6, asignación de deconstrucción
La asignación de deconstrucción favorece la salud mental del propio desarrollador.
Considere el siguiente código :
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log( url endpoint , url);
// 大量代码逻辑
dbService.createPerson(name, description)
}
No importa el punto de vista, el código anterior no es perfecto, pero refleja un escenario de aplicación en el que queremos obtener datos de diferentes niveles del objeto . Puede preguntar, ¿cuál es el problema aquí? Bueno, no necesito declarar tantas variables y guardar algunos trazos de teclado.
function handle(req, res) {
const { body: { name, description }, url } = req;
log( url endpoint , url);
// 大量代码逻辑
dbService.createPerson(name, description)
Mira, nuestro código anterior comprime tres líneas en una sola.
La asignación de desestructuración no se limita a los objetos. También se aplica a las matrices.
Considere el siguiente código :
const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];
El código anterior se puede reescribir de una manera más elegante:
const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;
// remaining = [4,5,6]
Podemos usar la coincidencia de patrones anterior para descomponer los valores de la matriz. Usamos ,, para omitir ciertos valores. Los parámetros restantes mencionados anteriormente también se pueden usar aquí, donde capturamos los miembros restantes de la matriz a través de los parámetros restantes.
La asignación de desestructuración también se puede utilizar para funciones y parámetros. Cuando una función tiene más de 2-3 parámetros, el uso de un objeto para recopilar todos los parámetros es el estándar de facto de JavaScript .
Por ejemplo, la siguiente función :
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}
Hay una mejor forma de escribir:
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}
7. Método de matriz
ES6 presenta muchos métodos de matriz útiles, como:
-
buscar (), buscar miembros en la lista, devolver nulo para indicar no encontrado
-
findIndex (), encuentra el índice del miembro de la lista
-
some (), comprueba si cierta afirmación es verdadera en al menos un miembro de la lista
-
incluye, si la lista contiene un elemento
El siguiente código le ayudará a comprender su uso:
const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
const numberArray = [1,2,3,4];
numberArray.includes(2) // true
Promises + Async/Await
8. Solución asincrónica
Si ha estado en este círculo durante algunos años, es posible que recuerde que hubo un momento en el que solo recibimos una devolución de llamada.
como esto:
function doSomething(cb) {
setTimeout(() => {
cb( done )
}, 3000)
}
doSomething((arg) => {
console.log( done here , arg);
})
Usamos devoluciones de llamada porque algunas operaciones son asincrónicas y requieren tiempo para completarse. Luego tuvimos la biblioteca de promesas y la gente comenzó a usarla. Luego, JavaScript agregó gradualmente soporte nativo para promesas.
function doSomething() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve( done )
}, 3000)
})
}
doSomething().then(arg => {
console.log( done here , arg);
})
Incluso podemos encadenar promesas llamando así:
getUser()
.then(getOrderByUser)
.then(getOrderItemsByOrder)
.then(orderItems => {
// 处理排序后的成员
})
La vida posterior fue mejor, teníamos async / await
El fragmento de código anterior se puede escribir así:
async function getItems() {
try {
const user = await getUser();
const order = await getOrderByUser(user);
const items = await getOrderItemsByOrder(order);
return items;
} catch(err) {
// 在这里处理错误，建议返回某个值或者重新抛出错误
}
}
getItems().then(items => {
// 处理排序后的成员
}
9. Módulo
Casi cualquier lenguaje de programación admite el concepto de módulos, es decir, el código se divide en varios archivos y cada archivo es una unidad autónoma (módulo).
Considere el siguiente código:
// math.js
export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default mult(a,b) => a * b;
// main.js
import mult, { add, sub } from ./math ;
mult(2, 4) // 8
add(1,1) // 2
sub(1,2) // -1
Usamos la palabra clave exportar arriba para indicar que las dos estructuras add y sub son públicamente visibles para cualquier módulo que importe este módulo. La palabra clave export default indica la estructura obtenida solo cuando se importa el módulo. En main.js , nombramos el valor predeterminado importado como mult e indicamos que introdujimos los dos métodos add () y sub (). Las funciones de flecha y el diccionario alcanzan esto.