JavaScript中split与join函数的进阶使用技巧


Posted in Javascript onMay 03, 2016

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"]
Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 #Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 #Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 #Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 #Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 #Javascript
聊一聊JavaScript作用域和作用域链
May 03 #Javascript
You might like
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js实现文字滚动效果
2016/03/03 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python排序算法实例代码
2017/08/10 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python列表生成器迭代器实例解析
2019/12/19 Python
员工自我鉴定
2013/10/09 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015个人半年总结范文
2015/03/09 职场文书
费用申请报告范文
2015/05/15 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang