快捷導(dǎo)航

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

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

這是最近碰到的幾個(gè)題目，簡(jiǎn)單地寫(xiě)一下我自己的方案，在此分享給大家，也希望能看到大家的方案

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

一、自己實(shí)現(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" 

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

復(fù)制代碼代碼如下:

 
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較小，字符串長(zhǎng)度-endIndex較小的情況

復(fù)制代碼代碼如下:

 
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" 

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

復(fù)制代碼代碼如下:

 
function moneyCaseConvert(num){ 
var upperArr=["零","壹","貳","叁","肆","伍","陸","柒","捌","玖"], 
levelArr=["","拾","佰","仟","萬(wàn)","拾","佰","仟","億","拾","佰","仟","萬(wàn)"], 
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)); 
//壹萬(wàn)貳仟叁佰肆拾伍億陸仟柒佰捌拾玖萬(wàn)壹仟貳佰叁拾肆 

console.log(CaseConversion(987654321)); 
//玖億捌仟柒佰陸拾伍萬(wàn)肆仟叁佰貳拾壹 

console.log(CaseConversion(1234)); 
//壹仟貳佰叁拾肆 

三、數(shù)字反轉(zhuǎn)，輸入123返回321
方法一：

復(fù)制代碼代碼如下:

 
function numReverse(num){ 
return parseInt(num.toString().split("").reverse().join("")); 
} 
//Test 
console.log(numReverse(123456)); 
//654321 

方法二：

復(fù)制代碼代碼如下:

 
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的關(guān)系
　　JSONP原理是利用了script標(biāo)簽動(dòng)態(tài)解析JS的特性，通過(guò)動(dòng)態(tài)添加<script>標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本，達(dá)到跨域調(diào)用的目地。關(guān)于JSONP更多信息可以參考這篇文章：http://www.dbjr.com.cn/article/31167.htm。

　　JSONP與AJAX看起來(lái)有點(diǎn)像，目的也一樣，都是請(qǐng)求一個(gè)url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，但JSONP與AJAX是兩個(gè)不同的東西，這兩者之間可以說(shuō)沒(méi)什么關(guān)系。

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

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

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

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

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

　　2、性能：visibility:hidden因?yàn)槿匀徽紦?jù)物理空間，所以不會(huì)引起頁(yè)面的回流和重繪，所以性能更好，反之display:none會(huì)引起頁(yè)面回流和重繪。

　　3、繼承性：當(dāng)父元素設(shè)置為display:none后所有子元素均會(huì)被引藏，不改變父元素可見(jiàn)性的情況下子元素沒(méi)有辦法顯示出來(lái)，如果父元素設(shè)置為visibility:hidden，所有子元素也會(huì)不可見(jiàn)，但如果給子元素設(shè)置為visibility:visible的話，子元素就可以重見(jiàn)天日了。

七、篇?dú)vDOM樹(shù)

方法一：用nextSibling和childNodes

復(fù)制代碼代碼如下:

 
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

復(fù)制代碼代碼如下:

 
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; 
} 

測(cè)試：

復(fù)制代碼代碼如下:

 
<!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> 