Compétences avancées d'utilisation des fonctions de fractionnement et de jointure dans les compétences JavaScript_javascript

Javascript possède deux fonctions très puissantes et appréciées des développeurs : split et join, deux fonctions opposées. Ces deux fonctions permettent d'interchanger les types de chaîne et de tableau, c'est-à-dire que les tableaux peuvent être sérialisés en chaînes et vice versa. Nous pouvons utiliser pleinement ces deux fonctions. Explorons quelques applications intéressantes à l'intérieur. Commençons par présenter ces deux fonctions :

String.prototype.split(séparateur, limite)
separator divise la chaîne en tableaux et le paramètre facultatif limit définit la longueur maximale du tableau généré.

"85@@86@@53".split('@@'); //['85','86','53'];
"banana".split(); //["banana"]; //( thanks peter (-: )
"president,senate,house".split(',',2); //["president", "senate"]
Array.prototype.join(separator)

Le séparateur de paramètre facultatif convertit le tableau en chaîne. Si aucun séparateur n'est fourni, une virgule sera utilisée comme valeur du paramètre (tout comme la fonction toString du tableau).

["slugs","snails","puppy dog's tails"].join(' and '); //"slugs and snails and puppy dog's tails"
['Giants', 4, 'Rangers', 1].join(' '); //"Giants 4 Rangers 1"
[1962,1989,2002,2010].join();

Jetons un coup d'œil à ces applications :

remplacerTout
Cette fonction simple, contrairement à la fonction de remplacement native, peut être utilisée comme remplacement global de sous-chaîne sans utiliser d'expressions régulières.

String.prototype.replaceAll = function(find, replaceWith) {
  return this.split(find).join(replaceWith); 
}

"the man and the plan".replaceAll('the','a'); //"a man and a plan"

Pour les petites chaînes, ses performances sont plus faibles que la fonction native de remplacement d'un seul caractère (fait ici référence aux deux fonctions supplémentaires des expressions régulières), mais sous mozilla, si ce caractère dépasse 2 ou 3 caractères, cette fonction s'exécute plus rapidement que expressions régulières.

occurrences
Cette fonction peut obtenir le nombre de correspondances de sous-chaînes. Et ce type de fonction est très simple et ne nécessite pas de régularisation.

String.prototype.occurences = function(find, matchCase) {
  var text = this;
  matchCase || (find = find.toLowerCase(), text = text.toLowerCase());
  return text.split(find).length-1;  
}

document.body.innerHTML.occurences("div"); //google home page has 114
document.body.innerHTML.occurences("/div"); //google home page has 57
"England engages its engineers".occurrences("eng",true); //2
repeat

Cette fonction est empruntée à prototype.js :

String.prototype.repeat = function(times) {
  return new Array(times+1).join(this);  
}

"go ".repeat(3) + "Giants!"; //"go go go Giants!"

La beauté réside dans l’utilisation de la fonction join. L'accent est mis sur la valeur du paramètre séparateur et le tableau sous-jacent ne contient que quelques valeurs non définies. Pour illustrer ce point plus clairement, recréons l’exemple ci-dessus :

[undefined,undefined,undefined,undefined].join("go ") + "Giants

N'oubliez pas que chaque élément du tableau sera converti en chaîne (une chaîne vide dans ce cas) avant de le rejoindre. Cette application de la fonction de répétition est l'une des rares applications où la définition d'un tableau via un littéral de tableau n'est pas réalisable.

Utiliser le paramètre de limite
J'utilise rarement le paramètre facultatif limit de la fonction split. Voici un exemple d'utilisation de cette limite :

var getDomain = function(url) {
  return url.split('/',3).join('/');
}

getDomain("http://www.aneventapart.com/2010/seattle/slides/");
//"http://www.aneventapart.com"
getDomain("https://addons.mozilla.org/en-US/firefox/bookmarks/");
//"https://addons.mozilla.org"

Modifier les membres numériques
Si nous mélangeons des expressions régulières, joignons et divisons, nous pouvons facilement modifier les membres du tableau. Mais cette fonction n'est pas aussi difficile qu'on l'imagine. Sa fonction principale est de supprimer la chaîne spécifiée devant chaque membre du tableau donné.

var beheadMembers = function(arr, removeStr) {
  var regex = RegExp("[,]?" + removeStr);
  return arr.join().split(regex).slice(1);
}

//make an array containing only the numeric portion of flight numbers
beheadMembers(["ba015","ba129","ba130"],"ba"); //["015","129","130"]

Malheureusement, cette fonction ne fonctionne pas dans IE car ils suppriment incorrectement le premier membre vide de la division. Maintenant corrigeons cette fonction :

var beheadMembers = function(arr, removeStr) {
  var regex = RegExp("[,]?" + removeStr);
  var result = arr.join().split(regex);
  return result[0] && result || result.slice(1); //IE workaround
}

Pourquoi devrions-nous utiliser cette technique à la place de la fonction map de array dans Emascript 5 ?

["ba015","ba129","ba130"].map(function(e) {
  return e.replace('ba','')
}); //["015","129","130"] 

Dans les applications réelles, lorsque cela est possible, j'utilise généralement la fonction de carte native (non disponible dans IE<9 et versions antérieures). L'exemple suivant est uniquement utilisé comme outil d'apprentissage, mais il convient de noter que la syntaxe d'appel de join et split est plus simple et plus directe. Le plus intéressant, c'est qu'il est également très efficace, notamment pour les très petites baies, et il l'est encore plus dans FF et Safari. Pour les grands tableaux, la fonction map est plus adaptée. (Dans tous les navigateurs), les fonctions join et split auront moins d'appels de fonction.

//test 1 - using join/split
var arr = [], x = 1000;
while (x--) {arr.push("ba" + x);}

var beheadMembers = function(arr, regex) {
  return arr.join().split(regex).slice(1);
}

var regex = RegExp("[,]?" + 'ba');
var timer = +new Date, y = 1000;
while(y--) {beheadMembers(arr,regex);};
+new Date - timer;

//FF 3.6 733ms
//Ch 7  464ms
//Sa 5  701ms
//IE 8 1256ms

//test 2 - using native map function
var arr = [], x = 1000;
while (x--) {arr.push("ba" + x);}

var timer = +new Date, y = 1000;
while(y--) {
  arr.map(function(e) {
    return e.replace('ba','')
  });
}
+new Date - timer;

//FF 3.6 2051ms
//Cr 7  732ms
//Sf 5  1520ms
//IE 8  (Not supported)

Correspondance de motifs
Les tableaux doivent effectuer en permanence une correspondance de modèles, mais pas les chaînes. Les expressions régulières peuvent être utilisées sur des chaînes, mais pas sur des tableaux. La puissance de la conversion de tableaux en chaînes pour la correspondance de modèles dépasse de loin le cadre de cet article. Examinons une application simple.

Supposons que les résultats du concours de marche doivent être enregistrés dans un tableau. Le but est d'alterner les concurrents avec leurs temps records dans le tableau. Nous pouvons utiliser des jointures et des expressions régulières pour vérifier si ce mode de stockage est correct. Le code suivant permet de savoir si le temps d'enregistrement est manqué en recherchant deux noms consécutifs.

var results = ['sunil', '23:09', 'bob', '22:09', 'carlos', 'mary', '22:59'];
var badData = results.join(',').match(/[a-zA-Z]+,[a-zA-Z]+/g);
badData; //["carlos,mary"]