Les tableaux sont l'une des structures de données les plus populaires en JavaScript car ils sont utilisés pour stocker des données. De plus, les tableaux offrent de nombreuses opportunités pour travailler avec ces mêmes données. Comprenant que pour ceux qui sont au début de la façon d'apprendre JavaScript, les tableaux sont l'un des sujets les plus fondamentaux, dans cet article, je voudrais vous présenter quelques astuces utiles que vous ne connaissez peut-être pas. Commençons.
1. Comment ne laisser que des valeurs uniques dans le tableau
C'est une question très populaire lors d'un entretien pour le poste de développeur Javascript. Voici une solution rapide et facile à ce problème. Vous devez d'abord obtenir les valeurs uniques du tableau, pour cela, vous pouvez utiliser le
new Set() (
environ Re: la structure de données Set ne stocke que des valeurs uniques ). Ensuite, vous devez convertir la structure de données Set en un tableau. Je veux vous présenter deux façons de procéder: la première - en utilisant la méthode
from() , la seconde - en utilisant l'opérateur spread (
"…" ).
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
Facile, non?
2. Comment remplacer des valeurs dans un tableau
Il existe des situations où vous devez remplacer les valeurs du tableau par d'autres valeurs. Pour ce faire, il existe une bonne méthode que vous ne connaissiez peut-être pas - la méthode d'
splice(start, value to remove, values to add) , où
start est le numéro d'index duquel nous voulons supprimer les éléments du tableau, la
value to remove est le nombre d'éléments que nous voulons supprimer et les
values to add sont les éléments que nous voulons insérer à la place de ceux supprimés:
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits);
3. Comment transformer un tableau sans utiliser la méthode map()
Tout le monde connaît probablement la méthode du tableau
map() , mais il existe une autre solution qui peut être utilisée pour obtenir un effet similaire et un code propre. Pour ce faire, nous pouvons utiliser la méthode
from() :
const 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 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames);
4. Comment effacer rapidement un tableau
Par exemple, nous avons un tableau dans lequel il y a beaucoup d'éléments. Nous devons le nettoyer (peu importe dans quel but), alors que nous ne voulons pas supprimer les éléments un par un. C'est très simple à faire avec une seule ligne de code. Pour effacer le tableau, nous devons définir la longueur du tableau à 0, et c'est tout!
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits);
5. Comment convertir un tableau en objet
Cette situation se produit: nous avons un tableau, mais nous avons besoin d'un objet (encore une fois, peu importe dans quel but) avec ces données, et le moyen le plus rapide pour convertir un tableau en objet est d'utiliser l'opérateur spread (
"..." ):
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj);
6. Comment remplir un tableau avec les mêmes valeurs
Il existe différentes situations lorsque nous voulons créer un tableau et le remplir avec certaines valeurs, ou lorsque nous avons besoin d'un tableau avec les mêmes valeurs. La méthode
fill() pour de telles tâches est une excellente solution:
const newArray = new Array(10).fill('1'); console.log(newArray);
7. Comment combiner plus de deux tableaux
Savez-vous comment combiner des tableaux en un seul sans utiliser la méthode
concat() ? Il existe un moyen simple de combiner n'importe quel nombre de tableaux en un seul tableau avec une seule ligne de code. Comme vous l'avez probablement déjà compris, l'opérateur spread (
"..." ) est un outil assez utile lorsque vous travaillez avec des tableaux, comme dans ce cas:
const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food);
8. Comment trouver l'intersection de deux tableaux
Vous pouvez faire face à cette tâche dans n'importe quel entretien JavaScript, car sa solution montre votre connaissance des méthodes de tableau, ainsi que votre façon de penser. Pour trouver les valeurs communes des deux tableaux, nous utiliserons l'une des méthodes décrites précédemment dans cet article pour nous assurer que les valeurs du tableau que nous vérifions ne sont pas dupliquées. De plus, nous utiliserons les méthodes
filter() et
includes() . En conséquence, nous obtenons un tableau avec des éléments qui sont représentés dans les deux tableaux:
const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues);
9. Comment supprimer les fausses valeurs d'un tableau
Pour commencer, définissons les fausses valeurs. En Javascript, les fausses valeurs sont:
false ,
0 ,
"" ,
null ,
NaN et
undefined . Maintenant, nous pouvons comprendre comment supprimer ces valeurs de notre tableau. Pour ce faire, nous avons besoin de la méthode
filter() :
const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr);
10. Comment obtenir une valeur de tableau aléatoire
Parfois, nous devons sélectionner une valeur de tableau aléatoire. Pour rendre la solution simple, courte et rapide, nous pouvons obtenir un numéro d'index aléatoire en fonction de la longueur du tableau. Jetez un œil à cet exemple:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor);
11. Comment étendre la matrice dans la direction opposée
Lorsque nous devons «retourner» notre tableau, il n'est pas nécessaire de le créer via des boucles et des fonctions complexes, car il existe une méthode de tableau
reverse() simple qui fait tout cela pour nous, et avec une seule ligne de code, nous pouvons «retourner» notre tableau:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors);
12. méthode lastIndexOf()
JavaScript a une
lastIndexOf(elem) intéressante qui vous permet de trouver l'index de la dernière occurrence d'un élément
elem . Par exemple, si notre tableau a des valeurs en double, nous pouvons y trouver la position de la dernière occurrence. Jetez un œil à l'exemple de code suivant:
const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex);
13. Comment additionner toutes les valeurs dans un tableau
Une autre question populaire lors d'un entretien pour un poste de développeur JavaScript. La somme de tous les éléments peut être trouvée dans une ligne de code, si vous connaissez la méthode
reduce() :
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum);
Conclusion
Dans cet article, je vous ai présenté 13 astuces utiles pour vous aider à écrire du code propre et concis. De plus, n'oubliez pas qu'il existe de nombreuses astuces différentes que vous pouvez utiliser en Javascript et qui méritent d'être étudiées non seulement pour travailler avec des tableaux, mais aussi pour d'autres structures de données. J'espère que vous avez aimé les solutions présentées dans l'article et que vous les utiliserez pour améliorer le processus de développement.
Ayez un bon code d'écriture!