Vous avez dit que vous pouviez utiliser ES6, alors utilisez-le rapidement !

Comment démarrer rapidement avec VUE3.0 : Commencez par apprendre

« Si vous savez utiliser ES6, alors utilisez-le ! » : C'est le « rugissement » qu'un leader a fait aux membres de l'équipe lors d'une revue de code car il en a découvert de nombreuses endroits lors de la révision du code. Il est préférable d'utiliser la méthode d'écriture ES5. Cela ne signifie pas que l'écriture dans ES5 ne fonctionnera pas et qu'il y aura simplement des bugs.

Il se trouve que ce leader avait un fétichisme du code. Il était extrêmement mécontent des membres qui avaient 3 à 5 ans d'expérience dans l'écriture de code à ce niveau et n'arrêtait pas de se plaindre du code. Cependant, je pense que j'ai encore beaucoup appris de ses plaintes, j'ai donc enregistré les plaintes du leader et les ai partagées avec d'autres creuseurs. Si vous pensez qu'elles sont utiles, donnez-leur un coup de pouce. S'il y a des erreurs ou de meilleures façons d'écrire, vous êtes les bienvenus pour commenter.

ps : la syntaxe JS après ES5 est collectivement appelée ES6 ! ! !

1. Tucao sur la collection de valeurs

La valeur est très courante dans les programmes, comme l'obtention de valeur à partir d'un objet obj .

const obj = {
    un:1,
    b:2,
    c:3,
    ré:4,
    e:5,
}

Tucao :

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e ;

ou

const f = obj.a + obj.d ;
const g = obj.c + obj.e;

Tucao : "Ne pouvez-vous pas utiliser l'affectation de déstructuration d'ES6 pour obtenir la valeur ? N'est-il pas agréable d'utiliser 5 lignes de code dans 1 ligne de code ? Utilisez simplement le nom de l'objet plus le nom de l'attribut pour obtenir la valeur. Si Ce n'est pas grave si le nom de l'objet est court, mais s'il est très long, le nom de l'objet sera partout dans le code "

Amélioration :

const {a,b,c,d,e} =. obj;
const f = a + d;
const g = c + e;

Le contre-argument

n'est pas que je n'utilise pas l'affectation de déstructuration d'ES6, mais que les noms d'attribut dans l'objet de données renvoyés par le serveur ne sont pas ceux que je veux. Pour obtenir la valeur de cette façon, je dois. recréer une affectation de parcours.

Il

semble que votre compréhension de la déstructuration et de l'affectation d'ES6 ne soit pas suffisamment approfondie. Si le nom de la variable que vous souhaitez créer est incohérent avec le nom de propriété de l'objet, vous pouvez écrire :

const {a:a1} = obj;
console.log(a1); // 1

supplémentaire

ES6 est facile à utiliser. Mais veuillez noter que l'objet déstructuré ne peut pas être undefined ou null . Sinon, une erreur sera signalée, il faudra donc attribuer une valeur par défaut à l'objet déstructuré.

const {a,b,c,d,e} = obj || {};

2. Plaintes concernant la fusion de données

, comme la fusion de deux tableaux et la fusion de deux objets.

const une = [1,2,3];
constb = [1,5,6] ;
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  un:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

s'est plaint de savoir

si l'opérateur d'extension d'ES6 avait été oublié et la fusion de tableaux n'a-t-elle pas pris en compte la déduplication ?

amélioré

a = [1,2,3] ;
constb = [1,5,6] ;
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  un:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. Tucao sur l'épissage des chaînes

const name = 'Xiao Ming';
score constant = 59 ;
soit résultat = '';
si(score > 60){
  result = `${name} a obtenu sa note à l'examen` ; 
}autre{
  result = `${name} a échoué à l'examen` ; 
}

En vous plaignant de

l'utilisation des modèles de chaînes ES6 comme vous le faites, il est préférable de ne pas les utiliser. Vous n'avez aucune idée des opérations qui peuvent être effectuées dans ${} . Dans ${} vous pouvez mettre n'importe quelle expression JavaScript, effectuer des opérations et référencer les propriétés d'un objet.

amélioré

= « Xiao Ming » ;
score constant = 59 ;
const result = `${name}${score > 60 ?''s score au test réussi' :''s test score failed'}`

4. Commentaires sur les conditions de jugement dans if

(
    tapez == 1 ||
    tapez == 2 ||
    tapez == 3 ||
    tapez == 4 ||
){
   //...
}

Vous vous demandez

si la méthode d'instance de tableau includes sera utilisée dans ES6 ?

améliorée

= [1,2,3,4] ;

si( condition.includes(type) ){
   //...
}

5. Plaintes concernant la recherche de liste

Dans le projet, la fonction de recherche de certaines listes non paginées est implémentée par le front-end. La recherche est généralement divisée en recherche précise et recherche floue. La recherche est également appelée filtrage et est généralement mise en œuvre à l'aide filter .

const une = [1,2,3,4,5];
résultat const = a.filter( 
  article =>{
    article retourné === 3
  }
)

vous plaindre

de la recherche exacte, n'utiliserez-vous pas find dans ES6 ? Comprenez-vous l'optimisation des performances ? Si un élément qui remplit les conditions est trouvé dans la méthode find , il ne continuera pas à parcourir le tableau.

amélioré

a = [1,2,3,4,5] ;
résultat const = a.find( 
  article =>{
    article retourné === 3
  }
)

6. Plaintes concernant les tableaux aplatis

Dans les données JSON d'un département, le nom de l'attribut est l'identifiant du département et la valeur de l'attribut est une collection de tableaux d'identifiants de membres de département. Nous devons maintenant extraire tous les identifiants de membres de département dans une collection de tableaux.

const dépôts = {
'Service des achats' :[1,2,3],
« Département du personnel » :[5,8,12],
« Département administratif » :[5,14,79],
« Ministère des Transports » :[3,64,105],
}
laissez membre = [];
pour (laisser l'article en dépôt){
    valeur const = deps[élément];
    si (Array.isArray (valeur)) {
        membre = [...membre,...valeur]
    }
}
member = [...new Set(member)]

Est-il nécessaire de parcourir pour obtenir toutes les valeurs d'attribut d'un objet

?

Object.values oubliées ? Il existe également le processus d'aplatissement impliquant les tableaux. Pourquoi ne pas utiliser la méthode flat fournie par ES6 ? Heureusement, la profondeur du tableau n'atteint cette fois que 2 dimensions. Si vous rencontrez des tableaux avec des profondeurs à 4 ou 5 dimensions, est-ce nécessaire ? Boucler une boucle imbriquée à aplatir ?

Améliorer

les dépôts const = {
    'Service des achats' :[1,2,3],
    « Département du personnel » :[5,8,12],
    « Département administratif » :[5,14,79],
    « Ministère des Transports » :[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

Infinity est utilisé comme paramètre de flat , de sorte qu'il n'est pas nécessaire de connaître les dimensions du tableau aplati.

Complété par le fait que

la méthode flat ne prend pas en charge le navigateur IE.

7. Tucao sur l'obtention de la valeur de l'attribut d'objet

const

name = obj && obj.name;

L'opérateur de chaîne facultatif dans ES6 sera-t-il utilisé ?

Const name = obj?.name

amélioré

8. Commentaires sur l'ajout d'attributs d'objet

Lors de l'ajout d'attributs à un objet, que faut-il faire si le nom de l'attribut change dynamiquement.

soit obj = {} ;
soit l'indice = 1 ;
let key = `sujet${index}`;
obj[key] = 'topic content';

Tucao

pourquoi nous devons créer une variable supplémentaire. Je me demande si les expressions peuvent être utilisées pour les noms de propriétés d'objet dans ES6 ?

Améliorer

let obj = {};
soit l'indice = 1 ;
obj[`topic${index}`] = 'topic content';

9. Jugement quant à savoir si la zone de saisie n'est pas vide

Lors du traitement des affaires liées à la zone de saisie, il est souvent jugé que la zone de saisie n'a pas de valeur d'entrée.

if(value !== null && value !== non défini && value !== ''){
    //...
}

Avez-vous entendu parler du nouvel opérateur de fusion de valeurs nulles dans ES6 ? Avez-vous besoin d'écrire autant de conditions

?

if((valeur ??'') !== ''){
  //...
}

10. Plaintes concernant les fonctions asynchrones

Les fonctions asynchrones sont très courantes et sont souvent implémentées à l'aide de Promise.

const fn1 = () =>{
  renvoyer une nouvelle promesse ((résoudre, rejeter) => {
    setTimeout(() => {
      résoudre (1);
    }, 300);
  });
}
const fn2 = () =>{
  renvoyer une nouvelle promesse ((résoudre, rejeter) => {
    setTimeout(() => {
      résoudre (2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1); // 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

vous appelez

une fonction asynchrone comme celle-ci, vous n'aurez pas peur d'un rappel infernal !

Améliorer

const fn = async () =>{
  const res1 = attendre fn1();
  const res2 = attendre fn2();
  console.log(res1); // 1
  console.log(res2);// 2
}

Supplément

 : lorsque vous effectuez des requêtes simultanées, vous devez toujours utiliser Promise.all() .

const fn = () =>{
   Promesse.all([fn1(),fn2()]).then(res =>{
       console.log(res);//[1,2]
   }) 
}

S'il y a des requêtes simultanées, tant qu'une des fonctions asynchrones est terminée, le résultat sera renvoyé et Promise.race() doit être utilisé.

11.

Vous êtes invités à réfuter les dix points ci-dessus des plaintes du dirigeant. Si votre réfutation est raisonnable, je la réfuterai pour vous lors de la prochaine réunion de révision du code.

De plus, s'il y a des erreurs dans le contenu organisé ci-dessus, n'hésitez pas à les corriger dans les commentaires. Merci beaucoup.

Cet article est reproduit à partir de : https://juejin.cn/post/7016520448204603423

Auteur : Hongchen Lianxin

[Recommandation du didacticiel vidéo connexe : front-end Web]

Ce qui précède est ce que vous avez dit que vous pouvez utiliser ES6, puis utilisez-le rapidement ! Pour plus de détails, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !