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中的call实现继承
Jan 22 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
vue实现前端分页完整代码
Jun 17 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
杏林同学录(七)
2006/10/09 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
js实现简单页面全屏
2019/09/17 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
JS实现简易计算器
2020/02/14 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
python制作简单五子棋游戏
2019/06/18 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
企业领导对照检查材料
2014/08/20 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
人民调解协议书
2016/03/21 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis