自己实现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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
酒吧创业计划书
2014/01/18 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
临床医学专业求职信
2014/08/08 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
学习党章的体会
2014/11/07 职场文书
员工自我评价范文
2015/03/11 职场文书
关于教师节的广播稿
2015/08/19 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python