自己實現(xiàn)string的substring方法人民幣小寫轉大寫，數(shù)字反轉，正則優(yōu)化

更新時間：2012年09月02日 21:58:01 作者：

這是最近碰到的幾個題目，簡單地寫一下我自己的方案，在此分享給大家，也希望能看到大家的方案

水平有限，不保證我的方案絕對正確，如有錯誤歡迎指出。

一、自己實現(xiàn)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" 

方法二：把字符串轉換成數(shù)組然后取出需要部分

復制代碼代碼如下:

 
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" 

二、一萬億以內(nèi)的人民幣小寫轉大寫，暫不考慮連續(xù)零的處理
方法一(七行代碼實現(xiàn))：

復制代碼代碼如下:

 
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)); 
//壹仟貳佰叁拾肆 

三、數(shù)字反轉，輸入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標簽動態(tài)解析JS的特性，通過動態(tài)添加<script>標簽來調(diào)用服務器提供的js腳本，達到跨域調(diào)用的目地。關于JSONP更多信息可以參考這篇文章：http://www.dbjr.com.cn/article/31167.htm。

　　JSONP與AJAX看起來有點像，目的也一樣，都是請求一個url，然后把服務器返回的數(shù)據(jù)進行處理，但JSONP與AJAX是兩個不同的東西，這兩者之間可以說沒什么關系。

五、正則表達式優(yōu)化

　　正則表達式的優(yōu)化總的來說就是盡可能精確，減少回溯次數(shù)，具體來說主要是以下幾點：

1.如果你的正則工具支持，在不需要引用括號內(nèi)文本的時候使用非捕獲型括號：(?:expression) 。
2.如果括號是非必須的，請不要加括號。
3.不要濫用字符數(shù)組，比如[.],請直接用\. 。
4.使用錨點^ $ ，這會加速定位。
5.從兩次中提取必須元素，如:x+寫成xx*，a{2,4}寫成aa{0,2}。
6.提取多選結構開頭的相同字符，如the|this 改成th(?:e|is)。（如果你的正則引擎不支持這么使用就改成th(e|is)）；尤其是錨點，一定要獨立出來，這樣很多正則編譯器會根據(jù)錨點進行特別的優(yōu)化: ^123|^abc 改成^(?:123|abc)。同樣的$也盡量獨立出來。
7.多選結構后邊的一個表達式放入多選結構內(nèi)，這樣能夠在匹配任何一個多選結構的時候在不退出多選結構的狀態(tài)下查看后一匹配，匹配失敗的更快。這種優(yōu)化需要謹慎使用。
8.忽略優(yōu)先匹配和優(yōu)先匹配需要你視情況而定。如果你不確定，請使用匹配優(yōu)先，它的速度是比忽略優(yōu)先快的。
9.拆分較大正則表達式成一個個小的正則表達式，這是非常有利于提高效率的。
10.模擬錨點，使用合適的環(huán)視結構來預測合適的開始匹配位置，如匹配十二個月份，可以先預查首字符是否匹配：(?=JFMASOND)(?:Jan|Feb|…|Dec)。這種優(yōu)化請根據(jù)實際情況使用，有時候環(huán)視結構開銷可能更大。
　　注：以上幾點節(jié)選自http://www.dbjr.com.cn/article/31168.htm，非常好的一篇正則表達式優(yōu)化文章，推薦有興趣的朋友看原文。

六、visibility:hidden與 display:none 的區(qū)別
　　區(qū)別主要有三點：

　　1、空間占據(jù)：元素設置為visibility:hidden后仍然占據(jù)物理空間，而元素設置為display:none后是不占據(jù)空間的。

　　2、性能：visibility:hidden因為仍然占據(jù)物理空間，所以不會引起頁面的回流和重繪，所以性能更好，反之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> 