翻译：Javascript最好同伴：壮大的join与split

2024年4月9日 285次阅读 来源: 小渝人儿

原文地点：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最好同伴。假如另有其他应用，迎接留言。

    原文作者：小渝人儿
    原文地址: https://segmentfault.com/a/1190000000653189
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞