9 conseils d'utilisation très importants (avec code)

Cette fois je vous apporte 9 compétences d'utilisation très importantes (avec code). Quelles sont les précautions pour utiliser JS Voici des cas pratiques, jetons un oeil.

1. Supprimez les éléments de queue du tableau

Un moyen simple d'effacer ou de supprimer les éléments de queue du tableau consiste à modifier le longueur de la valeur de l'attribut du tableau.

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Utilisez la déstructuration d'objets pour simuler des paramètres nommés

Si vous devez transmettre une série d'options facultatives dans une fonction en tant que paramètres, alors vous pourriez être enclin à utiliser Un objet (Object) est créé pour définir la configuration (Config).

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

Il s'agit d'une méthode ancienne mais très efficace qui simule des paramètres nommés en JavaScript. Cependant, la façon de gérer la configuration dans doSomething est un peu lourde. Dans ES2015, vous pouvez utiliser directement la déstructuration d'objets.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

Si vous souhaitez rendre ce paramètre facultatif, c'est aussi simple.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. Utiliser la déstructuration d'objets pour traiter les tableaux

Vous pouvez utiliser la syntaxe de déstructuration d'objets pour obtenir les éléments du tableau :

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Utilisez des valeurs de plage dans les instructions switch

Vous pouvez utiliser les techniques suivantes pour écrire des instructions switch qui satisfont aux valeurs de plage :

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = &#39;Solid&#39;;
   break;
  case (tempInCelsius > 0 && tempInCelsius < 100): 
   state = &#39;Liquid&#39;;
   break;
  default: 
   state = &#39;Gas&#39;;
 }
 return state;
}

5. wait Plusieurs fonctions asynchrones

Lorsque vous utilisez async/await, vous pouvez utiliser Promise.all pour attendre plusieurs fonctions asynchrones.

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Créer un objet pur

Vous pouvez créer un objet 100% pur, qui n'hérite d'aucune propriété ou règle des méthodes objet (par exemple , constructeur, toString(), etc.).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. Formater le code JSON

JSON.stringify peut non seulement caractériser un objet, mais également formater et générer des objets JSON.

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. Supprimer les éléments en double d'un tableau

Dans ES2015, il existe une syntaxe définie. En utilisant la syntaxe définie et l'opération Spread, les éléments en double peuvent être facilement supprimés :

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. Mosaïque de tableaux multidimensionnels

À l'aide de l'opération Spread, vous can Il est facile d'aplatir des tableaux multidimensionnels imbriqués :

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Malheureusement, la méthode ci-dessus ne fonctionne que pour les tableaux bidimensionnels. Cependant, avec la récursivité, nous pouvons aplatir des tableaux imbriqués de dimensions arbitraires.

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Ça y est ! J'espère que ces conseils pourront vous aider à écrire du code JS plus beau ! Si cela ne suffit pas, autant utiliser Fundebug comme assistant !

Commentaires en vedette

Ethan B Martin : L'écriture de ce commutateur est très intelligente, mais je ne le recommande pas. Veuillez ne pas encourager les développeurs à écrire du code JS de cette manière. Une fois, un ingénieur a écrit ceci, ce qui a ensuite causé beaucoup de problèmes de lecture lors de la révision du code. Heureusement, nous l'avons refactorisé avec le temps pour en faire un code plus lisible. Comparons la différence entre utiliser switch et if :

function getWaterState1(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}
function getWaterState2(tempInCelsius) {
 if (tempInCelsius <= 0) {
  return 'Solid';
 }
 if (tempInCelsius < 100) {
  return 'Liquid';
 }
 return 'Gas';
}

La deuxième façon d'écrire présente plusieurs avantages :
A) La quantité de code est plus petite et plus lisible B) Vous n'en avez pas besoin ; pour déclarer une variable locale, les lecteurs n'auront pas toujours à suivre comment vous avez modifié cette variable ; C) switch(true) est vraiment déroutant.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de l'utilisation inter-domaines du serveur de nœud d'opération d'environnement local

Comment obtenir toutes les données dans l'arborescence des documents DOM

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!