Un tableau est l'un des concepts les plus courants de Javascript, ce qui nous donne de nombreuses possibilités pour travailler avec les données stockées à l'intérieur. Considérant que le tableau est l'un des sujets les plus élémentaires de Javascript que vous apprenez au début de votre parcours de programmation, dans cet article, je voudrais vous montrer quelques astuces que vous ne connaissez peut-être pas et qui peuvent être très utile pour le codage ! Commençons.

1. Supprimer les doublons d'un tableau

C'est une question d'entretien très populaire sur les tableaux Javascript, comment extraire les valeurs uniques du tableau Javascript. Voici une solution simple et rapide à ce problème, vous pouvez utiliser un nouveau Set() à cet effet. Et je voudrais vous montrer deux manières possibles de le faire, une avec la méthode .from() et la seconde avec l'opérateur spread (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns ["banana", "apple", "orange", "watermelon", "grape"]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns ["banana", "apple", "orange", "watermelon", "grape"]

Parfois, il est nécessaire de remplacer une valeur spécifique dans le tableau lors de la création de code, et il existe une méthode courte et agréable pour le faire que vous ne connaissez peut-être pas encore. Pour cela, nous pouvons utiliser .splice(start, value to remove, valueToAdd) et y passer les trois paramètres en spécifiant où nous voulons commencer la modification, combien de valeurs nous voulons changer et les nouvelles valeurs.

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

Tout le monde connaît probablement la méthode .map() des tableaux, mais il existe une solution différente qui peut être utilisée pour obtenir un effet similaire et un code très propre également. Nous pouvons utiliser la méthode .from() à cette fin.

var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

Avez-vous un tableau plein d'éléments, mais vous devez le nettoyer à quelque fin que ce soit, et vous ne voulez pas supprimer les éléments un par un ? C'est très simple de le faire en une seule ligne de code. Pour vider un tableau, vous devez définir la longueur d'un tableau sur 0, et c'est tout !

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

Il arrive que nous ayons un tableau, mais dans un but précis, nous avons besoin d'un objet avec ces données, et le moyen le plus rapide de convertir le tableau en objet est d'utiliser un opérateur de propagation bien connu (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

Il y a des situations où nous créons un tableau, et nous aimerions le remplir avec des données, ou nous avons besoin d'un tableau avec les mêmes valeurs, et dans ce cas, la méthode .fill() vient avec une solution simple et propre.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

Savez-vous comment fusionner des tableaux en un seul tableau sans utiliser la méthode .concat() ? Il existe un moyen simple de fusionner n'importe quel nombre de tableaux en une seule ligne de code. Comme vous l'avez probablement déjà réalisé, l'opérateur spread (…) est très utile lorsque vous travaillez avec des tableaux et c'est la même chose dans ce cas.

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

C'est également l'un des défis les plus populaires auxquels vous pouvez être confronté lors d'une interview Javascript, car il montre si vous pouvez utiliser des méthodes de tableau et quelle est votre logique. Pour trouver l'intersection de deux tableaux, nous utiliserons l'une des méthodes présentées précédemment dans cet article, pour nous assurer que les valeurs du tableau que nous vérifions ne sont pas dupliquées et nous utiliserons la méthode .filter et la méthode .includes. En conséquence, nous obtiendrons le tableau avec les valeurs qui ont été présentées dans les deux tableaux. Vérifiez le code :

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

Tout d'abord, définissons les fausses valeurs. En Javascript, les fausses valeurs sont false, 0, „”, null, NaN, undefined. Nous pouvons maintenant découvrir comment supprimer ces types de valeurs de notre tableau. Pour y parvenir, nous allons utiliser la méthode .filter().

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

Parfois, nous devons sélectionner une valeur dans le tableau au hasard. Pour le créer de manière simple, rapide et courte et garder notre code propre, nous pouvons obtenir un numéro d'index aléatoire en fonction de la longueur du tableau. Voyons le code :

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

Lorsque nous devons retourner notre tableau, il n'est pas nécessaire de le créer à travers les boucles et les fonctions compliquées, il existe une méthode de tableau simple qui fait tout pour nous, et avec une seule ligne de code, nous pouvons avoir notre tableau inversé. Vérifions-le :

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

En Javascript, il existe une méthode intéressante qui permet de trouver l'index de la dernière occurrence de l'élément donné. Par exemple, si notre tableau a des valeurs en double, nous pouvons trouver la position de la dernière occurrence de celui-ci. Voyons l'exemple de code :

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

Un autre défi qui arrive très souvent lors des entretiens avec Javascript Engineer. Rien d'effrayant ne vient ici; il peut être résolu en utilisant la méthode .reduce en une seule ligne de code. Vérifions le code :

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Codage de niveau supérieur

Merci de faire partie de notre communauté ! Avant que tu partes:

• Applaudissez pour l'histoire et suivez l'auteur
• Voir plus de contenu dans la publication Level Up Coding
• Suivez-nous : Twitter | LinkedIn | Bulletin