The level is limited, and it is not guaranteed that my plan is absolutely correct. If there are any errors, please point it out.
1. Substring method to implement string by yourself
Method 1: Use charAt to remove the intercepted part
=function(beginIndex,endIndex){
var str=this,
newArr=[];
if(!endIndex){
endIndex=;
}
for(var i=beginIndex;i<endIndex;i++){
((i));
}
return ("");
}
//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 out the required part
=function(beginIndex,endIndex){
var str=this,
strArr=("");
if(!endIndex){
endIndex=;
}
return (beginIndex,endIndex).join("");
}
//test
("Hello world!".mysubstring(3));//"lo world!"
("Hello world!".mysubstring(3,7));//"lo w"
Method 3: Take out the head and tail part, and then use replace to remove the excess part. It is suitable for cases where beginIndex is smaller and string length-endIndex is smaller.
=function(beginIndex,endIndex){
var str=this,
beginArr=[],
endArr=[];
if(!endIndex){
endIndex=;
}
for(var i=0;i<beginIndex;i++){
((i));
}
for(var i=endIndex;i<;i++){
((i));
}
return ((""),"").replace((""),"");
}
//test
("Hello world!".mysubstring(3));//"lo world!"
("Hello world!".mysubstring(3,7));//"lo w"
2. The process of continuous zero is not considered for the lower case of RMB within one trillion.
Method 1 (seven lines of code implementation):
function moneyCaseConvert(num){
var upperArr=["zero","one","two","three","si","wu","lu","seven","ba","nine"]],
levelArr=["","se","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","
numArr=().split("").reverse(),
result=[];
for(var i=-1;i>=0;i--)
(upperArr[numArr[i]]+levelArr[i]);
return ("");
}
//Test
(CaseConversion(1234567891234));
//12,300,500,700,190,100,230,200,100,300,100,300,100,300,100,300,100,100,300,100,100,300,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,10
(CaseConversion(987654321));
//Ninety-eight, seven hundred and fifty thousand three hundred and two hundred and one
(CaseConversion(1234));
//One thousand two hundred three shit
3. Number inversion, input 123 returns 321
Method 1:
function numReverse(num){
return parseInt(().split("").reverse().join(""));
}
//Test
(numReverse(123456));
//654321
Method 2:
function numReverse(num){
var numArr=().split(""),
len=,
result=0;
for(var i=len-1;i>=0;i--){
result+=numArr[i]*(10,i);
}
return result;
}
//Test
(numReverse(123456));
//654321
4. JSONP principle, relationship with Ajax
The JSONP principle is to use the feature of script tags to dynamically parse JS, and dynamically add <script> tags to call the js scripts provided by the server to achieve the purpose of cross-domain calls. For more information about JSONP, please refer to this article:https:///article/。
JSONP and AJAX look a bit similar, and the purpose is the same. They both request a url and then process the data returned by the server. However, JSONP and AJAX are two different things, and there is nothing to do with the two.
5. Regular expression optimization
In general, the optimization of regular expressions is to be as accurate as possible and reduce the number of backtracking times. Specifically, it is mainly the following points:
1. If your regular tool supports it, use non-capturing brackets when you do not need to quote text in brackets: (?:expression).
2. If the brackets are not necessary, please do not add brackets.
3. Do not abuse character arrays, such as [.], please use \. directly.
4. Use anchor ^$, which will speed up positioning.
5. Extract the necessary elements from two times, such as: x+ is written as xx*, a{2,4} is written as aa{0,2}.
6. Extract the same characters at the beginning of the multi-select structure, such as the|this is changed to th(?:e|is). (If your regular engine does not support this use, change it to th(e|is)); especially anchor points, it must be independent, so many regular compilers will make special optimizations based on anchor points: ^123|^abc changed to ^(?:123|abc). The same $ is also independent.
7. Put an expression behind a multi-select structure into a multi-select structure, so that the next match can be viewed without exiting the multi-select structure when matching any multi-select structure, and the matching failure will be faster. This optimization requires caution.
8. Ignoring priority matching and priority matching depends on the situation. If you are not sure, use Match First, which is faster than ignoring priority.
9. Split larger regular expressions into small regular expressions, which is very conducive to improving efficiency.
10. Simulate anchor points and use a suitable circumferential structure to predict the appropriate starting matching position. If you match twelve months, you can first check whether the first character matches: (?=JFMASOND)(?:Jan|Feb|…|Dec). Please use this optimization according to actual conditions. Sometimes the overhead of looking around the structure may be greater.
Note: The above points are excerpted fromhttps:///article/, a very good regular expression optimization article, recommended to friends who are interested to read the original text.
6. The difference between visibility:hidden and display:none
There are three main differences:
1. Space occupancy: After the element is set to visibility:hidden, it still occupies physical space, while after the element is set to display:none, it does not occupies space.
2. Performance: visibility:hidden will not cause page reflow and redraw because it still occupies physical space, so the performance is better. On the contrary, display:none will cause page reflow and redraw.
3. Inheritance: When the parent element is set to display:none, all child elements will be entrusted. If the parent element is not changed, the child elements cannot be displayed. If the parent element is set to visibility:hidden, all child elements will also be invisible. However, if the child element is set to visibility:visible, the child elements can see the light of day again.
7. Calendar DOM tree
Method 1: Use nextSibling and childNodes
function traversalByNextSibling(obj){
var ch=,
result=[];
do{
();
if(){
(result,traversalByNextSibling(ch));
}
}while(ch=);
return result;
}
Method 2: Use childNodes
function traversalByChildNodes(obj){
var ch=,
result=[];
for(var i=0,j=;i<j;i++){
(ch[i].nodeName);
if(ch[i].){
(result,traversalByChildNodes(ch[i]));
}
}
return result;
}
test:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
</style>
</head>
<body>
<div >Test</div>
<div>Hello World</div>
<p>PTest</p>
<script>
(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"]
(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>
In IE6-8, newlines were removed, and in other browsers, newlines were used as a text node, so there were a lot of #texts, but #comment appeared in IE6-8, and I don't understand why.
1. Substring method to implement string by yourself
Method 1: Use charAt to remove the intercepted part
Copy the codeThe code is as follows:
=function(beginIndex,endIndex){
var str=this,
newArr=[];
if(!endIndex){
endIndex=;
}
for(var i=beginIndex;i<endIndex;i++){
((i));
}
return ("");
}
//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 out the required part
Copy the codeThe code is as follows:
=function(beginIndex,endIndex){
var str=this,
strArr=("");
if(!endIndex){
endIndex=;
}
return (beginIndex,endIndex).join("");
}
//test
("Hello world!".mysubstring(3));//"lo world!"
("Hello world!".mysubstring(3,7));//"lo w"
Method 3: Take out the head and tail part, and then use replace to remove the excess part. It is suitable for cases where beginIndex is smaller and string length-endIndex is smaller.
Copy the codeThe code is as follows:
=function(beginIndex,endIndex){
var str=this,
beginArr=[],
endArr=[];
if(!endIndex){
endIndex=;
}
for(var i=0;i<beginIndex;i++){
((i));
}
for(var i=endIndex;i<;i++){
((i));
}
return ((""),"").replace((""),"");
}
//test
("Hello world!".mysubstring(3));//"lo world!"
("Hello world!".mysubstring(3,7));//"lo w"
2. The process of continuous zero is not considered for the lower case of RMB within one trillion.
Method 1 (seven lines of code implementation):
Copy the codeThe code is as follows:
function moneyCaseConvert(num){
var upperArr=["zero","one","two","three","si","wu","lu","seven","ba","nine"]],
levelArr=["","se","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","five","
numArr=().split("").reverse(),
result=[];
for(var i=-1;i>=0;i--)
(upperArr[numArr[i]]+levelArr[i]);
return ("");
}
//Test
(CaseConversion(1234567891234));
//12,300,500,700,190,100,230,200,100,300,100,300,100,300,100,300,100,100,300,100,100,300,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,10
(CaseConversion(987654321));
//Ninety-eight, seven hundred and fifty thousand three hundred and two hundred and one
(CaseConversion(1234));
//One thousand two hundred three shit
3. Number inversion, input 123 returns 321
Method 1:
Copy the codeThe code is as follows:
function numReverse(num){
return parseInt(().split("").reverse().join(""));
}
//Test
(numReverse(123456));
//654321
Method 2:
Copy the codeThe code is as follows:
function numReverse(num){
var numArr=().split(""),
len=,
result=0;
for(var i=len-1;i>=0;i--){
result+=numArr[i]*(10,i);
}
return result;
}
//Test
(numReverse(123456));
//654321
4. JSONP principle, relationship with Ajax
The JSONP principle is to use the feature of script tags to dynamically parse JS, and dynamically add <script> tags to call the js scripts provided by the server to achieve the purpose of cross-domain calls. For more information about JSONP, please refer to this article:https:///article/。
JSONP and AJAX look a bit similar, and the purpose is the same. They both request a url and then process the data returned by the server. However, JSONP and AJAX are two different things, and there is nothing to do with the two.
5. Regular expression optimization
In general, the optimization of regular expressions is to be as accurate as possible and reduce the number of backtracking times. Specifically, it is mainly the following points:
1. If your regular tool supports it, use non-capturing brackets when you do not need to quote text in brackets: (?:expression).
2. If the brackets are not necessary, please do not add brackets.
3. Do not abuse character arrays, such as [.], please use \. directly.
4. Use anchor ^$, which will speed up positioning.
5. Extract the necessary elements from two times, such as: x+ is written as xx*, a{2,4} is written as aa{0,2}.
6. Extract the same characters at the beginning of the multi-select structure, such as the|this is changed to th(?:e|is). (If your regular engine does not support this use, change it to th(e|is)); especially anchor points, it must be independent, so many regular compilers will make special optimizations based on anchor points: ^123|^abc changed to ^(?:123|abc). The same $ is also independent.
7. Put an expression behind a multi-select structure into a multi-select structure, so that the next match can be viewed without exiting the multi-select structure when matching any multi-select structure, and the matching failure will be faster. This optimization requires caution.
8. Ignoring priority matching and priority matching depends on the situation. If you are not sure, use Match First, which is faster than ignoring priority.
9. Split larger regular expressions into small regular expressions, which is very conducive to improving efficiency.
10. Simulate anchor points and use a suitable circumferential structure to predict the appropriate starting matching position. If you match twelve months, you can first check whether the first character matches: (?=JFMASOND)(?:Jan|Feb|…|Dec). Please use this optimization according to actual conditions. Sometimes the overhead of looking around the structure may be greater.
Note: The above points are excerpted fromhttps:///article/, a very good regular expression optimization article, recommended to friends who are interested to read the original text.
6. The difference between visibility:hidden and display:none
There are three main differences:
1. Space occupancy: After the element is set to visibility:hidden, it still occupies physical space, while after the element is set to display:none, it does not occupies space.
2. Performance: visibility:hidden will not cause page reflow and redraw because it still occupies physical space, so the performance is better. On the contrary, display:none will cause page reflow and redraw.
3. Inheritance: When the parent element is set to display:none, all child elements will be entrusted. If the parent element is not changed, the child elements cannot be displayed. If the parent element is set to visibility:hidden, all child elements will also be invisible. However, if the child element is set to visibility:visible, the child elements can see the light of day again.
7. Calendar DOM tree
Method 1: Use nextSibling and childNodes
Copy the codeThe code is as follows:
function traversalByNextSibling(obj){
var ch=,
result=[];
do{
();
if(){
(result,traversalByNextSibling(ch));
}
}while(ch=);
return result;
}
Method 2: Use childNodes
Copy the codeThe code is as follows:
function traversalByChildNodes(obj){
var ch=,
result=[];
for(var i=0,j=;i<j;i++){
(ch[i].nodeName);
if(ch[i].){
(result,traversalByChildNodes(ch[i]));
}
}
return result;
}
test:
Copy the codeThe code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
</style>
</head>
<body>
<div >Test</div>
<div>Hello World</div>
<p>PTest</p>
<script>
(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"]
(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>
In IE6-8, newlines were removed, and in other browsers, newlines were used as a text node, so there were a lot of #texts, but #comment appeared in IE6-8, and I don't understand why.