Algunos consejos para mejorar la elegancia del código JavaScript "1"

Introducción

Un resumen de algunas técnicas de abreviatura comunes en JavaScript, deja que el código se despida de la montaña de mierda, ¡empieza conmigo!

---

---

1. Cadena opcional para evitar accidentes (?.)

¿Operador de encadenamiento opcional?.Genera un error si se accede a una propiedad no definida. Aquí es donde entra en juego el encadenamiento opcional. Cuando se utiliza el operador de encadenamiento opcional cuando una propiedad no está definida, se devolverá indefinido en lugar de un error. Esto evita que su código falle.

const person = {
    
    
  name: "张三",
   age: 30,
   address: {
    
    
     area: "beijing"
   },
 }
 // 一层一层判断
 console.log(person && person.address && person.address.province) // 输出：undefined
 // 使用可选链操作符
 console.log(person?.address?.province) // 输出：undefined

2. Postura de uso correcta de incluye

Hay un juicio if en el segmento de código del operador || que es relativamente largo. En este momento, puede usar incluye para simplificar el código.

if(val === 0 ||  val === "" || val === false || val === null || val === undefined){
    
    
  // ...
}
// 使用includes简化
if([0, '', false, null, undefined].includes(val)){
    
    
  // ...
}

Para verificar si un campo existe en una matriz, puede usar el método include() en lugar de usar el método indexOf() para verificar si el elemento está en la matriz.

let numbers = [1, 2, 3];
const state = numbers.indexOf(1) > -1 //  true
const state = numbers.includes(1)     //  true

3. Abreviatura de Array.map()

Si desea obtener el valor de un campo específico devuelto por la interfaz, puede utilizar los métodos de asignación de desestructuración y abreviatura de objetos para abreviar el método del mapa.
Por ejemplo, si la interfaz devuelve datos, si solo desea la identificación y el nombre en los datos, puede usar la siguiente abreviatura.

// 接口返回数据
res = [{
    
    
  id: 1,
  name: '张三',
  age: 20,
  sex: 0
}, {
    
    
  id: 2,
  name: '李四',
  age: 24,
  sex: 1
}]
// 第一种方法：箭头函数、返回对象
const list= res.map(v => ({
    
    id: v.id, name: v.name}))
// 第二种方法：箭头函数、 解构赋值
const list= res.map(({
     
     id, name}) => ({
    
    id, name}))

4. Operador de coma (,)

逗号（ , ）运算符对它的每个操作数从左到右求值，并返回最后一个操作数的值。这让你可以创建一个复合表达式，其中多个表达式被评估，复合表达式的最终值是其成员表达式中最右边的值。这通常用于为 for 循环提供多个参数。

// 简化前
const list= arr => {
    
    
  arr.push('张三')
  return arr
}
console.log(list([1,2])) // 输出：[1, 2, '张三']

Este código necesita devolver la matriz modificada, lo cual no se puede hacer directamente return arr.push('a'), porque el valor de retorno de push es la longitud de la matriz modificada. En este momento, se puede simplificar en una línea de código usando el operador de coma.

// 简化后
const list= arr => (arr.push('张三'), arr)
console.log(list([1,2])) // 输出：[1, 2, '张三']

5. Intercambie dos variables sin una tercera variable

En Js, puede dividir valores de una matriz mediante la desestructuración. Se puede aplicar para intercambiar dos variables sin una tercera variable.

let x = 1;
let y = 2;

// 交换变量
[x, y] = [y, x];
console.log(x,y) //x:2,y:1

6. Eliminar duplicados de una matriz

Set en js tiene función de deduplicación automática. Set es una colección que le permite almacenar solo valores únicos. Si usa el método set para deduplicar una matriz, primero use new Set() para deduplicarla y convertirla en un objeto, y luego use Array.from() para convertir el objeto nuevamente en la matriz.

//set特点：没有下标。自动去重
let arr = [1,2,3,2]
//数组转对象,这个过程实现去重
let setArr = new Set(arr)
console.log(setArr) //{1, 2, 3}

//需要利用Array.from将其转为数组
let newArr = Array.from(setArr)
console.log(newArr) // [1, 2, 3]

//简化后
let arr = [1,2,3,2];
let newArr = [...new Set(arr)];

6. Reducción de la dimensionalidad de la matriz.

es6 flat()se utiliza para "aplanar" matrices anidadas en matrices unidimensionales. Si el parámetro plano es unos pocos, varias capas de matrices se aplanarán en una sola capa de matrices. Este método devuelve una nueva matriz y no tiene ningún efecto sobre los datos originales.
Si no está seguro de qué profundidad debe reducirse la matriz, puede pasar el valor máximo como parámetro Infinity. La profundidad predeterminada es 1.

const arr = [1, [2, [3, 4], 5], 6]
const flatArr = arr.flat(Infinity) // 输出 [1, 2, 3, 4, 5, 6]

¿Quiere reducir la dimensión de una matriz cuando usa un mapa, como este:

const arr = [1, 2, 3, 4]
const result = arr.map(v => [v, v * 2]).flat()  
console.log(result); // 输出 [1, 2, 2, 4, 3, 6, 4, 8]

js también proporciona un método más simple, que es flatMap(), que se puede cambiar a esto:

const result = arr.flatMap(v => [v, v * 2])

7. Genere rápidamente una matriz del 0 al 9

//传统写法
let arr = []
for(let i=0; i<10; i++){
    
    
   arr.push(i)
}

// 现在
const arr = [...new Array(10).keys()]

8. Asignación lógica vacía (??=)

Asignación nula lógica ??= El operador de asignación nula lógica (x ??= y) solo asigna un valor a x si es nulo (nulo o indefinido).

const res ={
    
     num: 100 };
let text= res.num?res.num:0

//简化后
const res ={
    
     num: 100 };
let text= res.num??= 0;

9. Escriba código de juicio condicional con elegancia

La lógica de juicio condicional simple utiliza operadores if else o ternarios. Puede saber lo que significan de un vistazo, pero una gran cantidad de if else y operadores ternarios superpuestos son simplemente una pesadilla para el receptor.

Por ejemplo, si encuentra algo como esto en un proyecto real,家人们，谁懂啊!

<div>{
    
    {
    
     info.status==1?'状态1':info.status==2?:'状态2':info.status==3?'状态3':info.status==4?'状态4':'状态5' }}</div>

Para lógica compleja, se recomienda utilizar el método de escritura de mapas de objetos, que es muy legible y cómodo de ver ~~~

(1) Ordinario si no

let txt = '';
if (falg) {
    
    
 txt = "成功"
} else {
    
    
 txt = "失败"
}

(2) Operador ternario

let txt = flag ? "成功" : "失败";

(3) Múltiples si no

let txt = '';
if (status == 1) {
    
    
 txt = "成功";
} else if (status == 2) {
    
    
 txt = "失败";
} else if (status == 3) {
    
    
 txt = "进行中";
} else {
    
    
 txt = "未开始";
}

(4) caja del interruptor

let txt = '';
switch (status) {
    
    
 case 1:
 txt = "成功";
 break;
 case 2:
 txt = "成功";
 break;
 case 3:
 txt = "进行中";
 break;
 default:
 txt = "未开始";
}

(5) Método de escritura de objetos

const statusMap = {
    
    
 1: "成功",
 2: "失败",
 3: "进行中",
 4: "未开始"
}
//调用直接 statusMapp[status]

(6) Método de escritura del mapa

const actions = new Map([
 [1, "成功"],
 [2, "失败"],
 [3, "进行中"],
 [4, "未开始"]
])
// 调用直接 actions.get(status)

10. Función de llamada condicional

// 冗余
function test1() {
    
    
  console.log('test1');
};
function test2() {
    
    
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
    
    
  test1();
} else {
    
    
  test2();
}

// 简化后
(test3 === 1? test1:test2)();

11. Utilice && para evaluación de cortocircuitos.

En lugar de verificar si algo es verdadero con una declaración if, puede usar el operador &&

var isReady = true;
function play(){
    
     
    console.log("hello!");
}
if(isReady){
    
     
    play();
}
//简化后
isReady && play();

12. Recopile valores de objetos en una matriz.

Object.keys() recopila todas las claves del objeto en una nueva matriz, y Object.values() recopila todos los valores del objeto en una nueva matriz.

const info = {
    
     name: "张三", age: 35 };
let key = [];
let data = [];
for (let key in info) {
    
     
    key.push(key); 
    data.push(info[key]);
}
// SHORTHAND
const data = Object.keys(info);
const data = Object.values(info);