Quelles sont les précautions d’utilisation de ES6 ?

Cette fois, je vais vous apporter quelques précautions lors de l'utilisation de ES6. Ce qui suit est un cas pratique, jetons-y un œil.

ES6 existe depuis plusieurs années et de nombreuses nouvelles fonctionnalités peuvent être intelligemment utilisées dans les projets. Je souhaite en énumérer quelques-uns dans l’espoir qu’ils vous seront utiles.

Si vous connaissez d'autres conseils, veuillez laisser un message. Je suis heureux de les ajouter.

1. Paramètres obligatoires

ES6 fournit un mécanisme de valeur de paramètre par défaut, vous permettant de définir des valeurs par défaut pour les paramètres afin d'empêcher les fonctions de étant appelé. Ces paramètres n’ont pas été transmis.

Dans l'exemple ci-dessous, nous écrivons une fonction requirejse() comme valeur par défaut pour les paramètres a et b. Cela signifie que si l'un des paramètres de a ou b ne reçoit pas de valeur lors de son appel, la fonction requirejse () sera définie par défaut et une erreur sera générée.

const required = () => {throw new Error('Missing parameter')};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

2. Réduction puissante

La méthode de réduction du tableau est très polyvalente. Il est généralement utilisé pour réduire chaque élément d’un tableau à une seule valeur. Mais vous pouvez faire plus avec.

2.1 Utilisez réduire pour implémenter la carte et le filtre en même temps

Supposons qu'il y ait maintenant une séquence et que vous souhaitiez mettre à jour chaque élément de celle-ci (fonction map) puis filtrer une partie (fonction de filtre). Si vous utilisez d'abord map puis filtrez, vous devez parcourir le tableau deux fois.

Dans le code ci-dessous, nous doublons les valeurs du tableau puis sélectionnons les nombres supérieurs à 50. Remarquez comment nous utilisons réduire très efficacement pour compléter à la fois les méthodes de mappage et de filtrage ?

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
 num = num * 2; 
 if (num > 50) {
  finalList.push(num);
 }
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Utilisez réduire pour remplacer la carte et le filtre

Si vous lisez attentivement le code ci-dessus, vous devriez pouvoir comprendre que réduire peut remplacer la carte et le filtre .

2.3 Utiliser réduire pour faire correspondre les parenthèses

Une autre utilisation de réduire consiste à faire correspondre les parenthèses dans une chaîne donnée. Pour une chaîne contenant des parenthèses, il faut savoir si le nombre de (et) est cohérent, et si (apparaît avant).

Dans le code suivant, nous utilisons réduire pour résoudre facilement ce problème. Il suffit de déclarer d’abord une variable compteur, dont la valeur initiale est 0. Le compteur augmente de un lors de la rencontre (, le compteur diminue de un lors de la rencontre). Si le nombre de parenthèses gauche et droite correspond, le résultat final est 0.

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === &#39;(&#39;) {
   return ++counter;
  } else if(char === &#39;)&#39;) {
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter
}
isParensBalanced(&#39;(())&#39;) // 0 <-- balanced
isParensBalanced(&#39;(asdfds)&#39;) //0 <-- balanced
isParensBalanced(&#39;(()&#39;) // 1 <-- not balanced
isParensBalanced(&#39;)(&#39;) // -1 <-- not balanced

2.4 Compter le nombre d'éléments identiques dans un tableau

Souvent, vous souhaitez compter le nombre d'éléments récurrents dans un tableau puis les représenter avec un objet. Ensuite, vous pouvez utiliser la méthode de réduction pour traiter ce tableau.

Le code suivant comptera le numéro de chaque type de voiture puis représentera le nombre total avec un objet.

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

Il existe tellement d'autres utilisations de réduire que je vous recommande de lire les exemples de code pertinents de MDN.

3. Déconstruction d'objets

3.1 Supprimer les attributs inutiles

Parfois, vous ne le faites pas souhaitez conserver certaines propriétés d'objets, peut-être parce qu'ils contiennent des informations sensibles ou sont tout simplement trop volumineux. Vous pourrez peut-être énumérer l'intégralité de l'objet et les supprimer, mais en réalité, vous attribuez simplement les propriétés inutiles aux variables, puis transmettez les parties utiles que vous souhaitez conserver comme paramètres restants.

Dans le code ci-dessous, nous souhaitons supprimer les paramètres _internal et tooBig. Nous pouvons les attribuer aux variables internal et tooBig, puis stocker les propriétés restantes dans cleanObject pour une utilisation ultérieure.

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Déconstruire les objets imbriqués dans les paramètres de la fonction

Dans le code suivant, engine est un objet imbriqué dans l'objet car. Si nous sommes intéressés par l'attribut vin du moteur, nous pouvons facilement l'obtenir en utilisant une affectation de déstructuration.

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 Fusion d'objets

ES6 amène l'opérateur de propagation (...). Il est généralement utilisé pour déstructurer des tableaux, mais vous pouvez également l'utiliser avec des objets.

Ensuite, nous utilisons l'opérateur spread pour développer un nouvel objet, et les valeurs de propriété du deuxième objet écraseront les valeurs de propriété du premier objet. Par exemple, b et c de l'objet2 écraseront les attributs du même nom de l'objet1.

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4. Sets

4.1 Utilisez Set pour implémenter la déduplication de tableau

dans Dans ES6, étant donné que Set stocke uniquement des valeurs uniques, vous pouvez utiliser Set pour supprimer les doublons.

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 Utilisation des méthodes de tableau sur Set

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作，获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
  fetch('/post'),
  fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ajax怎样动态增加表格的tr与td

微信小程序内轮播图怎样设置成自适应高度

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!