Créez un tableau unique en utilisant Set() en JavaScript.

Dans cet article, nous analysons comment créer un tableau unique à l'aide d'un nouvel ensemble en JavaScript, inspiré d'une référence de code de TypeDoc.

Commençons par comprendre cette fonction unique dans l'image ci-dessus avec un exemple, puis nous verrons comment elle est utilisée dans le code source de TypeDoc.

fonction unique

export function unique<T>(arr: Iterable<T> | undefined): T[] {
    return Array.from(new Set(arr));
}

Cette fonction est extraite de typedoc/src/lib/utils/array.ts.

La méthode statique Array.from crée une nouvelle instance Array copiée superficiellement à partir d'un objet itérable ou de type tableau.

Array.from() vous permet de créer des tableaux à partir de :

• objets itérables (objets tels que Map et Set) ; ou, si l'objet n'est pas itérable,

• Objets de type tableau (objets avec une propriété de longueur et éléments indexés).

Si vous deviez exécuter le code ci-dessous dans la console de votre navigateur, vous vous rendrez rapidement compte que Set supprime les valeurs en double.

new Set([1,2,3,1,2,5,4,3,])
// result: Set(5) {1, 2, 3, 5, 4}

En combinant ces deux concepts, vous pouvez désormais créer un tableau unique en utilisant new Set(), simple et facile.

Comment TypeDoc utilise la fonction unique

TypeDoc importe une fonction unique dans lib/application.ts sur L366.

Il existe une suggestion d'approche similaire dans cette réponse Stackoverflow.

const unique = (list) => {
  return [...new Set(list)];
}

Ceci est sélectionné dans Stackoverflow et utilise l'opérateur spread au lieu de la méthode Array.from.

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Nous fournissons également des services de développement Web et de rédaction technique. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

1. https://github.com/TypeStrong/typedoc/blob/master/src/lib/application.ts#L366

2. https://github.com/TypeStrong/typedoc/blob/master/src/lib/utils/array.ts#L98C8-L100C2

3. https://stackoverflow.com/questions/6940103/how-do-i-make-an-array-with-unique-elements-i-e-remove-duplicates

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

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!