JavaScript_javascript スキルの分割および結合関数の高度な使用スキル

JavaScript には、開発者に愛される 2 つの非常に強力な関数があります。それは、分割と結合という 2 つの相反する関数です。これら 2 つの関数を使用すると、文字列型と配列型を交換できます。つまり、配列を文字列にシリアル化したり、その逆を行うことができます。この2つの機能を使いこなすことができます。内部の興味深いアプリケーションをいくつか見てみましょう。まず、次の 2 つの関数を紹介します。

String.prototype.split(区切り文字, 制限)
区切り文字は文字列を配列に分割し、オプションのパラメータ制限は生成される配列の最大長を定義します。

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

オプションのパラメータ区切り文字は、配列を文字列に変換します。区切り文字が指定されていない場合は、(配列の toString 関数と同様に) パラメーター値としてカンマが使用されます。

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

これらのアプリを見てみましょう:

すべて置き換え
この単純な関数は、ネイティブの置換関数とは異なり、正規表現を使用せずにグローバルな部分文字列置換として使用できます。

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"

小さな文字列の場合、そのパフォーマンスは単一文字置換のネイティブ関数 (ここでは正規表現の 2 つの追加関数を指します) よりも劣りますが、mozilla では、この文字が 2 文字または 3 文字を超える場合、この関数の使用が実行されます。正規表現よりも高速です。

出来事
この関数は部分文字列の一致の数を取得できます。そして、この種の関数は非常に単純で、正規化を必要としません。

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

この関数は、prototype.js から借用したものです:

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

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

この機能の利点は、結合関数の使用にあります。焦点は区切りパラメータ値にあり、基になる配列にはいくつかの未定義の値のみが含まれます。この点をより明確に説明するために、上記の例を再作成してみましょう:

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

配列の各要素は結合する前に文字列 (この場合は空の文字列) に変換されることに注意してください。このrepeat 関数のアプリケーションは、配列リテラルによる配列の定義が実現できない数少ないアプリケーションの 1 つです。

制限パラメーターを使用
私は、split 関数のオプションパラメータであるlimitをほとんど使用しません。この制限の使用例を次に示します。

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"

数値メンバーを変更します
正規表現を組み合わせたり、結合、分割したりすると、配列のメンバーを簡単に変更できます。しかし、この関数は想像されているほど難しくはありません。その主な機能は、指定された配列の各メンバーの前に指定された文字列を削除することです。

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

残念ながら、この関数は IE では機能しません。分割から最初の空のメンバーが誤って削除されるためです。次に、この関数を修正しましょう:

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

Emascript 5 の配列のマップ関数の代わりにこの手法を使用する必要があるのはなぜですか?

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

実際のアプリケーションでは、可能な場合は通常、ネイティブ マップ関数を使用します (IE<9 では使用できません)。次の例は学習ツールとしてのみ使用されていますが、結合と分割の呼び出し構文がより単純かつ直接的であることに注意してください。最も興味深いのは、特に非常に小さな配列の場合に非常に効率的であることです。FF や Safari ではさらに効率的です。大きな配列の場合は、map 関数の方が適しています。 (すべてのブラウザーで)、結合関数と分割関数の関数呼び出しが少なくなります。

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

パターンマッチング
配列ではパターン マッチングを継続的に実行する必要がありますが、文字列ではその必要はありません。正規表現は文字列には使用できますが、配列には使用できません。パターン マッチングのために配列を文字列に変換する機能については、この記事の範囲をはるかに超えています。それの簡単な応用を見てみましょう。

ウォーキング競争の結果を配列に保存する必要があるとします。目的は、配列内の記録タイムを持つ出場者を交互に並べることです。結合と正規表現を使用して、このストレージ モードが正しいかどうかを確認できます。次のコードは、連続する 2 つの名前を検索して、記録時間が抜けているかどうかを確認するものです。

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