


Une discussion approfondie sur la façon dont les objets Set en JavaScript accélèrent le code
Je suis sûr qu'il y a beaucoup de développeurs coincés avec les objets globaux de base : nombres, chaînes, objets, tableaux et booléens. Pour de nombreux cas d’utilisation, ceux-ci sont nécessaires. Mais si vous souhaitez que votre code soit aussi rapide et évolutif que possible, ces types de base ne suffisent pas toujours.
Dans cet article, nous verrons comment Set
les objets en JS peuvent rendre votre code plus rapide, notamment évolutif. Il y a beaucoup de croisements dans la façon dont Array
et Set
fonctionnent. Mais utiliser Set
aura un avantage sur Array
en termes de vitesse d'exécution du code.
Quelle est la différence entre Set
La différence la plus fondamentale est que le tableau est une collection indexée, ce qui signifie que les valeurs de données du tableau sont triées par index.
const arr = [A, B, C, D]; console.log(arr.indexOf(A)); // Result: 0 console.log(arr.indexOf(C)); // Result: 2
En revanche, set
est une collection de clés. set
N'utilisez pas d'index, utilisez plutôt des clés pour trier les données. Les éléments de set
sont itérables dans l'ordre d'insertion et ne peuvent contenir aucune donnée en double. En d’autres termes, chaque élément de set
doit être unique.
Quels sont les principaux avantages
set
Il existe plusieurs avantages par rapport aux tableaux, notamment en termes d'exécution :
- Afficher les éléments : Utiliser
indexOf()
ouincludes()
pour vérifier si un élément d'un tableau existe est plus lent. - Supprimer l'élément : Dans
Set
, vous pouvez supprimer l'élément en fonction de sonvalue
. Dans les tableaux, l'approche équivalente consiste à utiliser l'indexation basée sur les élémentssplice()
. Comme le point précédent, s’appuyer sur des index est lent. - Sauvegarder NaN : Vous ne pouvez pas utiliser
indexOf()
ouincludes()
pour trouver la valeurNaN
, alors queSet
peut contenir cette valeur. - Supprimer les doublons :
Set
Les objets ne stockent que des valeurs uniques. Si vous ne souhaitez pas que les doublons existent, c'est un avantage significatif par rapport aux tableaux, car les tableaux nécessitent du code supplémentaire pour gérer les doublons. .
Complexité temporelle ? La complexité temporelle de la méthode tableau
utilisée pour rechercher des éléments est 0(N)
. En d’autres termes, le temps d’exécution augmente au même rythme que la taille des données.
En revanche, les méthodes Set
de recherche, de suppression et d'insertion d'éléments ont toutes une complexité temporelle de seulement O(1)
, ce qui signifie que la taille des données est effectivement indépendante du temps d'exécution de ces méthodes.
À quelle vitesse est réglé ?
Bien que les temps d'exécution puissent varier considérablement en fonction du système utilisé, de la taille des données fournies et d'autres variables, j'espère que les résultats de mes tests vous donneront une idée réaliste de la vitesse de Set
. Je vais partager trois tests simples et les résultats que j'ai obtenus.
Préparation des tests
Avant d'exécuter des tests, créez un tableau et un Set, chacun avec 1 million d'éléments. Pour faire simple, j'ai commencé avec 0
et j'ai compté jusqu'à 999999
.
let arr = [], set = new Set(), n = 1000000; for (let i = 0; i < n; i++) { arr.push(i); set.add(i); }
Test 1 : Trouver l'élément
On recherche le nombre 123123
let result; console.time('Array'); result = arr.indexOf(123123) !== -1; console.timeEnd('Array'); console.time('Set'); result = set.has(123123); console.timeEnd('Set');
- Array : 0.173ms
- Set : 0.023ms
Set
La vitesse est 7.54
fois plus rapide
Test 2 : Ajouter un élément
console.time('Array'); arr.push(n); console.timeEnd('Array'); console.time('Set'); set.add(n); console.timeEnd('Set');
- Array : 0,018 ms
- Définir : 0,003 ms
Set
Plus rapide 6.73
fois
Test 3 : Suppression d'éléments
Enfin, supprimez un élément puisque le tableau a. pas de méthode intégrée, créez d'abord une fonction d'assistance :
const deleteFromArr = (arr, item) => { let index = arr.indexOf(item); return index !== -1 && arr.splice(index, 1); };
Voici le code de test :
console.time('Array'); deleteFromArr(arr, n); console.timeEnd('Array'); console.time('Set'); set.delete(n); console.timeEnd('Set');
- Array : 1,122 ms
- Set : 0,015 ms
Set
est 74.13
fois plus rapide
Dans l'ensemble, nous pouvons voir que l'utilisation de Set
améliore considérablement le temps d'exécution. Jetons un coup d’œil à quelques Set
exemples pratiques utiles.
Cas 1 : Supprimer les valeurs en double d'un tableau
Si vous souhaitez supprimer rapidement les valeurs en double d'un tableau, vous pouvez le convertir en un Set
. C'est de loin le moyen le plus propre de filtrer des valeurs uniques :
const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C']; // 将数组转换为 Set let uniqueCollection = new Set(duplicateCollection); console.log(uniqueCollection) // Result: Set(4) {"A", "B", "C", "D"} // 值保存在数组中 let uniqueCollection = [...new Set(duplicateCollection)]; console.log(uniqueCollection) // Result: ["A", "B", "C", "D"]
Cas 2 : Questions d'entretien Google
Question :
Étant donné un tableau non ordonné d'entiers et une variable sum
, s'il existe une valeur telle que la somme de deux éléments du tableau est égale à sum
, renvoyez true
. Sinon, retournez false
. Par exemple, pour les tableaux [3,5,1,4]
et sum = 9
, la fonction doit renvoyer true
à cause de 4 + 5 = 9
.
Réponse
Un bon moyen de résoudre ce problème est de parcourir le tableau et de créer Set
pour conserver les différences relatives.
当我们遇到3
时,我们可以把6
加到Set
中, 因为我们知道我们需要找到9
的和。然后,每当我们接触到数组中的新值时,我们可以检查它是否在 Set
中。当遇到5
时,在 Set 加上4。最后,当我们最终遇到4
时,可以在Set
中找到它,就返回true
。
const findSum = (arr, val) => { let searchValues = new Set(); searchValues.add(val - arr[0]); for (let i = 1, length = arr.length; i < length; i++) { let searchVal = val - arr[i]; if (searchValues.has(arr[i])) { return true; } else { searchValues.add(searchVal); } }; return false; };
简洁的版本:
const findSum = (arr, sum) => arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));
因为Set.prototype.has()
的时间复杂度仅为O(1)
,所以使用 Set 来代替数组,最终使整个解决方案的线性运行时为O(N)
。
如果使用 Array.prototype.indexOf()
或Array.prototype.includes()
,它们的时间复杂度都为 O(N),则总运行时间将为O(N²)
,慢得多!
原文地址:https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77
为了保证的可读性,本文采用意译而非直译。
更多编程相关知识,请访问:编程学习网站!!
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).
