Tous les nouveaux conseils et astuces ES2019

ES2019 apporte plusieurs nouvelles fonctionnalités à la norme ECMAScript. Ces fonctionnalités sont officiellement disponibles dans Node.js, Chrome, Firefox et Safari. Pour prendre en charge les navigateurs plus âgés, vous pouvez également utiliser Babel pour compiler ces fonctionnalités en différentes versions de JavaScript.

Voyons quelles nouvelles fonctionnalités sont disponibles!

Méthode Object.fromEntries .

ES2017 introduit la méthode Object.entries , qui convertit les objets en leurs représentations de tableau. Par exemple:

 Laissez les étudiants = {
  Amelia: 20,
  Béatrice: 22,
  Cece: 20,
  Deirdre: 19,
  Eloise: 21
}

Objet.ntries (étudiants) 
// [
// ['Amelia', 20],
// ['beatrice', 22],
// ['cece', 20],
// ['Deirdre', 19],
// ['Eloise', 21]
//]

Ceci est très utile car il permet aux objets d'utiliser un certain nombre de fonctions intégrées dans des prototypes de tableau tels que map , filter , reduce , etc. Cependant, la conversion du résultat à l'objet nécessite un processus relativement fastidieux.

 Laissez les étudiants = {
  Amelia: 20,
  Béatrice: 22,
  Cece: 20,
  Deirdre: 19,
  Eloise: 21
}

// Convertir en un tableau pour utiliser la fonction .Filter () Laissez dépassement ouverte = objet.Entries (étudiants) .filter (([nom, âge]) => {
  âge de retour> = 21
}) // [['Beatrice', 22], ['Eloise', 21]]

// convertit le tableau multidimensionnel à l'objet LETSINGAGEAUDENTS = {}
pour (que [nom, âge] de dépassement {) {
    DrinkingAgestDants [nom] = âge;
}
// {Beatrice: 22, Eloise: 21}

Object.fromEntries est conçue pour éliminer cette boucle! Il fournit un code plus propre pour vous faciliter d'utiliser des méthodes de prototype de tableau sur les objets.

 Laissez les étudiants = {
  Amelia: 20,
  Béatrice: 22,
  Cece: 20,
  Deirdre: 19,
  Eloise: 21
}

// Convertir en un tableau pour utiliser la fonction .Filter () Laissez dépassement ouverte = objet.Entries (étudiants) .filter (([nom, âge]) => {
  âge de retour> = 21
}) // [['Beatrice', 22], ['Eloise', 21]]

// convertit le tableau multidimensionnel à l'objet LET LOINGAGEAGETENDENTS = objet.fromentries (dépassement sur le plan); 
// {Beatrice: 22, Eloise: 21}

Il convient de noter que les tableaux et les objets sont des structures de données différentes, et la conversion entre les deux peut entraîner une perte de données. L'exemple suivant montre comment un élément de tableau devient une clé d'objet en double:

 Laissez les étudiants = [
  ['Amelia', 22], 
  ['Béatrice', 22], 
  ['Eloise', 21], 
  ['Béatrice', 20]
]]

Soit StudentObj = object.fromentries (étudiants); 
// {Amelia: 22, Béatrice: 20, Eloise: 21}
// La première Béatrice a été jetée!

Soyez conscient des effets secondaires potentiels lorsque vous utilisez ces fonctions.

Object.fromEntries

Chrome	Incendier	Safari	Bord
75	67	12.1	Non pris en charge

Méthode Array.prototype.flat

Les tableaux multidimensionnels sont une structure de données très courante, en particulier lors de la récupération des données. La capacité d'aplatir les tableaux multidimensionnels est nécessaire. Bien que cela ait pu être fait auparavant, la méthode n'est pas élégante.

Examinons un exemple où map renvoie un tableau multidimensionnel qui doit être aplati.

 Laissez les cours = [
  {
    Sujet: "mathématiques",
    Numéro de Students: 3,
    WaitlistSudents: 2,
    Étudiants: [«Janet», «Martha», «Bob», [«Phil», «Candace»]]
  },
  {
    Sujet: "Anglais",
    Numéro de Students: 2,
    Étudiants: [«Wilson», «Taylor»]
  },
  {
    Sujet: "Histoire",
    Numéro de students: 4,
    Étudiants: [«Edith», «Jacob», «Peter», «Betty»]
  }
]]

Laissez CoursesTedents = Courses.Map (Course => Course.Sudents)
// [
// ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
// ['Wilson', 'Taylor'],
// ['Edith', 'Jacob', 'Peter', 'Betty']
//]

[] .Concat.Apply ([], Coursestudents) // Nous devons utiliser cette méthode

Array.prototype.flat a vu le jour. Il accepte un paramètre de profondeur facultatif.

 Laissez Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  [«Edith», «Jacob», «Peter», «Betty»]
]]

Laissez FlattenOneLevel = CoursesTudents.flat (1)
Console.log (FlattenOnelevel)
// [
// "Janet",
// 'Martha',
// 'bob',
// ['Phil', 'Candace'],
// «Wilson»,
// 'Taylor',
// 'Edith',
// 'Jacob',
// 'Peter',
// "Betty"
//]

Soit flattentwolevels = Coursestudents.flat (2)
console.log (flattentwolevels)
// [
// «Janet», «Martha»,
// 'Bob', 'Phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// "Betty"
//]

Notez que si aucun paramètre n'est spécifié, la profondeur par défaut est 1. Ceci est très important car dans notre exemple, cela n'aplatit pas complètement le tableau.

 Laissez Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  [«Edith», «Jacob», «Peter», «Betty»]
]]

Laissez defaultflatTened = CoursesTudents.flat ()
console.log (defaultflated)
// [
// "Janet",
// 'Martha',
// 'bob',
// ['Phil', 'Candace'],
// «Wilson»,
// 'Taylor',
// 'Edith',
// 'Jacob',
// 'Peter',
// "Betty"
//]

La raison de cette conception est que la fonction n'est pas gourmand par défaut et nécessite des instructions explicites pour s'exécuter de cette manière. Infinity peut être utilisé comme paramètre pour les cas où la profondeur est inconnue et l'intention est d'aplatir complètement le tableau.

 Laissez Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  [«Edith», «Jacob», «Peter», «Betty»]
]]

Soit toujours Flatned = Coursestudents.flat (Infinity)
Console.log (toujoursflated)
// [
// «Janet», «Martha»,
// 'Bob', 'Phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// "Betty"
//]

Comme toujours, les opérations gourmands doivent être utilisées avec prudence, et si la profondeur du réseau est en effet inconnue, les opérations gourmands peuvent ne pas être un bon choix.

Array.prototype.flat Méthode Support Situation

Chrome	Incendier	Safari	Bord
75	67	12	Non pris en charge

Chrome Android	Firefox Android	Safari iOS	C'est-à-dire mobile	Internet Samsung	Android WebView
75	67	12.1	Non pris en charge	Non pris en charge	67

Méthode Array.prototype.flatMap

Avec l'ajout de la méthode flat , nous obtenons également le tableau de fonction Array.prototype.flatMap . Nous avons en fait vu ce que cela fonctionne dans l'exemple ci-dessus, mais regardons un de plus.

Si nous voulions insérer des éléments dans un tableau, à quoi ressemblerait-il avant l'ES2019 ajouter ces fonctionnalités?

 Soit les notes = [78, 62, 80, 64]

Soit Curved = grade.map (grade => [grade, 7e année])
// [[78, 85], [62, 69], [80, 87], [64, 71]]

Laissez flatmapt = [] .concat.apply ([], incurvé) // désormais plat, plat peut être utilisé mais il n'existait pas avant // [[
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Maintenant que nous avons Array.prototype.flat , nous pouvons améliorer un peu cet exemple.

 Soit les notes = [78, 62, 80, 64]

LET FLATMAPP = GRADES.MAP (Grade => [Grade, 7e année]). Flat ()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Cependant, il s'agit toujours d'un modèle relativement populaire, en particulier dans la programmation fonctionnelle. C'est donc super de le faire intégrer dans un prototype de tableau. En utilisant flatMap , nous pouvons faire ceci:

 Soit les notes = [78, 62, 80, 64]

Laissez FlatMAPP = grades.flatMap (grade => [grade, 7e année]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

N'oubliez pas que le paramètre par défaut pour Array.prototype.flat est 1. flatMap équivaut à combiner map et flat sans paramètres. Par conséquent, flatMap ne s'aplatira qu'une seule couche.

 Soit les notes = [78, 62, 80, 64]

Laissez FlatMapt = grades.flatmap (grade => [grade, [grade 7]]);
// [
// 78, [85],
// 62, [69],
// 80, [87],
// 64, [71]
//]

Array.prototype.flatMap Méthode Support Situation

Chrome	Incendier	Safari	Bord
75	67	12	Non pris en charge

Chrome Android	Firefox Android	Safari iOS	C'est-à-dire mobile	Internet Samsung	Android WebView
75	67	12.1	Non pris en charge	Non pris en charge	67

String.trimStart et String.trimEnd Méthodes

Un autre bel ajout à ES2019 est l'alias, ce qui rend certains noms de fonction de chaîne plus explicites. Auparavant, String.trimRight et String.trimLeft étaient disponibles.

 Laissez Message = "Bienvenue sur CS 101"
message.trimright ()
// Bienvenue sur CS 101 '
message.trimleft ()
// Bienvenue sur CS 101 '
message.trimright (). trimbleft ()
// Bienvenue sur CS 101 '

Ce sont de grandes fonctions, mais il est également utile de leur donner davantage les noms qui conviennent davantage à leur objectif. Supprimez les espaces de début et de fin.

 Laissez Message = "Bienvenue sur CS 101"
message.triMend ()
// Bienvenue sur CS 101 '
message.trimStart ()
// Bienvenue sur CS 101 '
message.triMend (). trimStart ()
// Bienvenue sur CS 101 '

String.trimStart et String.trimEnd Méthodes Support Situation

Chrome	Incendier	Safari	Bord
75	67	12	Non pris en charge

catch facultatif reliant

Une autre fonctionnalité agréable de l'ES2019 consiste à rendre les paramètres dans try-catch en option. Auparavant, tous les blocs catch ont passé des exceptions en tant que paramètres. Cela signifie que même si le code du bloc catch l'ignore, il existe toujours.

 essayer {
  LET PARSED = JSON.Parse (OBJ)
} catch (e) {
  // ignorer E, ou utiliser Console.log (OBJ)
}

Ce n'est plus le cas. Si aucune exception n'est utilisée dans catch , rien n'est nécessaire du tout.

 essayer {
  LET PARSED = JSON.Parse (OBJ)
} attraper {
  Console.log (OBJ)
}

C'est une bonne option si vous savez déjà quelle est l'erreur et que vous recherchez les données qui les déclenchent.

Prise en charge de la liaison de catch facultative

Chrome	Incendier	Safari	Bord
75	67	12	Non pris en charge

Modifications de la méthode Function.toString()

ES2019 a également changé la façon dont Function.toString() s'exécute. Auparavant, il a complètement supprimé les espaces.

 Fonction Greeting () {
  const name = 'CSS Tricks'
  console.log (`Bonjour à partir de $ {nom}`)
}

salutation.tostring ()
// 'Fonction Greeting () {\ nconst name = \' css tricks \ '\ nconsole.log (`Bonjour de $ {name} //`) \ n}'

Maintenant, il reflète la véritable représentation de la fonction dans le code source.

 Fonction Greeting () {
  const name = 'CSS Tricks'
  console.log (`Bonjour à partir de $ {nom}`)
}

salutation.tostring ()
// 'Fonction salutation () {\ n'  
// "const name = 'CSS Tricks' \ n"  
// 'console.log (`bonjour de $ {name}`) \ n'  
// '}'

Il s'agit principalement d'un changement interne, mais je ne peux pas m'empêcher de penser que cela peut faciliter la vie d'un blogueur ou deux à l'avenir.

Prise en charge de la méthode Function.toString()

Chrome	Incendier	Safari	Bord
75	60	12 - Support partiel	17 - Support partiel

Ceci est la nouvelle fonctionnalité d'ES2019!

Vous pouvez également explorer d'autres nouvelles fonctionnalités, notamment:

• Description du symbole
• Tri de la stabilité
• Ecmascript en tant que superset de JSON
• JSON.stringify

Ayez une programmation JavaScript heureuse!

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!