自己实现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控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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数组
2006/10/09 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python中去空格函数的用法
2014/08/21 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python入门必须知道的11个知识点
2018/03/21 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Django中的session用法详解
2020/03/09 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
高中美术教学反思
2014/01/19 职场文书
企业授权委托书范本
2014/04/02 职场文书
医药销售自我评价200字
2014/09/11 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
简历自我评价优缺点
2015/03/11 职场文书
新员工辞职信范文
2015/05/12 职场文书