自己实现string的substring方法 人民币小写转大写,数字反转,正则优化


Posted in Javascript onSeptember 02, 2012

水平有限,不保证我的方案绝对正确,如有错误欢迎指出。

一、自己实现string的substring方法

方法一:用charAt取出截取部分

String.prototype.mysubstring=function(beginIndex,endIndex){ 
var str=this, 
newArr=[]; 
if(!endIndex){ 
endIndex=str.length; 
} 
for(var i=beginIndex;i<endIndex;i++){ 
newArr.push(str.charAt(i)); 
} 
return newArr.join(""); 
} //test 
"Hello world!".mysubstring(3);//"lo world!" 
"Hello world!".mysubstring(3,7);//"lo w"

方法二:把字符串转换成数组然后取出需要部分
String.prototype.mysubstring=function(beginIndex,endIndex){ 
var str=this, 
strArr=str.split(""); 
if(!endIndex){ 
endIndex=str.length; 
} 
return strArr.slice(beginIndex,endIndex).join(""); 
} //test 
console.log("Hello world!".mysubstring(3));//"lo world!" 
console.log("Hello world!".mysubstring(3,7));//"lo w"

方法三:取出头尾部分,然后用replace去掉多余部分,适用于beginIndex较小,字符串长度-endIndex较小的情况
String.prototype.mysubstring=function(beginIndex,endIndex){ 
var str=this, 
beginArr=[], 
endArr=[]; 
if(!endIndex){ 
endIndex=str.length; 
} 
for(var i=0;i<beginIndex;i++){ 
beginArr.push(str.charAt(i)); 
} 
for(var i=endIndex;i<str.length;i++){ 
endArr.push(str.charAt(i)); 
} 
return str.replace(beginArr.join(""),"").replace(endArr.join(""),""); 
} //test 
console.log("Hello world!".mysubstring(3));//"lo world!" 
console.log("Hello world!".mysubstring(3,7));//"lo w"

二、一万亿以内的人民币小写转大写,暂不考虑连续零的处理
方法一(七行代码实现):
function moneyCaseConvert(num){ 
var upperArr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"], 
levelArr=["","拾","佰","仟","万","拾","佰","仟","亿","拾","佰","仟","万"], 
numArr=num.toString().split("").reverse(), 
result=[]; 
for(var i=numArr.length-1;i>=0;i--) 
result.push(upperArr[numArr[i]]+levelArr[i]); 
return result.join(""); 
} //Test 
console.log(CaseConversion(1234567891234)); 
//壹万贰仟叁佰肆拾伍亿陆仟柒佰捌拾玖万壹仟贰佰叁拾肆 
console.log(CaseConversion(987654321)); 
//玖亿捌仟柒佰陆拾伍万肆仟叁佰贰拾壹 
console.log(CaseConversion(1234)); 
//壹仟贰佰叁拾肆

三、数字反转,输入123返回321
方法一:
function numReverse(num){ 
return parseInt(num.toString().split("").reverse().join("")); 
} 
//Test 
console.log(numReverse(123456)); 
//654321

方法二:
function numReverse(num){ 
var numArr=num.toString().split(""), 
len=numArr.length, 
result=0; 
for(var i=len-1;i>=0;i--){ 
result+=numArr[i]*Math.pow(10,i); 
} 
return result; 
} //Test 
console.log(numReverse(123456)); 
//654321

四、JSONP原理,与Ajax的关系

JSONP原理是利用了script标签动态解析JS的特性,通过动态添加<script>标签来调用服务器提供的js脚本,达到跨域调用的目地。关于JSONP更多信息可以参考这篇文章:https://3water.com/article/31167.htm。

JSONP与AJAX看起来有点像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,但JSONP与AJAX是两个不同的东西,这两者之间可以说没什么关系。

五、正则表达式优化

正则表达式的优化总的来说就是尽可能精确,减少回溯次数,具体来说主要是以下几点:

1.如果你的正则工具支持,在不需要引用括号内文本的时候使用非捕获型括号:(?:expression) 。
2.如果括号是非必须的,请不要加括号。
3.不要滥用字符数组,比如[.],请直接用\. 。
4.使用锚点^ $ ,这会加速定位。
5.从两次中提取必须元素,如:x+写成xx*,a{2,4}写成aa{0,2}。
6.提取多选结构开头的相同字符,如the|this 改成th(?:e|is)。(如果你的正则引擎不支持这么使用就改成th(e|is));尤其是锚点,一定要独立出来,这样很多正则编译器会根据锚点进行特别的优化: ^123|^abc 改成^(?:123|abc)。同样的$也尽量独立出来。
7.多选结构后边的一个表达式放入多选结构内,这样能够在匹配任何一个多选结构的时候在不退出多选结构的状态下查看后一匹配,匹配失败的更快。这种优化需要谨慎使用。
8.忽略优先匹配和优先匹配需要你视情况而定。如果你不确定,请使用匹配优先,它的速度是比忽略优先快的。
9.拆分较大正则表达式成一个个小的正则表达式,这是非常有利于提高效率的。
10.模拟锚点,使用合适的环视结构来预测合适的开始匹配位置,如匹配十二个月份,可以先预查首字符是否匹配:(?=JFMASOND)(?:Jan|Feb|…|Dec)。这种优化请根据实际情况使用,有时候环视结构开销可能更大。

注:以上几点节选自https://3water.com/article/31168.htm,非常好的一篇正则表达式优化文章,推荐有兴趣的朋友看原文。

六、visibility:hidden与 display:none 的区别

区别主要有三点:

1、空间占据:元素设置为visibility:hidden后仍然占据物理空间,而元素设置为display:none后是不占据空间的。

2、性能:visibility:hidden因为仍然占据物理空间,所以不会引起页面的回流和重绘,所以性能更好,反之display:none会引起页面回流和重绘。

3、继承性:当父元素设置为display:none后所有子元素均会被引藏,不改变父元素可见性的情况下子元素没有办法显示出来,如果父元素设置为visibility:hidden,所有子元素也会不可见,但如果给子元素设置为visibility:visible的话,子元素就可以重见天日了。

七、篇历DOM树

方法一:用nextSibling和childNodes

function traversalByNextSibling(obj){ 
var ch=obj.firstChild, 
result=[]; 
do{ 
result.push(ch.nodeName); 
if(ch.childNodes.length){ 
result.push.apply(result,traversalByNextSibling(ch)); 
} 
}while(ch=ch.nextSibling); 
return result; 
}

方法二:用childNodes
function traversalByChildNodes(obj){ 
var ch=obj.childNodes, 
result=[]; 
for(var i=0,j=ch.length;i<j;i++){ 
result.push(ch[i].nodeName); 
if(ch[i].childNodes.length){ 
result.push.apply(result,traversalByChildNodes(ch[i])); 
} 
} 
return result; 
}

测试:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Demo</title> 
<style type="text/css"> </style> 
</head> 
<body> 
<div id="test">Test</div> 
<div>Hello World</div> 
<p>PTest</p> 
<script> 
console.log(traversalByNextSibling(document)); 
//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT 
//other:["html", "HTML", "HEAD", "#text", "META", "#text", "TITLE", "#text", "#text", "STYLE", "#text", "#text", "#text", "BODY", "#text", "DIV", "#text", "#text", "DIV", "#text", "#text", "P", "#text", "#text", "SCRIPT", "#text"] 
console.log(traversalByChildNodes(document)); 
//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT 
//otehr:["html", "HTML", "HEAD", "#text", "META", "#text", "TITLE", "#text", "#text", "STYLE", "#text", "#text", "#text", "BODY", "#text", "DIV", "#text", "#text", "DIV", "#text", "#text", "P", "#text", "#text", "SCRIPT", "#text"] 
</script> 
</body> 
</html>

在IE6-8中把换行去掉了,在其他浏览器中把换行作为一个文本节点,所以会有很多#text,但IE6-8中出现了#comment我现在也没明白为什么。
Javascript 相关文章推荐
js字符编码函数区别分析
Dec 28 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
jquery实现轮播图效果
Feb 13 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
js实现自动锁屏功能
Jun 02 Javascript
Javascript中的delete介绍
Sep 02 #Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 #Javascript
Javascript this 的一些学习总结
Aug 31 #Javascript
javascript动画浅析
Aug 30 #Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 #Javascript
JS跨域代码片段
Aug 30 #Javascript
JS跨域总结
Aug 30 #Javascript
You might like
php自定义错误处理用法实例
2015/03/20 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
js实现动态时钟
2020/03/12 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python实现数独算法实例
2015/06/09 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
德国网上花店:Valentins
2018/08/15 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
中层干部岗位职责
2013/12/18 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
灰雀教学反思
2014/04/28 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
体育部部长竞选稿
2015/11/21 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js