Application de l'es6 dans des projets pratiques

Un.、À propos de la prise de valeur

Les valeurs sont très courantes dans les programmes,Comme de l'objetobjValeur moyenne.

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}
Copier le Code
Copier le Code

Crache.：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
Copier le Code
Copier le Code

Ou

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

Crache.：“Ça ne marchera pasES6Est - ce que l'affectation de déconstruction pour？5Pour le Code de ligne1Ça ne sent pas bon?？Utilisez directement le nom de l'objet plus le nom de l'attribut pour prendre la valeur,Si le nom de l'objet est court, ça ira.,C'est long.？J'ai trouvé ce nom d'objet partout dans le Code.”

Amélioration：

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;
Copier le Code
Copier le Code

Réfutation

Non, pas du tout.ES6Affectation de déconstruction pour,Mais le nom de l'attribut dans l'objet de données retourné par le serveur n'est pas ce que je voulais,C'est la valeur.,Il n'est pas encore nécessaire de recréer les assignations de traversée.

Crache.

On dirait que tu as raison.ES6L'affectation de déconstruction n'est pas assez complète.Si le nom de la variable que vous souhaitez créer ne correspond pas au nom de la propriété de l'objet,C'est possible.：

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

Supplément

ES6Bien qu'il soit facile d'utiliser.Mais Notez que l'objet déconstructé ne peut pas êtreundefined、null.Sinon, une erreur sera signalée,Donc, pour donner une valeur par défaut à l'objet déconstructé.

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

2.、À propos de la fusion des données

Comme fusionner deux tableaux,Fusionner deux objets.

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

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

Crache.

ES6L'opérateur d'extension a - t - il oublié,Y a - t - il d'autres fusions de tableaux qui ne tiennent pas compte de l'élimination des doubles？

Amélioration

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

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}
Copier le Code
Copier le Code

Trois、À propos de l'épissage des chaînes

const name = 'Xiao Ming';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}Réussir l'examen`; 
}else{
  result = `${name}A échoué à l'examen`; 
}
Copier le Code
Copier le Code

Crache.

Comme vous.ES6Modèle de chaîne,Pourquoi pas?,Vous n'êtes pas au courant.${}Ce que vous pouvez faire.In${}Peut être placé dans n'importe quelJavaScriptExpression,Peut effectuer des calculs,Et les propriétés de l'objet de référence.

Amélioration

const name = 'Xiao Ming';
const score = 59;
const result = `${name}${score > 60?'Réussir l'examen':'A échoué à l'examen'}`;
Copier le Code
Copier le Code

Quatre、À propos deifLes conditions de jugement

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}
Copier le Code
Copier le Code

Crache.

ES6Méthode d'instance du tableau moyenincludesTu vas l'utiliser?？

Amélioration

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}
Copier le Code
Copier le Code

Cinq、À propos de la recherche de listes

Dans le projet,Certaines fonctions de recherche de listes non pagées sont réalisées par frontend,La recherche est généralement divisée en recherche précise et recherche floue.La recherche s'appelle aussi filtrage,Usage généralfilterPour réaliser.

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)
Copier le Code
Copier le Code

Crache.

Ça ne marcherait pas si c'était une recherche préciseES6DansfindC'est ça?？Optimisation des performances, d'accord?,findÉléments admissibles trouvés dans la méthode,Ne pas continuer à traverser le tableau.

Amélioration

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)
Copier le Code
Copier le Code

Six、À propos de l'aplatissement d'un tableau

Un départementJSONDans les données,Le nom de la propriété est le Ministèreid,La valeur de l'attribut est un membre du MinistèreidCollection de tableaux,Maintenant, il faut que les membres du DépartementidTous extraits dans une collection de tableaux.

const deps = {
'Département 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 = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]
Copier le Code
Copier le Code

Crache.

.Voulez - vous traverser pour obtenir toutes les valeurs de propriété de l'objet？Object.valuesTu as oublié?？Et l'aplatissement des tableaux,Pourquoi ne pasES6FourniflatEt la méthode?,Heureusement, cette fois, la profondeur du tableau n'est que2Vi,Et rencontrer4Vi、5Tableau des profondeurs de dimension,Faut - il boucler les boucles imbriquées pour aplatir？

Amélioration

const deps = {
    'Département 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);
Copier le Code
Copier le Code

Dont utilisationInfinityEn tant queflatParamètres pour,De sorte qu'il n'est pas nécessaire de connaître les dimensions du tableau aplati.

Supplément

flatLa méthode ne supporte pasIENavigateur.

Sept、À propos de l'obtention des valeurs des attributs de l'objet

const name = obj && obj.name;
Copier le Code
Copier le Code

Crache.

ES6L'opérateur de chaîne optionnel sera - t - il utilisé dans？

Amélioration

const name = obj?.name;
Copier le Code
Copier le Code

Huit、À propos de l'ajout de fentes pour les propriétés de l'objet

Lorsque vous ajoutez des propriétés à un objet,Si le nom de l'attribut change dynamiquement,Que faire?.

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = 'Contenu du sujet';
Copier le Code
Copier le Code

Crache.

Pourquoi créer une variable supplémentaire.Je ne sais pas.ES6Est - ce que le nom de propriété de l'objet dans peut utiliser une expression？

Amélioration

let obj = {};
let index = 1;
obj[`topic${index}`] = 'Contenu du sujet';
Copier le Code
Copier le Code

Neuf、Jugement sur le fait que la case d'entrée n'est pas vide

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

if(value !== null && value !== undefined && value !== ''){
    //...
}
Copier le Code
Copier le Code

Crache.

ES6Vous connaissez le nouvel opérateur de fusion de valeurs nulles dans,Tu veux écrire autant de conditions?？

if((value??'') !== ''){
  //...
}
Copier le Code
Copier le Code

Dix、À propos de la fonction asynchrone

Les fonctions asynchrones sont courantes,Souvent utilisé Promise Pour réaliser.

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}
Copier le Code
Copier le Code

Crache.

Si vous appelez une fonction asynchrone comme ça,N'ayez pas peur de former un rappel infernal！

Amélioration

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

Supplément

Mais pour faire une demande concurrente,Il faut l'utiliser.Promise.all().

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

Si une demande simultanée,Tant que l'une des fonctions asynchrones est traitée,Renvoie les résultats,Pour utiliserPromise.race().

Auteur：Coeur de raffinage de la poussière rouge
Liens：juejin.cn/post/701652… Source:：Excavation des terres rares
Le droit d'auteur appartient à l'auteur..Reproduction commerciale veuillez contacter l'auteur pour obtenir l'autorisation,Reproduction non commerciale Veuillez indiquer la source.