ホームページ > 記事 > ウェブフロントエンド > string の substring メソッドを自分で実装する、RMB を小文字から大文字に変換する、数値を逆にする、通常の optimization_javascript スキル
string の substring メソッドを自分で実装する、RMB を小文字から大文字に変換する、数値を逆にする、通常の optimization_javascript スキル
- WBOYオリジナル
- 2016-05-16 17:50:221232ブラウズ
私のレベルには限界があるので、私の計画が完全に正しいかどうかは保証できません。間違いがあればご指摘ください。
1. string の部分文字列メソッドを自分で実装する
方法 1: charAt を使用してインターセプト部分を取り出す
コードをコピー コードは次のとおりです:
String.prototype.mysubstring=function(beginIndex,endIndex){
var str=this,
newArr=[] ;
if(!endIndex){
endIndex=str.length;
}
for(var i=beginIndex;i
}
return newArr.join("");
}
//test
"Hello world!"。 mysubstring(3);// "lo world!"
"Hello world!".mysubstring(3,7);//"low w"
方法 2: 変換文字列を配列に入れてから取り出します 必須部分
コードをコピー コードは次のとおりです:
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));//"low"
方法 3: 先頭部分と末尾部分を取り出し、replace を使用して余分な部分を削除します。 beginIndex が小さく、文字列長 - endIndex が小さい場合に適しています。
コードをコピーします コードは次のとおりです:
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!"
コンソール.log("Hello world!".mysubstring(3,7));//"low w"
2. 1 兆以内で RMB を小文字から大文字に変換します。連続ゼロの処理 var str=this,
beginArr=[],
endArr =[];
if(!endIndex){
endIndex=str.length>}
for(var i=0;i
}
for(var i=endIndex;i
}
return str.replace(beginArr.join(""),"").replace(endArr.join(" "),"");
}
//test
console.log("Hello world!".mysubstring(3));//"lo world!"
コンソール.log("Hello world!".mysubstring(3,7));//"low w"
方法 1 (7 行のコード実装):
コードをコピー コードは次のとおりです:
functionmoneyCaseConvert(num){ var upperArr=["zero" ,"一","二","三","四","五", "鲁","七","八","九"],
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("");
//テスト
console.log(CaseConversion(1234567891234)); Shisi
3. 数値を反転し、123 を入力して 321 を返します。
方法 1:
コードをコピーします。
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("");
//テスト
console.log(CaseConversion(1234567891234)); Shisi
3. 数値を反転し、123 を入力して 321 を返します。
方法 1:
コードをコピーします。
コードは次のとおりです。
function numReverse(num){
return parseInt(num.toString().split("").reverse( ).join (""));
} //テスト console.log(numReverse(123456)) //654321 方法 2:
コードをコピー
コードは次のとおりです。
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;
// コンソールをテストします。 log(numReverse(123456) );
//654321
4. JSONP の原則、Ajax との関係
JSONP の原則は、script タグの特性を利用して JS を動的に解析し、動的に < を追加することでサーバーが提供する js スクリプトを呼び出すことです。 ;script> タグでクロスドメイン呼び出しの目的を達成します。 JSONP の詳細については、この記事を参照してください:http://www.jb51.net/article/31167.htm。
JSONP と AJAX は少し似ていて、同じ目的を持っています。ただし、JSONP と AJAX には違いがあります。 2人は関係ないと言いました。
5. 正規表現の最適化
一般的に、正規表現の最適化とは、できる限り正確にし、バックトラッキングの数を減らすことです。具体的には、主に次のことが挙げられます。次の点:
1. 通常のツールがサポートしている場合、括弧内のテキストを引用する必要がない場合は、非キャプチャ括弧 (?:expression) を使用します。
2. 括弧が必要ない場合は付けないでください。
3. [.] などの文字配列を乱用しないでください。
4. アンカーポイント ^ $ を使用すると、位置決めが高速化されます。
5. 2 つの時刻から必要な要素を抽出します。たとえば、x は xx* と記述され、a{2,4} は aa{0,2} と記述されます。
6. the|this を th(?:e|is) に変更するなど、複数選択構造の先頭で同じ文字を抽出します。 (通常のエンジンがこの使用をサポートしていない場合は、特にアンカー ポイントを th(e|is) に変更します。多くの通常のコンパイラがアンカー ポイントに基づいて特別な最適化を実行できるように、アンカー ポイントは独立している必要があります。 ^abc ^(?:123|abc) に変更します。同様に $ も可能な限り独立しています。
7. 複数選択構造の後に式を追加すると、複数選択構造を照合するときに、複数選択構造を終了せずに次の一致を表示できるようになり、照合の失敗が速くなります。 。この最適化は注意して使用する必要があります。
8. 優先一致の無視と優先一致は状況に応じて決定する必要があります。不明な場合は、ignore-first よりも高速な match-first を使用してください。
9. 大きな正規表現を小さな正規表現に分割します。これは効率を向上させるのに非常に役立ちます。
10. アンカー ポイントをシミュレートし、適切なルックアラウンド構造を使用して、適切な一致開始位置を予測します。たとえば、12 か月を一致させる場合、最初の文字が一致するかどうかを最初に確認できます: (?=JFMASOND)( ?:1月|2月| …|12月)。場合によっては、ルックアラウンド構造のオーバーヘッドが大きくなる場合がありますので、実際の状況に応じてこの最適化を使用してください。
注: 上記の点は、正規表現の最適化に関する非常に優れた記事である http://www.jb51.net/article/31168.htm からの抜粋です。興味のある方は読むことをお勧めします。元の記事。
6. Visibility:hidden と display:none の違い
主な違いは 3 つあります:
1. スペース占有: 要素はその後も残ります。は、visibility:hidden に設定されます。物理的なスペースを占有しますが、要素は、display:none に設定された後はスペースを占有しません。
2. パフォーマンス: Visibility:hidden は依然として物理スペースを占有しているため、ページのリフローと再描画が発生しないため、逆に、display:none ではページのリフローと再描画が発生し、パフォーマンスが向上します。
3. 継承: 親要素が display:none に設定されている場合、親要素の可視性を変更しないとすべての子要素は非表示になります。 Visibility:hidden に設定すると、すべての子要素も非表示になりますが、子要素が Visibility:visible に設定されている場合、子要素は再び表示されるようになります。
7. DOM ツリー
方法 1: 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)); ch =ch.nextSibling);
return result
}
方法 2: childNodes を使用する
//654321
4. JSONP の原則、Ajax との関係
JSONP の原則は、script タグの特性を利用して JS を動的に解析し、動的に < を追加することでサーバーが提供する js スクリプトを呼び出すことです。 ;script> タグでクロスドメイン呼び出しの目的を達成します。 JSONP の詳細については、この記事を参照してください:http://www.jb51.net/article/31167.htm。
JSONP と AJAX は少し似ていて、同じ目的を持っています。ただし、JSONP と AJAX には違いがあります。 2人は関係ないと言いました。
5. 正規表現の最適化
一般的に、正規表現の最適化とは、できる限り正確にし、バックトラッキングの数を減らすことです。具体的には、主に次のことが挙げられます。次の点:
1. 通常のツールがサポートしている場合、括弧内のテキストを引用する必要がない場合は、非キャプチャ括弧 (?:expression) を使用します。
2. 括弧が必要ない場合は付けないでください。
3. [.] などの文字配列を乱用しないでください。
4. アンカーポイント ^ $ を使用すると、位置決めが高速化されます。
5. 2 つの時刻から必要な要素を抽出します。たとえば、x は xx* と記述され、a{2,4} は aa{0,2} と記述されます。
6. the|this を th(?:e|is) に変更するなど、複数選択構造の先頭で同じ文字を抽出します。 (通常のエンジンがこの使用をサポートしていない場合は、特にアンカー ポイントを th(e|is) に変更します。多くの通常のコンパイラがアンカー ポイントに基づいて特別な最適化を実行できるように、アンカー ポイントは独立している必要があります。 ^abc ^(?:123|abc) に変更します。同様に $ も可能な限り独立しています。
7. 複数選択構造の後に式を追加すると、複数選択構造を照合するときに、複数選択構造を終了せずに次の一致を表示できるようになり、照合の失敗が速くなります。 。この最適化は注意して使用する必要があります。
8. 優先一致の無視と優先一致は状況に応じて決定する必要があります。不明な場合は、ignore-first よりも高速な match-first を使用してください。
9. 大きな正規表現を小さな正規表現に分割します。これは効率を向上させるのに非常に役立ちます。
10. アンカー ポイントをシミュレートし、適切なルックアラウンド構造を使用して、適切な一致開始位置を予測します。たとえば、12 か月を一致させる場合、最初の文字が一致するかどうかを最初に確認できます: (?=JFMASOND)( ?:1月|2月| …|12月)。場合によっては、ルックアラウンド構造のオーバーヘッドが大きくなる場合がありますので、実際の状況に応じてこの最適化を使用してください。
注: 上記の点は、正規表現の最適化に関する非常に優れた記事である http://www.jb51.net/article/31168.htm からの抜粋です。興味のある方は読むことをお勧めします。元の記事。
6. Visibility:hidden と display:none の違い
主な違いは 3 つあります:
1. スペース占有: 要素はその後も残ります。は、visibility:hidden に設定されます。物理的なスペースを占有しますが、要素は、display:none に設定された後はスペースを占有しません。
2. パフォーマンス: Visibility:hidden は依然として物理スペースを占有しているため、ページのリフローと再描画が発生しないため、逆に、display:none ではページのリフローと再描画が発生し、パフォーマンスが向上します。
3. 継承: 親要素が display:none に設定されている場合、親要素の可視性を変更しないとすべての子要素は非表示になります。 Visibility:hidden に設定すると、すべての子要素も非表示になりますが、子要素が Visibility:visible に設定されている場合、子要素は再び表示されるようになります。
7. DOM ツリー
方法 1: 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)); ch =ch.nextSibling);
return result
}
方法 2: childNodes を使用する
コードをコピーします> コードは次のとおりです。 function traversalByChildNodes(obj){
var ch=obj.childNodes, result=[]; (var i= 0,j=ch.length;iresult.push(ch[i].nodeName);
if(ch[i].childNodes.length); 🎜>結果.push.apply(result,traversalByChildNodes(ch[i]));
}
}
結果を返します
テスト:
コードをコピーif(ch[i].childNodes.length); 🎜>結果.push.apply(result,traversalByChildNodes(ch[i]));
}
}
結果を返します
テスト:
コードは次のとおりです:
デモ
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"、"#テキスト", "#テキスト", "スクリプト", "#テキスト"]
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"、"#テキスト"、"#テキスト"、"スクリプト"、"#テキスト"]
テスト
Hello World
PTest
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"、"#テキスト", "#テキスト", "スクリプト", "#テキスト"]
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"、"#テキスト"、"#テキスト"、"スクリプト"、"#テキスト"]