Erweiterte Kenntnisse in der Verwendung von Split- und Join-Funktionen in JavaScript_Javascript-Kenntnisse

Javascript verfügt über zwei sehr leistungsstarke Funktionen, die von Entwicklern geliebt werden: Split und Join, zwei gegensätzliche Funktionen. Diese beiden Funktionen ermöglichen den Austausch von String- und Array-Typen, d. h. Arrays können in Strings serialisiert werden und umgekehrt. Wir können diese beiden Funktionen voll ausnutzen. Lassen Sie uns einige interessante Anwendungen im Inneren erkunden. Lassen Sie uns zunächst diese beiden Funktionen vorstellen:

String.prototype.split(separator, limit)
Trennzeichen teilt die Zeichenfolge in Arrays auf und der optionale Parameter limit definiert die maximale Länge des generierten Arrays.

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

Der optionale Parameter Separator wandelt das Array in einen String um. Wenn kein Trennzeichen angegeben wird, wird ein Komma als Parameterwert verwendet (genau wie die toString-Funktion des Arrays).

["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();

Werfen wir einen Blick auf diese Apps:

alle ersetzen
Diese einfache Funktion kann im Gegensatz zur nativen Ersetzungsfunktion als globaler Teilstring-Ersatz ohne Verwendung regulärer Ausdrücke verwendet werden.

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"

Bei kleinen Zeichenfolgen ist die Leistung schwächer als bei der nativen Funktion zum Ersetzen einzelner Zeichen (hier sind die beiden zusätzlichen Funktionen regulärer Ausdrücke gemeint). Unter Mozilla wird diese Funktion jedoch schneller ausgeführt, wenn dieses Zeichen 2 oder 3 Zeichen überschreitet reguläre Ausdrücke.

Vorkommen
Diese Funktion kann die Anzahl der Teilstring-Übereinstimmungen ermitteln. Und diese Art von Funktion ist sehr einfach und erfordert keine Regularisierung.

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

Diese Funktion ist von Prototype.js entlehnt:

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

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

Das Schöne daran liegt in der Verwendung der Join-Funktion. Der Fokus liegt auf dem Trennparameterwert und das zugrunde liegende Array enthält nur einige undefinierte Werte. Um diesen Punkt deutlicher zu veranschaulichen, erstellen wir das obige Beispiel nach:

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

Denken Sie daran, dass jedes Array-Element vor dem Zusammenfügen in einen String (in diesem Fall einen leeren String) konvertiert wird. Diese Anwendung der Wiederholungsfunktion ist eine der wenigen Anwendungen, bei denen die Definition eines Arrays über ein Array-Literal nicht möglich ist.

Grenzparameter verwenden
Ich verwende den optionalen Parameter „Limit“ der Split-Funktion selten. Hier ist ein Beispiel für die Verwendung dieses Limits:

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"

Zahlliche Elemente ändern
Wenn wir reguläre Ausdrücke mischen, verbinden und teilen, können wir die Array-Mitglieder leicht ändern. Aber diese Funktion ist nicht so schwierig wie gedacht. Ihre Hauptfunktion besteht darin, die vor jedem Mitglied des angegebenen Arrays angegebene Zeichenfolge zu entfernen.

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"]

Leider funktioniert diese Funktion im IE nicht, da dort fälschlicherweise das erste leere Mitglied aus der Aufteilung entfernt wird. Jetzt reparieren wir diese Funktion:

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

Warum sollten wir diese Technik anstelle der Kartenfunktion des Arrays in Emascript 5 verwenden?

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

In tatsächlichen Anwendungen verwende ich, wenn möglich, normalerweise die native Kartenfunktion (nicht verfügbar in IE<9 und niedriger). Das folgende Beispiel dient nur als Lernhilfe, es ist jedoch zu beachten, dass die Aufrufsyntax von Join und Split einfacher und direkter ist. Das Interessanteste ist, dass es auch sehr effizient ist, insbesondere bei sehr kleinen Arrays, und in FF und Safari sogar noch effizienter. Für große Arrays ist die Kartenfunktion besser geeignet. (In allen Browsern) haben die Join- und Split-Funktionen weniger Funktionsaufrufe.

//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)

Mustervergleich
Arrays müssen kontinuierlich einen Mustervergleich durchführen, Strings jedoch nicht. Reguläre Ausdrücke können für Zeichenfolgen verwendet werden, nicht jedoch für Arrays. Die Möglichkeiten, Arrays für den Mustervergleich in Strings umzuwandeln, gehen weit über den Rahmen dieses Artikels hinaus. Schauen wir uns eine einfache Anwendung davon an.

Angenommen, die Ergebnisse des Gehwettbewerbs müssen in einem Array gespeichert werden. Der Zweck besteht darin, die Teilnehmer mit ihren Rekordzeiten im Feld abzuwechseln. Wir können Joins und reguläre Ausdrücke verwenden, um zu überprüfen, ob dieser Speichermodus korrekt ist. Der folgende Code soll herausfinden, ob die Rekordzeit fehlt, indem nach zwei aufeinanderfolgenden Namen gesucht wird.

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"]