Array et méthodes d'objets utiles en JavaScript

L'auteur de l'article, dont nous publions aujourd'hui une traduction, explique que l'un des numéros du podcast Syntax FM , qui donnait un aperçu des méthodes utiles des objets et des tableaux en JavaScript, lui a donné l'idée. Ces méthodes aident les développeurs à écrire du code propre et lisible. Leur utilisation réduit le besoin de bibliothèques tierces comme Lodash .

Array.prototype.filter ()

La méthode Array.prototype.filter () crée un nouveau tableau dans lequel ne tombent que les éléments du tableau d'origine qui correspondent à la condition spécifiée.

▍ Exemple

Sur la base d'un tableau contenant des informations sur les étudiants, nous allons créer un nouveau tableau dans lequel les enregistrements ne seront inclus que sur les étudiants dont l'âge leur permet d'acheter de l'alcool.

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); //  ableToDrink    : [19, 21] 

Array.prototype.map ()

La méthode Array.prototype.map () vous permet de créer un nouveau tableau basé sur les valeurs traitées d'une manière ou d'une autre d'un autre tableau. Cette méthode est idéale pour modifier des données; du fait qu'elle n'apporte pas de modifications au tableau d'origine, elle est souvent utilisée dans React.

▍ Exemple

En fonction du tableau numérique, créez un nouveau tableau, au début de chaque élément dont le signe $ sera placé.

 const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); //      dollars: ['$2', '$3', '$4', '$5'] 

Array.prototype.reduce ()

La méthode Array.prototype.reduce () est souvent négligée à tort . Il vous permet de réduire le tableau à une seule valeur qui s'accumule dans l'élément récepteur. La valeur renvoyée par cette méthode peut être de n'importe quel type. Par exemple, il peut s'agir d'un objet, d'un tableau, d'une chaîne ou d'un nombre.

▍ Exemple

Nous utiliserons la méthode .reduce() afin d'obtenir la somme des éléments d'un tableau numérique.

 const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); //   total    30 

En fait, cette méthode peut être utilisée de nombreuses façons intéressantes. Des exemples pertinents peuvent être trouvés dans la documentation MDN . En particulier, nous parlons de développer des tableaux de tableaux, de regrouper des objets par propriétés et de supprimer les éléments en double des tableaux.

Array.prototype.forEach ()

La méthode Array.prototype.forEach () applique la fonction qui lui est transmise à chaque élément du tableau.

▍ Exemple

Voici comment sortir chaque élément du tableau vers la console à l'aide de la méthode .forEach() .

 const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); //   : // 'happy' // 'sad' // 'angry' 

Array.prototype.some ()

La méthode Array.prototype.some () vérifie si au moins un élément du tableau correspond à la condition spécifiée par la fonction qui lui est transmise. Cette méthode, par exemple, est capable de bien se montrer dans la résolution de la tâche de vérification des privilèges des utilisateurs. Il peut être considéré comme un analogue du .forEach() précédemment considéré, à la différence que, lorsqu'il est utilisé à l'aide de la fonction qui lui est transmise, il est possible d'effectuer certaines actions sur les éléments du tableau jusqu'à ce que cette fonction renvoie la vraie valeur, puis interrompez le traitement.

▍ Exemple

Vérifiez si le tableau contient au moins une chaîne d' admin .

 const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); //  containsAdmin   true 

Array.prototype.every ()

La méthode Array.prototype.every () est similaire à la méthode .some() décrite ci-dessus, mais elle ne renvoie la valeur true que si tous les éléments du tableau remplissent la condition spécifiée par la fonction passée à cette méthode.

▍ Exemple

Vérifiez si toutes les estimations stockées dans le tableau sont égales ou supérieures à 3.

 const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); //goodOverallRating   true 

Array.prototype.includes ()

La méthode Array.prototype.includes () vous permet de savoir si un tableau contient une valeur donnée. Elle est similaire à la méthode .some() , mais elle ne vérifie pas si les éléments du tableau correspondent à une certaine condition, mais plutôt si le tableau contient la valeur spécifiée lors de son appel.

▍ Exemple

Vérifiez s'il y a un élément de chaîne waldo dans le tableau:

 const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // includesWaldo   true 

Array.from ()

La méthode statique Array.from () vous permet de créer des tableaux basés sur d'autres tableaux ou chaînes. Si nécessaire, cette méthode peut recevoir une fonction pour effectuer le mappage, ce qui vous permet d'influencer les données qui tomberont dans le nouveau tableau. En fait, une méthode spéciale est fournie pour le mappage - Array.prototype.map () , donc il n'est pas entièrement clair pourquoi quelqu'un pourrait avoir besoin de cette fonctionnalité de la méthode Array.from() .

▍ Exemple

Créez un tableau basé sur la chaîne.

 const newArray = Array.from('hello'); // newArray    ['h', 'e', 'l', 'l', 'o'] 

Créez un tableau contenant des valeurs doublées des éléments du tableau numérique d'origine.

 const doubledValues = Array.from([2, 4, 6], number => number * 2); //   doubleValues    : [4, 8, 12] 

Object.values ​​()

La méthode Object.values ​​() renvoie un tableau de valeurs de propriété de l'objet qui lui est transmis.

▍ Exemple

Nous formons un tableau de valeurs de propriétés d'objet.

 const icecreamColors = {   chocolate: 'brown',   vanilla: 'white',   strawberry: 'red', } const colors = Object.values(icecreamColors); //  colors    ["brown", "white", "red"] 

Object.keys ()

La méthode Object.keys () renvoie un tableau composé de noms de propriétés d'objet (clés).

▍ Exemple

Nous formerons un tableau de noms de propriétés d'objet.

 const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); //     types: ["chocolate", "vanilla", "strawberry"] 

Object.entries ()

La méthode Object.entries () renvoie, après avoir traité l'objet qui lui est transmis, un tableau contenant des tableaux qui sont des paires de la forme [, ] , qui sont les noms des propriétés et les valeurs de ces propriétés.

▍ Exemple

Nous formons un tableau contenant, pour l'objet qui nous intéresse, des données sur les noms des propriétés et leurs valeurs.

 const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); //   entries    // [['rain', 0], ['temperature', 24], ['humidity', 33]] 

Opérateur d'extension et tableaux

L'opérateur d'extension (opérateur d' étalement , ...), appliqué aux tableaux, vous permet de les développer en en extrayant leurs éléments. Cet opérateur est utile, par exemple, lorsque vous devez combiner plusieurs tableaux. De plus, son utilisation élimine la nécessité d'utiliser la méthode .splice() si vous devez supprimer certains éléments du tableau, car elle peut être combinée avec la méthode .slice() , ce qui évite de modifier le tableau d'origine.

▍ Exemple

Combinez les deux tableaux.

 const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; //  combined   : [1, 2, 3, 4, 5, 6, 7, 8] 

Nous formons un nouveau tableau, qui est le tableau d'origine duquel l'élément a été supprimé. Dans ce cas, le tableau d'origine ne doit pas être modifié.

 const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals   : ['squirrel', 'bear', 'deer', 'rat'] 

Opérateur d'extension et objets

L'application de l'opérateur d'extension aux objets vous permet de leur ajouter de nouvelles propriétés et valeurs sans modifier les objets d'origine (c'est-à-dire que de nouveaux objets sont créés à la suite de ces opérations). De plus, cet opérateur peut être utilisé pour combiner des objets. Il convient de noter ici que l'opérateur d'extension appliqué à un objet n'affecte pas les objets qui y sont imbriqués.

▍ Exemple

Créez un nouvel objet en ajoutant une nouvelle propriété à l'objet d'origine sans modifier l'objet d'origine.

 const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' } //  newObject   : // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' } 

La syntaxe des paramètres de fonction restants

Lorsque vous travaillez avec des fonctions, vous pouvez utiliser la syntaxe des paramètres restants afin d'organiser la réception d'un nombre quelconque d'arguments sous la forme d'un tableau.

▍ Exemple

Nous imprimons un tableau contenant les arguments passés à la fonction.

 function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud'); //      ['hi', 'there', 'bud'] 

Object.freeze ()

La méthode Object.freeze () «fige» un objet, empêchant les propriétés existantes de cet objet de modifier ou d'ajouter de nouvelles propriétés et valeurs à l'objet. Il existe une idée fausse selon laquelle cette méthode est similaire à la déclaration d'objets à l'aide du mot clé const , cependant, les objets constants peuvent être modifiés.

▍ Exemple

Nous «figons» un objet, après quoi nous essayons de changer sa propriété et nous assurons que cela ne peut pas être fait.

 const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; //  frozenObject  ,     { name: 'Robert' } 

Object.seal ()

La méthode Object.seal () vous permet de "sceller" l'objet, empêchant l'ajout de nouvelles propriétés. Dans le même temps, les propriétés existantes peuvent être modifiées.

▍ Exemple

Nous «scellons» l'objet, ce qui ne nous permettra pas d'y ajouter une nouvelle propriété, mais permettra de modifier les propriétés existantes.

 const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; //  sealedObject   : { name: 'Bob' } 

Object.assign ()

La méthode Object.assign () vous permet de combiner des objets en copiant les propriétés d'un objet à un autre. En fait, le même effet peut être obtenu en utilisant l'opérateur d'expansion décrit ci-dessus, de sorte que ce procédé peut être complètement supprimé. Il convient de noter que cette méthode, comme l'opérateur d'extension, n'effectue pas de clonage en profondeur d'objets. Si vous avez besoin d'un outil prêt à l'emploi pour le clonage en profondeur d'objets - jetez un œil aux outils de la bibliothèque Lodash .

▍ Exemple

Créons un à partir de deux objets.

 const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject); //      combinedObjec : { firstName: 'Robert', lastName: 'Cooper' } 

Résumé

Dans cet article, nous avons parlé des méthodes utiles de tableaux et d'objets en JavaScript. De nombreuses méthodes décrites ici renvoient de nouveaux tableaux ou objets. Cela permet de les combiner en chaînes. Ces méthodes ne modifient pas les données source, ce qui est particulièrement important dans le développement de React. De plus, l'utilisation de ces méthodes, dans la grande majorité des cas, vous permet d'abandonner des boucles comme for et while .

Chers lecteurs! Quelles méthodes de tableaux et d'objets en JavaScript utilisez-vous le plus souvent?