Voici les nouvelles méthodes et fonctions intégrées dans JavaScript

Au cours des dernières années, JavaScript est sorti avec de nombreuses nouvelles versions. Ils ont apporté de nouvelles fonctionnalités notamment dans la syntaxe et son cœur. Ces mises à jour ont rendu JavaScript plus lisible et plus intelligent. Je vais nous présenter les nouvelles méthodes pour les tableaux, les objets et les chaînes. Ces nouvelles méthodes peuvent gérer les données de manière élégante et efficace en écrivant moins de code. C'est ce que nous allons expliquer dans cet article.

Les nouvelles méthodes d'objets

L'objet est ce qui fait de JavaScript un langage de programmation puissant. Les objets vous permettent de regrouper différents types de données. Si vous voulez apprendre un nouveau framework JavaScript comme React, Vue ou Angular, vous devez savoir comment utiliser Objects et ses méthodes. Ces frameworks utilisent des objets pour obtenir et gérer les entrées utilisateur. Les nouvelles versions de JavaScript apportent de nouvelles méthodes aux objets qui les rendent plus amusants. Voici les nouvelles méthodes Object:

object.assign ()

La méthode Object.assign () a plusieurs tâches. Il peut copier un objet, cloner à partir d'un autre objet ou concaténer deux objets ou plus.

  • copiez les valeurs d'un autre objet:
  • Cloner un objet vers un nouvel objet
  • En outre, vous pouvez fusionner les propriétés en double avec Object.assign () en définissant deux crochets vides comme premier argument:

Object.entries ()

Object.entries () renvoie les clés et les valeurs de l'objet sous forme de tableau.

Object.getOwnPropertyDescriptors ()

Object.getOwnPropertyDescriptors nous permet d'obtenir le descripteur de propriétés d'un objet.

Il est vraiment utile de vérifier la propriété du descripteur d'objet, par exemple, voir s'il est inscriptible ou énumérable.

Les nouvelles méthodes Array

Les nouvelles versions de JavaScript ont fourni de nouvelles méthodes pour les tableaux. Voici les nouvelles méthodes de tableau:

Array.includes ()

Array.includes () nous permet de vérifier si une propriété existe dans un tableau. Vous pouvez voir la différence entre l'ancien code et la nouvelle syntaxe (ES6). La nouvelle méthode est courte et plus lisible.

Array.find ()

Array.find () nous aide à trouver un élément dans un Array. Il prend une fonction de rappel comme argument. La fonction de rappel fournit plus d'options pour rechercher et extraire des données complexes.

Si la propriété recherchée existe, elle renvoie la valeur trouvée. Sinon, il renvoie undefined.

Array.findIndex ()

Array.findIndex () renvoie l'index de l'élément trouvé au lieu de la valeur.

Array.values ​​()

Cette nouvelle méthode retourne un itérateur Array des valeurs afin que nous puissions exécuter une boucle for pour extraire chaque valeur du Array.

Array.entries ()

Array.entries () renvoie à la fois la clé et la valeur au format Array.

Tableau. De ()

Array.from () a été introduit dans la version ES6. Il peut faire plusieurs choses en exécutant une fonction map () sur les données. Il peut convertir une chaîne en tableau ou même créer un nouveau tableau à partir des données.

Array.keys ()

Comme son nom l'indique, cette méthode retourne les clés du tableau.

Les nouvelles méthodes String

Les nouvelles versions de JavaScript ont fourni de nouvelles méthodes String. Voici les nouvelles méthodes String:

String.repeat ()

La méthode String.repeat () vous permet de répéter une chaîne.

String.includes ()

String.includes () fonctionne comme Array.includes (). Il renvoie un booléen si la valeur saisie existe.

Les nouvelles méthodes numériques

Les nouvelles versions de JavaScript ont fourni de nouvelles méthodes numériques. Voici les nouvelles méthodes numériques:

Numéro.isNaN ()

Cette méthode a été publiée dans la mise à jour ES6. Il vérifie la valeur Number transmise et renvoie true si la valeur est NaN. Sinon, il renvoie false. Cette méthode est inspirée de la fonction classique isNAN () en JavaScript.

Number.isInteger ()

Comme la méthode précédente, Number.isInteger () vérifie si la valeur passée est un entier ou non. Il renverra vrai si la valeur est un entier et faux si ce n'est pas le cas.

Number.isSafeInteger ()

Vous voudrez peut-être toujours valider l'entrée des utilisateurs pour vous assurer qu'il s'agit d'un nombre. Number.isSafeInteger () vérifie si le nombre est un nombre sûr.

En savoir plus ici

Number.isFinite ()

Number.isFinite () vérifie si la valeur transmise est un nombre fini ou non.

Prise en charge du navigateur

Les nouvelles méthodes Number sont presque prises en charge par les principaux navigateurs, à l'exception d'Opera Mini et d'IE-11. Le support est montré dans l'image ci-dessous:

Nouveaux objets spécifiques

JavaScript est livré avec de nouvelles fonctions spécifiques qui nous permettent d'écrire du code plus performant. Voici les nouvelles méthodes d'objets spécifiques:

Objet Proxy ()

Proxy est l'un des grands ajouts à JavaScript. Cela crée un comportement personnalisé pour notre code. Avec Proxy, vous pouvez gérer:

  • validation des données utilisateur
  • correction des données
  • recherche de propriété
  • affectation
  • énumération
  • appel de fonction

Vérifiez les autres utilisations de Proxy et ses méthodes ici.

Pour comprendre le proxy, nous allons écrire deux exemples.

Exemple 1:

Dans cet exemple, nous validons les données tout en les obtenant d'un utilisateur. Nous allons essayer de définir le comportement d'une erreur indéfinie.

Comme vous le voyez dans l'exemple ci-dessus, userInfo.favCar renvoie undefined. Et si nous voulons gérer ce message d'erreur? Si nous voulons créer un comportement personnalisé pour l'erreur, par exemple, afficher un autre message au lieu de non défini, nous pouvons utiliser Proxy dans ce cas.

Nous avons défini un nouveau proxy et lui avons donné deux arguments - l'objet et le gestionnaire. Le gestionnaire exécute du code de validation et vérifie si la propriété existe dans l'objet. Il renvoie la propriété si elle existe. Sinon, il renvoie le message que nous avons défini et cela s'appelle la recherche de propriété.

Exemple 2:

Dans cet exemple, nous allons créer une validation pour une valeur spécifique dans l'objet à l'aide de la méthode set .

Dans cet exemple, nous pouvons valider le type de données et renvoyer un nouveau TypeError (). Cela rend le débogage beaucoup plus facile. Vous pouvez en comprendre plus avec cet article utile.

Prise en charge du navigateur

Le proxy fonctionne assez bien pour tous les principaux navigateurs, comme vous le voyez ci-dessous:

Objet Set ()

L'objet Set est une nouvelle fonctionnalité de JavaScript. Cela nous permet de stocker des valeurs uniques. Il a un tas de méthodes que vous pouvez jouer. La méthode Object.add vous permet d'ajouter une nouvelle propriété à l'objet. Object.delete supprime une propriété de l'objet. Object.clear efface toutes les propriétés de l'objet. L'exemple ci-dessous explique les méthodes objet.

En savoir plus sur l'objet Set () ici.

Emballer

Nous venons de couvrir les nouvelles méthodes intégrées introduites par JavaScript. Avec ces nouvelles fonctionnalités géniales, je n'utilise plus l'ancienne syntaxe et méthodes dans mon code. Les nouvelles méthodes vous permettent d'écrire du code JavaScript compétent et performant de manière élégante.

Vous pouvez également consulter mes articles sur la nouvelle syntaxe ES6 pour actualiser vos compétences en JavaScript.

Vous pouvez me trouver sur Twitter et Instagram

Articles précédents:

  • JavaScript ES6 - Écrivez moins, faites plus
  • Apprenez Bootstrap 4 en 30 min en créant un site Web
  • Angular 6 et ses nouvelles fonctionnalités, toutes expliquées en trois minutes
  • Comment utiliser le routage dans Vue.js pour créer une meilleure expérience utilisateur
  • Voici les moyens les plus courants de faire une requête HTTP en JavaScript
  • Découvrez comment créer votre première application Angular en 20 minutes