自己实现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 相关文章推荐
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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二维数组排序详解
2013/11/06 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
28个JS验证函数收集
2010/03/02 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
javascript的push使用指南
2014/12/05 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
机房搬迁方案
2014/05/01 职场文书
影视后期实训报告
2014/11/05 职场文书
区域经理岗位职责
2015/02/02 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
2015年手术室工作总结
2015/05/11 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
学前班教学反思
2016/02/24 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers