翻譯：Javascript最佳搭檔：強大的join與split

原文地址：http://javascriptweblog.wordpress.com/2010/11/08/javascripts-dream-team-in-praise-of-split-and-join/

Javascript擁有兩個至關強大並且受開發者喜好的方法：split 與join 倆對立的方法。這倆方法能讓string與array兩種類型互換，也就是數組能被序列化爲字符串，反之亦然。咱們能把這倆方法發揮得淋漓盡致。下面就來探索裏面的一些有趣的應用， 首先介紹一下這兩個方法：

String.prototype.split(separator, limit)

separator把字符串分割爲數組，可選參數limit定義了生成數組的最大length。

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

Array.prototype.join(separator)

可選參數separator把數組轉換爲一個字符串。若是不提供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();

下面來看這些應用：

replaceAll

這個簡單的方法不像原生的replace方法，它能做爲一個全局的子字符串替換而不須要使用正則表達式。

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"

對於小的字符串，它比單個字符替換的原生方法性能要弱一些（這裏指的是正則表達式的兩個額外的方法），可是在mozilla下，若是這個字符超過2個或3個字符話，這種使用方法要比正則表達式運行得更快。

occurences

該方法能取到子字符串匹配的個數。並且這種方法很直接不須要正則。

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

它的美妙之處就在於join方法的使用。焦點就在這個separator參數值，而後這個基礎數組僅僅包含了一些未定義的value值。爲了更清楚的說明這點，咱們來重造一下上面的實例：

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

記住在join以前每一個數組元素都會轉換爲一個字符串（這裏就是一個空字符串）。這個repeat方法的應用是經過數組字面量定義數組的爲數很少的不可行的應用。

使用limit參數

我不多使用split方法的limit可選參數，下面介紹一個使用這個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"

修改數值成員

若是咱們將正則混合起來使用，join，split就能很容易的修改數組成員了。可是這個方法也沒有想象的難，它的主要功能是去掉給定數組的每一個member前面指定的字符串。

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中失效，由於他們從split中錯誤的去掉了第一個空成員。如今來修正這種方法：

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 中array 的map方法呢？

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

在實際的運用中，在可行的時候，我一般使用原生的map方法（在IE<9 如下不可用）。下面的例子僅僅做爲學習的工具，可是值得注意的是，join與split的調用語法更簡潔更直接一些。最有趣的是，它也很是高效，尤爲是對於很小的數組，在FF與Safari中它表現爲更爲高效。對於大數組來講，map方法就更合適一些。（在全部的瀏覽器中），join與split方法的函數調用會少一些。

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

模式匹配

數組須要不斷的去執行模式匹配，可是字符串不會。正則表達式能在字符串中運用，可是在數組中不會。把數組轉爲字符串用於模式匹配的強悍之處遠遠超越這篇文章講述的範圍。讓咱們來看看它的一個簡單應用。

假設競走的比賽結果須要保存到數組中。目的就是將競賽者與他們的記錄時間交替的放在數組中。咱們能夠用join與正則表達式來驗證這種存儲模式是否正確。下面的代碼就是經過查找兩個連續的名字來找出記錄時間被漏掉的狀況。

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

結論

我但願我列出的這幾條應用足以說明split與join是javascript最佳搭檔。若是還有其餘應用，歡迎留言。