16 elegantes consejos de taquigrafía de JavaScript
Operador ternario
Cuando desee escribir declaraciones if ... else, use operadores ternarios en su lugar
const x = 20;
let answer;
if(x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}
Taquigrafía:const answer = x > 10 ? 'is greater' : 'is lesser'
Taquigrafía de evaluación de cortocircuito
Al asignar otro valor a una variable, desea asegurarse de que el valor original no sea nulo, indefinido o vacío. Puede escribir una declaración if con múltiples condiciones
if(a !== null || a !== undefined || a !== '') {
let b = a;
}
O puede utilizar el método de evaluación de cortocircuito:const b = a || 'new'
Método abreviado de declaración de variables
let x;
let y;
let z = 3;
Método taquigráfico: let x, y, z = 3
Método abreviado para la condición de existencia if
if(a === true)
Taquigrafía: if(a)
Las dos oraciones son iguales solo cuando a es verdadera
Si el valor de juicio no es verdadero, puede hacer esto:
let a;
if (a !== true) {
// do something...
}
Taquigrafía:
let a;
if(!a) {
// do something...
}
Método abreviado de bucle de JavaScript
for(let i = 0; i < allImgs.length; i++)
Taquigrafía: for (let index in allImgs)también puede utilizar Array.forEach:
function logArrayElements(element, index, array) {
console.log("a[" + index + "]=" + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs;
// a[0] = 2
// a[1] = 5
// a[2] = 9
Evaluación de cortocircuito
Para asignar un valor a una variable juzgando si su valor es nulo o no definido, puede:
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
Taquigrafía:const dbHost = process.env.DB_HOST || 'localhost'
Exponente decimal
Cuando necesite escribir un número con muchos ceros (como 10000000), puede usar un exponente (1e7) para reemplazar este número: for (let i = 0; i < 10000; i++) {}abreviado:
for(let i = 0; i < 1e7; i++) {
}
// 下面都是返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
Taquigrafía de atributos de objeto
Si el nombre del atributo es el mismo que el nombre de la clave, puede utilizar el método ES6:
const obj = {
x:x, y:y }
Taquigrafía:const obj = { x, y }
Función de flecha taquigrafía
Los métodos tradicionales de escritura de funciones son fáciles de entender y escribir para las personas, pero cuando se anidan en otra función, estas ventajas se pierden.
function sayHello(name) {
console.log('Hello', name)
}
setTimeout(function() {
console.log('Loaded')
}, 2000)
list.forEach(function (item) {
console.log(item)
})
Taquigrafía:
sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))
Taquigrafía de valor de retorno implícito
La declaración de retorno se usa a menudo para devolver el resultado final de una función. La función de flecha de una sola declaración puede devolver implícitamente su valor (la función debe omitir {} para omitir la palabra clave de retorno)
Para devolver declaraciones de varias líneas (como expresiones literales de objetos), debe usar () para rodear el cuerpo de la función.
function calcCircumference(diameter) {
return Math.PI * diameter
}
var func = function func() {
return {
foo: 1 }
}
Taquigrafía:
calcCircumference = diameter => (
Math.PI * diameter
)
var func = () => ({
foo: 1 })
Valor de parámetro predeterminado
Para pasar el valor predeterminado al parámetro en la función, generalmente se escribe usando la instrucción if, pero usando ES6 para definir el valor predeterminado, será muy conciso:
function volume(l, w, k) {
if(w === undefined)
w = 3;
if(h === undefined)
k = 4;
return l * w * k
}
Taquigrafía:
volume = (l, w = 3, k = 4) => (l * w * h);
volume(2) // 输出: 24
Cadena de plantilla
Lenguaje JavaScript tradicional, la plantilla de salida generalmente se escribe así
const welcome = 'You have logged in as' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;
ES6 puede usar comillas invertidas y la abreviatura $ {}:
const welcome = `You have logged in as ${
first} ${
last}`
const db = `http://${
host}:${
port}/${
database}`;
Método abreviado para la desestructuración de la asignación
En los marcos web, a menudo es necesario pasar datos en forma de matrices u objetos entre componentes y API, y luego es necesario deconstruirlos
const observable = require('mobx/observable')
const action = require('mobx/action')
const runInAction = require('mobx/runInAction')
const store = this.props.store
const form = this.props.form
const loading = this.props.loading
const errors = this.props.errors
const entity = this.props.entity
Taquigrafía:
import {
observable, action, runInAction } from 'mobx'
const {
store, form, loading, errors, entity } = this.props
También puede asignar nombres de variables:
const {
store, form, loading, errors, entity:contact } = this.props
Taquigrafía de cuerdas de varias líneas
Necesita generar cadenas de varias líneas, debe usar + para empalmar:
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
Con las comillas invertidas, puede lograr un efecto taquigráfico:
const lorem = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.`
Abreviatura de operador de propagación
Hay varios casos de uso para que el operador de propagación haga que el código JavaScript sea más efectivo y se puede usar para reemplazar una función de matriz
// joining arrays
const odd = [1,3,5]
const nums = [2,4,6].concat(odd)
// cloning array
const arr = [1,2,3,4]
const arr2 = arr.slice()
Taquigrafía:
// joining arrays
const odd = [1,3,5]
const nums = [2,4,6,...odd]
console.log(nums); // [2,4,6,1,3,5]
// cloning arrays
const arr = [1,2,3,4]
const arr2 = [...arr];
A diferencia de la función concat (), puede usar el operador de extensión para insertar otra matriz en cualquier lugar de una matriz
const odd = [1,3,5]
const nums = [2,...odd,4,6]
También puede utilizar la desestructuración del operador de propagación:
const {
a,b,...z} = {
a:1,b:2,c:3,d:4}
console.log(a) // 1
console.log(b) // 2
console.log(z) // {c:3,d:4}
Taquigrafía para operación doble sin bits
Existe un caso de uso válido para el operador de doble negación. Se puede usar en lugar de Math.floor (), su ventaja es que se ejecuta más rápido, puede leer este artículo para obtener más información sobre las operaciones de bits.
Math.floor(4.9) === 4 // true
Taquigrafía:
~~4.9 === 4 // true