Discussion :

[clavier12AZQSWX]

bonjour,

je viens de découvrir qu'il existe une fonction jquery qui enlève les doublons d'un tableau array et qui en plus reclasse ! en une seule ligne là où il en faudrait plus de 4 en js classique et un tableau de transvidage (pour enlever les doublons)
que vaut cette fonction ? rapide ? lourde en mémoire ?
en lisant la doc https://api.jquery.com/jQuery.unique/ , je pensais qu'elle servait qu'à nettoyer le HTML pour enlever des DIV doublon, mais en la testant sur un simple tableau de strings, je me suis aperçu qu'elle marche !

Je vais l'utiliser en prod pour nettoyer un array de dates formatées au format string , j'espère que ça ne produira pas de bug.
exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var jours= ["10/10/2015","10/10/2016","10/10/2017","10/10/2018","10/10/2019","10/10/2020","10/10/2015"];
jours = jQuery.unique( jours );

et mon tableau ne contient en sortie plus de doublon de date !

qu'en pensez-vous ? est-ce fiable ?

[NoSmoking]

Bonjour,

que vaut cette fonction ? rapide ? lourde en mémoire ?

seul des tests pourraient amener un bon éclairage la dessus, ceci étant jQuery annonce

Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.

j'aurais donc tendance à l'utiliser pour ce quelle est prévue, mais pas regarder plus avant le code source pour en voir les risques éventuels !

Ceci étant, si on excepte le tri, il y a pléthore de façons simples de procéder :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
const jours = ["10/10/2015", "10/10/2016", "10/10/2017", "10/10/2018", "10/10/2019", "10/10/2020", "10/10/2015"];
// Set() avec utilisation de spread, syntaxe de décomposition */
const rSpread = [...new Set(jours)];
// Set() avec utilisation de Array.from */
const rFrom = Array.from(new Set(jours));
/* standard pour old browsers avec Array.filter */
const rFilter = jours.filter(function(el, ind, all) {
  return ind === all.indexOf(el);
});
 
console.log("rSpread :", rSpread);
console.log("rFrom :", rFrom);
console.log("rFilter :", rFilter);

[clavier12AZQSWX]

merci pour votre opinion.

je vois "Note that this only works on arrays of DOM elements, not strings or numbers."
c'est curieux parce que ça fonctionne dans mon cas. est-ce que la doc pourrait ne pas être à jour?

après pour le forum j'ai écri un exemple simple, dans ma prod je remplis le tableau avec le contenu de cellule data-champs , mais sauf erreur, le contenu des attributs data-champs="un truc" est toujours String quand il est entre guillemets non ?

[NoSmoking]

c'est curieux parce que ça fonctionne dans mon cas. est-ce que la doc pourrait ne pas être à jour?

je viens de tester ce code avec Jquery 3.5:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const jours = ["10/10/2015","10/10/2016","10/10/2017","10/10/2018","10/10/2019","10/10/2020","10/10/2015"];
const autre = ["un", "deux", "trois", "un", "deux", "trois", "un"];
const chiffre = [ 1, 2, 3, 1, 2, 3, 1];
console.log("$.uniqueSort(jours) :", $.uniqueSort(jours));
console.log("$.uniqueSort(autre) :", $.uniqueSort(autre));
console.log("$.uniqueSort(chiffre) :", $.uniqueSort(chiffre));
;

et dans les trois cas le tableau en sortie est le même qu'en entrée, même longueur observée donc cela ne fonctionne pas

[clavier12AZQSWX]

bonjour,

dans mon cas, j'utilise .unique et non pas .uniqueSort.
je vérifierai ma version de jquery une fois au bureau.

[clavier12AZQSWX]

alors j'utilise jquery 3.4.1

mon code html que je collecte est ainsi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<td data-name="LADATE" data-journee="01/02/2021">
<span id="el3_v_emargements_LADATE">
<span>01/02/2021</span>
</span>
</td>
<td data-name="LADATE" data-journee="01/02/2021">
<span id="el2_v_emargements_LADATE">
<span>01/02/2021</span>
</span>
</td>
<td data-name="LADATE" data-journee="02/02/2021">
<span id="el1_v_emargements_LADATE">
<span>01/02/2021</span>
</span>
</td>

Je collecte et enlève les doublons comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var jours = []; 
$('td').each(function () {
if ($(this).data('journee')!== undefined) jours.push($(this).data('journee'));
			});
jours = jQuery.unique( jours );

pourquoi ça fonctionne donc dans mon cas ?

[NoSmoking]

dans mon cas, j'utilise .unique et non pas .uniqueSort.

Je te rassure, ou pas, c'est la même chose :

jQuery.uniqueSort = jQuery.unique = Sizzle.uniqueSort;

pourquoi ça fonctionne donc dans mon cas ?

car dans ton cas les « doublons » se suivent.

Tout ce joue dans la fonction sortOrder qui fait en d'entrée une comparaison des plus triviales

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// Document order sorting
sortOrder = hasCompare ?
  function(a, b) {
 
    // Flag for duplicate removal
    if (a === b) {
      hasDuplicate = true;
      return 0;
    }
    // la suite ...

donc quelque soit le type si tu passes ce test cela fonctionne pour les couples qui se suivent, sinon on part sur des comparaisons de nœud DOM donc il n'y aura jamais de correspondance.


Si l'on veut occulter le coté DOM de la fonctionnalité il faut trier son tableau avant, donc écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
result = jQuery.unique(jours.sort() );
console.log(result );

Ma conclusion, autant ne pas l'utiliser pour ton cas, aucune vraie plus value

[clavier12AZQSWX]

Ma conclusion, autant ne pas l'utiliser pour ton cas, aucune vraie plus value

J'ai l'esprit contradicteur et aussi l'âme ulsérée par la reprise de projets d'autruis illisibles et mal commentés que j'ai dû corrigés, donc j'aime les fonctions en 1 ligne explicite qui rendent la lecture du code simple ou facilité.

ps : bravo pour votre investigation profonde du code jquery!

[NoSmoking]

Si tu aimes la « concision » dans ce cas je ferais plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const tab = [];
$("td[data-journee]").each(function() {
  const data = $(this).data("journee");
  if ($.inArray(data, tab) < 0) {
    tab.push(data);
  }
});
console.log("tableau sans doublons :", tab);