Conseils abrégés que les développeurs JavaScript doivent connaître (avancé)

Cet article vous apporte les compétences en abréviation que les développeurs JavaScript doivent connaître (avancées). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Affectation de variable

Lors de l'attribution de la valeur d'une variable à une autre variable, vous devez d'abord vous assurer que la valeur d'origine n'est pas nulle, indéfinie ou vide.

peut être obtenu en écrivant une déclaration de jugement contenant plusieurs conditions :

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

ou abrégée sous la forme suivante :

const variable2 = variable1  || 'new';

Le code suivant peut être Coller dans es6console et testez-le vous-même :

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

2. Affectation de la valeur par défaut

Si le paramètre attendu est nul ou indéfini, il n'est pas nécessaire d'écrire six lignes de code pour attribuer une valeur par défaut. valeur. Nous pouvons accomplir la même opération en une seule ligne de code en utilisant simplement un court opérateur logique.

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

est abrégé en :

const dbHost = process.env.DB_HOST || 'localhost';

3. Attributs des objets

ES6 fournit un moyen très simple d'attribuer des attributs aux objets. Si le nom de la propriété est identique au nom de la clé, l'abréviation peut être utilisée.

const obj = { x:x, y:y };

est abrégé en :

const obj = { x, y };

4. Fonction flèche

Les fonctions classiques sont faciles à lire et à écrire, mais si elles sont imbriquées dans d'autres fonctions, ils sont appelés , la fonction entière devient un peu verbeuse et déroutante. À ce stade, vous pouvez utiliser les fonctions fléchées pour abréger :

function sayHello(name) {
  console.log('Hello', name);
}
 
setTimeout(function() {
  console.log('Loaded')
}, 2000);
 
list.forEach(function(item) {
  console.log(item);
});

abrégé en :

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

5. Valeur de retour implicite

La valeur de retour est ce que nous généralement utilisé pour renvoyer le mot-clé pour le résultat final de la fonction. Une fonction fléchée avec une seule instruction peut renvoyer un résultat implicitement (la fonction doit omettre les parenthèses ({ }) afin d'omettre le mot-clé return).

Pour renvoyer une instruction multiligne (telle qu'un texte d'objet), vous devez utiliser () au lieu de { } pour envelopper le corps de la fonction. Cela garantit que le code est évalué comme une seule instruction.

function calcCircumference(diameter) {
  return Math.PI * diameter
}

est abrégé en :

calcCircumference = diameter => (
  Math.PI * diameter;
)

6. Valeurs des paramètres par défaut

Vous pouvez utiliser les instructions if pour définir les valeurs par défaut des paramètres de fonction . ES6 prévoit que les valeurs par défaut peuvent être définies dans les déclarations de fonctions.

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

est abrégé en :

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

7. Chaîne de modèle

Dans le passé, nous avions l'habitude d'utiliser "+" pour convertir plusieurs variables en chaînes , mais existe-t-il un moyen plus simple ?

ES6 fournit les méthodes correspondantes, nous pouvons utiliser des backticks et $ { } pour combiner des variables dans une chaîne.

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

est abrégé en :

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

8. Affectation de déstructuration

L'affectation de déstructuration est une expression utilisée pour extraire rapidement les valeurs d'attribut d'un tableau ou d'un objet , et affecté à la variable définie.

En termes d'abréviation de code, l'affectation de déstructuration peut donner de bons résultats.

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;

est abrégé en :

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

Vous pouvez même spécifier votre propre nom de variable :

const { store, form, loading, errors, entity:contact } = this.props;

9. Opérateur d'expansion

Les opérateurs d'expansion ont été introduits dans ES6, et l'utilisation de l'opérateur spread peut rendre le code JavaScript plus efficace et intéressant.

Certaines fonctions de tableau peuvent être remplacées à l'aide de l'opérateur spread. L'abréviation de

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

est :

// 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];

La différence avec la fonction concat() est que l'utilisateur peut utiliser l'opérateur spread pour insérer un autre tableau dans n'importe quel tableau.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Vous pouvez également utiliser l'opérateur spread avec les symboles de déstructuration ES6 :

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 }

10 Paramètres obligatoires

Par défaut, si vous ne fournissez pas de paramètres de fonction. S'il est transmis par valeur, JavaScript définira le paramètre de fonction sur non défini. D'autres langues émettront des avertissements ou des erreurs. Pour effectuer l'affectation de paramètres, vous pouvez utiliser une instruction if pour générer une erreur non définie, ou vous pouvez profiter des "paramètres forcés".

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

est abrégé en :

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

11. Array.find

Si vous avez déjà écrit la fonction de recherche en JavaScript ordinaire, vous avez peut-être utilisé pour cycle. Dans ES6, une nouvelle fonction de tableau appelée find() a été introduite, qui est un raccourci pour implémenter une boucle for.

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === &#39;Dog&#39; && pets[i].name === name) {
      return pets[i];
    }
  }
}

est abrégé en :

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

12 Objet [clé]

Bien qu'il soit courant d'écrire foo.bar comme foo ['bar'] pratique, mais cette pratique constitue la base de l’écriture de code réutilisable.

Considérons l'exemple simplifié suivant d'une fonction de vérification :

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

La fonction ci-dessus complète parfaitement le travail de vérification. Mais lorsqu’il existe de nombreux formulaires, une validation doit être appliquée, et il y aura différents champs et règles. Ce serait un bon choix si vous pouviez créer une fonction de validation générique pouvant être configurée au moment de l'exécution.

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

Maintenant que nous avons cette fonction de validation, nous pouvons la réutiliser dans tous les formulaires sans avoir à écrire une fonction de validation personnalisée pour chaque formulaire.

13. Opérateurs double-bit

Les opérateurs au niveau du bit sont les points de connaissances de base dans les didacticiels JavaScript pour débutants, mais nous n'utilisons pas souvent les opérateurs au niveau du bit. Parce que personne ne veut travailler avec des 1 et des 0 sans s'occuper du binaire.

Mais l'opérateur à double panneton a un cas très pratique. Vous pouvez utiliser des opérateurs double-bits au lieu de Math.floor( ). L’avantage de l’opérateur de positionnement double négatif est qu’il effectue la même opération plus rapidement.

Math.floor(4.9) === 4  //true

est abrégé en :

~~4.9 === 4  //true

Ce qui précède est une introduction complète aux techniques d'abréviation que les développeurs JavaScript doivent connaître (avancés), si vous souhaitez en savoir plus sur Tutoriel vidéo JavaScript , veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!