Quelques astuces pour améliorer l'élégance du code JavaScript "1"

Introduction

Un résumé de quelques techniques d'abréviation couramment utilisées en JavaScript. Que le code dise adieu à la montagne de merde, à commencer par moi !

---

---

1. Chaîne optionnelle pour éviter les accidents (?.)

Opérateur de chaînage facultatif ?. Génère une erreur en cas d'accès à une propriété non définie. C'est là qu'intervient le chaînage facultatif. Lors de l'utilisation de l'opérateur de chaînage facultatif lorsqu'une propriété n'est pas définie, undéfini sera renvoyé au lieu d'une erreur. Cela empêche votre code de planter.

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

2. Position d'utilisation correcte des inclusions

Il y a un jugement if dans le segment de code de l'opérateur || qui est relativement long. À ce stade, vous pouvez utiliser des inclusions pour simplifier le code.

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

Pour vérifier si un champ existe dans un tableau, vous pouvez utiliser la méthode include() au lieu d'utiliser la méthode indexOf() pour vérifier si l'élément est dans le tableau.

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

3. Abréviation de Array.map()

Si vous souhaitez obtenir la valeur d'un champ spécifique renvoyé par l'interface, vous pouvez utiliser les méthodes d'affectation de déstructuration et d'abréviation d'objet pour abréger la méthode map.
Par exemple, si l'interface renvoie des données, si vous souhaitez uniquement l'identifiant et le nom dans les données, vous pouvez utiliser l'abréviation suivante.

// 接口返回数据
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. Opérateur virgule (,)

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

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

Ce code doit renvoyer le tableau modifié, ce qui ne peut pas être fait directement return arr.push('a'), car la valeur de retour de push est la longueur du tableau modifié. À ce stade, il peut être simplifié en une seule ligne de code à l'aide de l'opérateur virgule.

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

5. Échangez deux variables sans une troisième variable

En Js, vous pouvez diviser les valeurs d'un tableau en utilisant la déstructuration. Peut être appliqué pour échanger deux variables sans troisième variable

let x = 1;
let y = 2;

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

6. Supprimer les doublons d'un tableau

Set in js a une fonction de déduplication automatique. Set est une collection qui vous permet de stocker uniquement des valeurs uniques. Si vous utilisez la méthode set pour dédupliquer un tableau, utilisez d'abord new Set() pour le dédupliquer et le convertir en objet, puis utilisez Array.from() pour reconvertir l'objet en tableau.

//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. Réduction de la dimensionnalité du tableau

es6 flat()est utilisé pour « aplatir » des tableaux imbriqués en tableaux unidimensionnels. Si le paramètre flat est de quelques-uns, alors plusieurs couches de tableaux seront aplaties en une seule couche de tableaux. Cette méthode renvoie un nouveau tableau et n'a aucun effet sur les données d'origine.
Si vous n'êtes pas sûr de la profondeur à laquelle le tableau doit être réduit, vous pouvez transmettre la valeur maximale comme paramètre Infinity. La profondeur par défaut est 1.

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

Voulez-vous réduire la dimension d'un tableau lorsque vous utilisez map, comme ceci :

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 fournit également une méthode plus simple, flatMap(), qui peut être modifiée comme suit :

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

7. Générez rapidement un tableau de 0 à 9

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

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

8. Affectation logique vide (??=)

Affectation logique nulle ??= L'opérateur d'affectation logique nulle (x ??= y) n'attribue une valeur à x que si elle est nulle (nulle ou indéfinie).

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

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

9. Écrivez le code de jugement conditionnel avec élégance

Une logique de jugement conditionnel simple utilise des opérateurs if else ou ternaires. Vous pouvez savoir ce qu'ils signifient en un coup d'œil, mais un grand nombre d'opérateurs if else et ternaires superposés sont simplement un cauchemar pour le receveur.

Par exemple, si vous rencontrez quelque chose comme ça dans un projet réel,家人们，谁懂啊!

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

Pour une logique complexe, il est recommandé d'utiliser la méthode d'écriture Object Map, qui est très lisible et confortable à regarder ~~~

(1) Ordinaire si sinon

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

(2) Opérateur ternaire

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

(3) Multiple si sinon

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

(4) boîtier de commutation

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

(5) Méthode d'écriture d'objet

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

(6) Méthode d'écriture de la carte

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

10. Appel conditionnel de fonction

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

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

11. Utiliser && pour l'évaluation des courts-circuits

Au lieu de vérifier si quelque chose est vrai avec une instruction if, vous pouvez utiliser l'opérateur &&

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

12. Collectez les valeurs des objets dans un tableau

Object.keys() collecte toutes les clés de l'objet dans un nouveau tableau et Object.values() collecte toutes les valeurs de l'objet dans un nouveau tableau.

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);