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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
js生成word中图片处理方法
Jan 06 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
js实现飞机大战游戏
Aug 26 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
基于javascript实现放大镜特效
2020/12/03 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
基于python实现简单日历
2018/07/28 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python离线安装外部依赖包的实现
2020/02/13 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
文员个人求职自荐信
2013/09/21 职场文书
单位领导证婚词
2014/01/14 职场文书
公司募捐倡议书
2014/05/14 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
医生个人年度总结
2015/02/28 职场文书
2016年教师节感言
2015/12/09 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python