Implement the substring method of string by yourself, convert RMB from lowercase to uppercase, reverse numbers, regular optimization_javascript skills

My level is limited and I cannot guarantee that my plan is absolutely correct. If there are any errors, please point them out.

1. Implement the substring method of string yourself

Method 1: Use charAt to take out the intercepted part

Copy Code The code is as follows:

String.prototype.mysubstring=function(beginIndex,endIndex){
var str=this,
newArr=[] ;
if(!endIndex){
endIndex=str.length;
}
for(var i=beginIndex;inewArr.push(str.charAt (i));
}
return newArr.join("");
}

//test
"Hello world!".mysubstring(3);// "lo world!"
"Hello world!".mysubstring(3,7);//"lo w"

Method 2: Convert the string into an array and then take it out Required part

Copy code The code is as follows:

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"

Method three: take out The head and tail parts, and then use replace to remove the excess parts. It is suitable for cases where beginIndex is small and string length-endIndex is small

Copy code The code is as follows:

String.prototype.mysubstring=function(beginIndex,endIndex){
var str=this,
beginArr=[],
endArr =[];
if(!endIndex){
endIndex=str.length;
}
for(var i=0;ibeginArr.push( str.charAt(i));
}
for(var i=endIndex;iendArr.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"

2. Convert RMB from lower case to upper case within one trillion, regardless of the processing of consecutive zeros
Method 1 (seven lines of code implementation):

Copy code The code is as follows:

function moneyCaseConvert(num){
var upperArr=["zero" ,"一","二","三","四","五","鲁","七","八","九"],
levelArr=["","十" ,"hundred","千","万","十","百","千","千亿","十","百","千","万"],
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)); );
//Nine billion eighty-year-old Shisi



3. Reverse the number, enter 123 to return 321

Method 1:

Copy code

The code is as follows: function numReverse(num){ return parseInt(num.toString().split("").reverse().join ("")); } //Test

console.log(numReverse(123456));

//654321


Method 2:

Copy code

The code is as follows: 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


4. JSONP principle, relationship with Ajax
The JSONP principle is to use the characteristics of script tag to dynamically parse JS, and to call the js script provided by the server by dynamically adding <script> tag. Achieve the purpose of cross-domain calls. For more information about JSONP, please refer to this article: <a href="http://www.jb51.net/article/31167.htm" target="_blank">http://www.jb51.net/article/31167.htm</a>. <br><br> JSONP and AJAX look a bit similar and have the same purpose. They both request a URL and then process the data returned by the server. However, JSONP and AJAX are two different things. There is a difference between the two. Said it didn't matter. <br><br><strong> 5. Regular expression optimization <br><br></strong> Generally speaking, the optimization of regular expressions is to be as accurate as possible and reduce the number of backtracking. Specifically, it mainly includes the following points : <br><br>1. If your regular tool supports it, use non-capturing brackets (?:expression) when you don’t need to quote the text inside the brackets. <br>2. If brackets are not necessary, please do not add them. <br>3. Don’t abuse character arrays, such as [.], please use . directly. <br>4. Use anchor point ^ $, which will speed up positioning. <br>5. Extract the necessary elements from the two times, such as: x is written as xx*, a{2,4} is written as aa{0,2}. <br>6. Extract the same characters at the beginning of the multi-selection structure, such as changing the|this to th(?:e|is). (If your regular engine does not support this use, change it to th(e|is)); especially the anchor point, it must be independent, so that many regular compilers will perform special optimizations based on the anchor point: ^123|^abc Change to ^(?:123|abc). Similarly $ is also as independent as possible. <br>7. Put an expression after the multi-selection structure into the multi-selection structure, so that when matching any multi-selection structure, you can view the next match without exiting the multi-selection structure, and the matching fails faster. . This optimization needs to be used with caution. <br>8. Ignoring priority matching and priority matching need you to decide according to the situation. If you are unsure, use match-first, which is faster than ignore-first. <br>9. Split larger regular expressions into smaller regular expressions, which is very helpful to improve efficiency. <br>10. Simulate the anchor point and use the appropriate look-around structure to predict the appropriate starting matching position. For example, if you match twelve months, you can first check whether the first character matches: (?=JFMASOND)(?:Jan|Feb| …|Dec). Please use this optimization according to the actual situation. Sometimes the overhead of the look-around structure may be greater. <br> Note: The above points are excerpted from <a href="http://www.jb51.net/article/31168.htm" target="_blank">http://www.jb51.net/article/31168.htm</a>, a very good article on regular expression optimization. I recommend friends who are interested to read the original article. . <br><br><strong> 6. The difference between visibility:hidden and display:none <br></strong> There are three main differences: <br><br> 1. Space occupation: the element still remains after it is set to visibility:hidden Occupies physical space, but the element does not occupy space after it is set to display:none. <br><br> 2. Performance: visibility:hidden still occupies physical space, so it will not cause page reflow and redrawing, so the performance is better. On the contrary, display:none will cause page reflow and redrawing. <br><br> 3. Inheritance: When the parent element is set to display:none, all child elements will be hidden. The child elements cannot be displayed without changing the visibility of the parent element. If the parent element is set to visibility :hidden, all child elements will also be invisible, but if the child elements are set to visibility:visible, the child elements can be visible again. <br><br><strong>7. DOM Tree<br><br></strong>Method 1: Use nextSibling and childNodes <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="89225" class="copybut" id="copybut89225" onclick="doCopy('code89225')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code89225"> <br>function traversalByNextSibling(obj){ <br>var ch=obj.firstChild, <br>result=[]; <br>do{ <br>result.push(ch.nodeName); <br>if(ch.childNodes.length){ <br>result.push.apply(result,traversalByNextSibling(ch)); <br>} <br>}while(ch =ch.nextSibling); <br>return result; <br>} <br> </div> <br>Method 2: Use childNodes <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="9115" class="copybut" id="copybut9115" onclick="doCopy('code9115')"><u>Copy code </u> </a></span> The code is as follows: </div> <div class="codebody" id="code9115"> <br>function traversalByChildNodes(obj){ <br>var ch=obj.childNodes, <br>result=[]; <br>for(var i= 0,j=ch.length;i<j;i ){ <BR>result.push(ch[i].nodeName); <BR>if(ch[i].childNodes.length){ <BR>result. push.apply(result,traversalByChildNodes(ch[i])); <BR>} <BR>} <BR>return result; <BR>} <BR></div> <BR>Test: <BR><div class="codetitle"> <span><a style="CURSOR: pointer" data="76003" class="copybut" id="copybut76003" onclick="doCopy('code76003')"><U>Copy code</U></a></span> The code is as follows:</div><div class="codebody" id="code76003"> <BR><!DOCTYPE html> <br><html> <br><head> <br><meta charset="utf-8"> <br><title>Demo</title> <br><style type="text/css"> <br><br></style> <br></head> <br><body> <br><div id="test">Test</div> <br><div>Hello World</div> <br><p>PTest</p> <br><script> <br>console.log(traversalByNextSibling(document)); <br>//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT <br>//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"] <br><br>console.log(traversalByChildNodes(document)); <br>//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT <br>//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"] <br></script>

在IE6-8中把换行去掉了，在其他浏览器中把换行作为一个文本节点，所以会有很多#text，但IE6-8中出现了#comment我现在也没明白为什么。