JavaScript応用スキル集【おすすめ】_javascriptスキル
javascript
応用のヒント
ブール型に変換
JavaScript のすべての値は、次のように暗黙的にブール型に変換できます。
そこで、比較に 3 つの等号を使用すると:
パラメータに初期値を代入しますJavaScript には繰り返しはありません。ロードの概念はありますが、JavaScript の関数のパラメーターは、呼び出し時に 1 つのパラメーターが欠落している場合、
未定義 に置き換えられます。
他の人があなたのページを Iframe にロードできないようにします。 >
Web サイトが非常に人気になると、多くの Web サイトがあなたの Web サイトにリンクしたり、IFrame を介して自分の Web ページに Web ページを埋め込みたいとさえ思うようになります。 これは面白くないので、この行動を止めるにはどうすればよいでしょうか?
文字列置換
String.prototype.replace 関数は、C# や Java に精通しているプログラマーを混乱させることがよくあります。
例:
クロージャ
クロージャは、関数内のローカル変数を指します。この変数は、関数が戻ったときにも使用できます。
関数内で別の関数を定義する場合、有名な例としてクロージャーを作成します。
参考記事
プライベート変数
私たちは、変数がプライベート変数であるかどうかを示すためによく命名規則を使用します (最も一般的に使用されるのは、示す) :
主なトリックは、匿名関数とクロージャを使用することです。
JavaScript にはブロックレベルのコンテキスト (スコープ) がありません JavaScript のブロックレベルのコードにはコンテキストがありません。実際、独自のコンテキストを持つのは関数だけです。
JavaScript のすべての値は、次のように暗黙的にブール型に変換できます。
コードをコピー コードは次のとおりです:
0 == false; // true 1 == true; // true '' == false // true null == false // true
これらの値はブール型ではありません。 そこで、比較に 3 つの等号を使用すると:
コードをコピー コードは次のとおりです:
0 = = = false; // false 1 === true; // false '' === false // false null === false // false
ここで問題となるのは、他の型をブール型に変換する方法です。 🎜 >コードをコピーします コードは次のとおりです:
!!0 === false; // true !!1 == = true; // true !!'' === false // true !!null === false // true パラメータに初期値を代入しますJavaScript には繰り返しはありません。ロードの概念はありますが、JavaScript の関数のパラメーターは、呼び出し時に 1 つのパラメーターが欠落している場合、
未定義 に置き換えられます。
コードをコピーします コードは次のとおりです。
function plus(base, added) { return Base added } plus( 2); // NaN この例では、
plus(2) と plus(2, unknown) は等価であり、2 unknown は NaN です。 ここでの問題は、2 番目のパラメータが渡されない場合、それに初期値を割り当てる方法です。
コードをコピーします コードは次のとおりです。 function plus(base, added) { added = added || return Base added ; } plus(2); // 3 plus(2, 2); // 4
これは実際に当てはまります。これには特別な処理が必要なようです:
Copy code コードは次のとおりです: function plus( Base, added) { added = added || (added === 0 ? 0 : 1);
他の人があなたのページを Iframe にロードできないようにします。 >
Web サイトが非常に人気になると、多くの Web サイトがあなたの Web サイトにリンクしたり、IFrame を介して自分の Web ページに Web ページを埋め込みたいとさえ思うようになります。 これは面白くないので、この行動を止めるにはどうすればよいでしょうか?
コードをコピー コードは次のとおりです。 if(top !== window) { top.location.href = window.location .href; } このコードは各ページの
head に配置する必要があります。実際に使用している人がいるかどうかを知りたい場合は、Baidu を参照してください。ブログすれば分かるよ。
文字列置換
String.prototype.replace 関数は、C# や Java に精通しているプログラマーを混乱させることがよくあります。
例:
コードをコピーします コードは次のとおりです: 'Hello world, hello world'.replace ('world' , 'JavaScript'); // 結果は「Hello JavaScript, hello world」です。
replace 関数の最初のパラメータは正規表現です。
最初のパラメータとして文字列を渡すと、最初に見つかった一致する文字列のみが置換されます。 この問題を解決するには、正規表現を使用できます: コードをコピー コードは次のとおりです: ' Hello world , hello world'.replace(/world/g, 'JavaScript') // 結果は "Hello JavaScript, hello JavaScript" になります。 置換時に大文字と小文字を区別するように指定することもできます。
コードをコピーします コードは次のとおりです: 'Hello world, hello world'.replace(/hello/gi, 'Hi') / / 結果は「Hi world, Hi world」です
引数を配列に変換する
関数内の事前定義変数 arguments は実際の配列ではなく、配列のようなオブジェクトです。
length 属性はありますが、スライス、プッシュ、ソートなどの関数はありません。そこで、引数 にこれらにのみ使用できる関数を持たせる方法配列？
言い換えると、引数を実数の配列にするにはどうすればよいでしょうか?
parseInt 関数の 2 番目のパラメータを指定します
parseInt 文字列を整数に変換するために使用されます。構文は次のとおりです:
2 番目のパラメータが渡されない場合は、次の規則に従います:
-> str が 0x で始まる場合、16 進数とみなされます。
->str が 0 で始まる場合、8 進数とみなされます。
-> それ以外の場合は、10 進数とみなされます。
ルールを知らないと、次のコードは混乱するでしょう:
したがって、安全上の理由から、parseInt の 2 番目のパラメータを指定する必要があります。 。
配列から要素を削除します
おそらく delete で実行できます:
実際、以下に示すように、Array.prototype の splice 関数を使用して配列内の要素を削除できます。
関数もオブジェクトです
JavaScript では、関数にプロパティを追加できるため、関数もオブジェクトです。
例:
配列の最大値
数値でいっぱいの配列の最大値を見つける方法は、ループで簡単に実行できます:
ループが発生したときに他の画像をプリロードする時間がないため、最後の画像のみをロードできます。
したがって、正しい書き方は次のようになります: 引数を配列に変換する
関数内の事前定義変数 arguments は実際の配列ではなく、配列のようなオブジェクトです。
length 属性はありますが、スライス、プッシュ、ソートなどの関数はありません。そこで、引数 にこれらにのみ使用できる関数を持たせる方法配列？
言い換えると、引数を実数の配列にするにはどうすればよいでしょうか?
コードをコピー コードは次のとおりです。
function args() { return [].slice.call(arguments, 0); } args(2, 5, 8); // [2, 5, 8]
parseInt 関数の 2 番目のパラメータを指定します
parseInt 文字列を整数に変換するために使用されます。構文は次のとおりです:
コードをコピーします コードは次のとおりです:
parseInt( str, [radix])
2 番目のパラメーターはオプションで、最初のパラメーターの 10 進数を指定するために使用されます。 2 番目のパラメータが渡されない場合は、次の規則に従います:
-> str が 0x で始まる場合、16 進数とみなされます。
->str が 0 で始まる場合、8 進数とみなされます。
-> それ以外の場合は、10 進数とみなされます。
ルールを知らないと、次のコードは混乱するでしょう:
コードをコピーします コードは次のとおりです:
parseInt('08'); // 0 parseInt('08', 10); // 8
したがって、安全上の理由から、parseInt の 2 番目のパラメータを指定する必要があります。 。
配列から要素を削除します
おそらく delete で実行できます:
コードをコピー コードは次のとおりです。
var arr = [1, 2, 3, 4, 5] // [1, unknown, 3, 4, 5]
ご覧のとおり、delete は実際には配列内の要素を削除できません。削除された要素は unknown に置き換えられ、配列の長さは変わりません。 実際、以下に示すように、Array.prototype の splice 関数を使用して配列内の要素を削除できます。
コピー コード コードは次のとおりです。
var arr = [1, 2, 3, 4, 5]; // [1]; , 3 , 4, 5]
関数もオブジェクトです
JavaScript では、関数にプロパティを追加できるため、関数もオブジェクトです。
例:
コードをコピー コードは次のとおりです。
function add() { return add.count ; } add. count = 0; add(); // 1 add() // 2
add 関数に追加しました。 を使用して、この関数が呼び出された回数を記録します。 もちろん、これはよりエレガントな方法でも実現できます: コードをコピー コードは次のとおりです: 関数 add() { if(!arguments.callee.count) { argument.callee.count = 0; } return argument.callee.count } // 0 add(); (); / / 2
arguments.callee は現在実行中の関数を指します。
配列の最大値
数値でいっぱいの配列の最大値を見つける方法は、ループで簡単に実行できます:
コードをコピーします コードは次のとおりです: var arr = [2, 3, 45, 12, 8]; var max = arr[ 0]; for (var i in arr) { if(arr[i] > max) { max = arr[i] } } max; 他の方法はありますか？ JavaScript には数値を処理するための Math
オブジェクトがあることは誰もが知っています:
コードをコピー コードは次のとおりです。 Math.max(2, 3, 45, 12, 8) // 45 ;次に、次のように配列内の最大値を見つけることができます:
console.log を追加します。 IE の関数
Firefox では、Firebug のサポートにより、コンソールに情報を記録するために console.log をよく使用します。
ただし、現時点では console オブジェクトがまったくないため、このアプローチでは IE で JavaScript を実行できなくなります (Firefox で Firebug が有効になっていない場合も同様です)。
この状況の発生を防ぐには、次のヒントを使用できます:
未定義 は JavaScript の予約キーワードですか? のように見えますが、実際には、未定義は JavaScript のキーワードではありません:
変数が未定義かどうかを判断します変数は次の 2 つのケースで未定義です。
1. 変数は宣言されていますが、値が割り当てられていません
画像のプリロード 画像のプリロードは、後ですぐに表示できるように、ページ上に存在しない画像をロードすることです。 JavaScript を使用して。
たとえば、マウスが画像上に移動したときに別の画像を表示したい場合:
では、画像のセットを読み込むにはどうすればよいでしょうか?次のコードを考えてみましょう:
コードをコピー コードは次のとおりです:
var arr = [2, 3, 45, 12, 8]; Math.max.apply(null, arr); // 45
console.log を追加します。 IE の関数
Firefox では、Firebug のサポートにより、コンソールに情報を記録するために console.log をよく使用します。
ただし、現時点では console オブジェクトがまったくないため、このアプローチでは IE で JavaScript を実行できなくなります (Firefox で Firebug が有効になっていない場合も同様です)。
この状況の発生を防ぐには、次のヒントを使用できます:
コードをコピー コードは次のとおりです:
if ( typeof(console) === '未定義') { window.console = { log: function(msg) { alter(msg) } } console.log('デバッグ情報');
未定義 は JavaScript の予約キーワードですか? のように見えますが、実際には、未定義は JavaScript のキーワードではありません:
コードをコピー コードは次のとおりです。
var unknown = 'Hello'; // 'Hello' このコードは奇妙に見えるかもしれませんが、
unknown は単なる事前定義された変数です。 。 注: JavaScript プログラムではこれを決して行わないでください。このトリックは、これが事実であることを示すだけです。 変数が未定義かどうかを判断します変数は次の 2 つのケースで未定義です。
1. 変数は宣言されていますが、値が割り当てられていません
コードをコピーします コードは次のとおりです:
var name; // true 2.これは宣言されていません。 変数
コードをコピー コードは次のとおりです。
name2 === 未定義; // エラー– name2 が定義されていません 2 番目のケースでは、エラーがスローされます。そこで、エラーを生成せずに変数が未定義であるかどうかを判断したらどうなるでしょうか。
一般的なメソッドを以下に示します。 コードをコピー コードは次のとおりです。
typeof(name2) = = = 'unknown'; // true 画像のプリロード 画像のプリロードは、後ですぐに表示できるように、ページ上に存在しない画像をロードすることです。 JavaScript を使用して。
たとえば、マウスが画像上に移動したときに別の画像を表示したい場合:
コードをコピーします コードは次のとおりです。 :
var img = new Image(); img.src = "クロック2.gif"; コードをコピー コードは次のとおりです:
コードをコピー コードは次のとおりです:
var source = ['img1.gif', 'img2.gif ']; var img = new Image(); for(var i = 0; i コードをコピー コードは次のとおりです:
var source = ['img1.gif ','img2.gif']; for(var i = 0; i クロージャ
クロージャは、関数内のローカル変数を指します。この変数は、関数が戻ったときにも使用できます。
関数内で別の関数を定義する場合、有名な例としてクロージャーを作成します。
コードをコピー コードは次のとおりです。
function add(i) { return function() { return i; }; } add(2).toString(); // "function () { return i; }" )(); // 3
add(2) は、外部関数のローカル変数 i を取得できる関数です。 参考記事
プライベート変数
私たちは、変数がプライベート変数であるかどうかを示すためによく命名規則を使用します (最も一般的に使用されるのは、示す) :
コードをコピー コードは次のとおりです:
var person = { _name: '', getName: function () { return this ._name || '未定義'; } }; // "未定義"
アンダースコア接頭辞はプライベート変数として使用されますが、他の開発者も使用できます。このプライベート変数を引き続き呼び出します:
コードをコピー コードは次のとおりです。
person._name; // ""
では、JavaScript で実際の人物を作成する方法 プライベート変数についてはどうですか? 主なトリックは、匿名関数とクロージャを使用することです。
コードをコピーします コードは次のとおりです。
var person = {} (function() { var _name = '; '; person .getName = function() { return _name || '未定義' })(); // "未定義" typeof(person._name); 🎜>
JavaScript にはブロックレベルのコンテキスト (スコープ) がありません JavaScript のブロックレベルのコードにはコンテキストがありません。実際、独自のコンテキストを持つのは関数だけです。
コードをコピーします コードは次のとおりです:
for(var i = 0; i コンテキストを作成したい場合は、自己実行の匿名関数を使用できます: コードをコピーコードは次のとおりです。
(function (){ for(var i = 0; i 奇妙な NaNNaN は、値が数値ではないことを示すために使用されます。
NaN はどの値 (それ自体も含む) とも等しくないため、JavaScript で NaN は奇妙な動作をします。
コードをコピー コードは次のとおりです。
NaN === NaN // false 。コードは一部の人々を狂わせる可能性があります:
コードをコピー コードは次のとおりです:
parseInt('hello', 10) ; // NaN parseInt('hello', 10) == NaN; // false parseInt('hello', 10) === NaN; // では、値が NaN であるかどうかを確認するにはどうすればよいでしょうか? > window.isNaN を使用して判断できます:
コードをコピー コードは次のとおりです: isNaN(parseInt(' hello', 10)); // true
True 値と False 値 JavaScript のすべての値は暗黙的にブール型に変換できます。 条件判定では、
null、unknown、NaN、0、''、false
の値は自動的に false に変換されますので、次の複雑な判断を行います。
コードをコピー コードは次のとおりです。 if(obj === unknown || obj === null) { } これを行うだけです:
コードをコピーします コードは次のとおりです:
引数の変更
たとえば、引数に値を追加します:
解決策:
ブール値
ブール型の値 (リテラル) を生成するために使用される、ブール型を関数と考えることができます。
Boolean をコンストラクターとみなして、new を通じて Boolean 型オブジェクトを作成することもできます。
高速な文字列連結
短い文字列を連結するために をよく使用します。 1 つの長い文字列ですが、ほとんどの場合はこれで問題ありません。
しかし、連結する必要がある文字列が多数ある場合、このアプローチでは、特に IE ではパフォーマンスの問題が発生します。
if(!obj) { }
引数の変更
たとえば、引数に値を追加します:
コードをコピーします コードは次のとおりです。
function add() { argument.push('new value') } add();
arguments は実際の配列ではなく、push メソッドがないため、push は関数ではありません は失敗します。 解決策:
コードをコピー コードは次のとおりです。
function add() { Array.prototype.push .call (arguments, '新しい値'); } add()[0] // "新しい値"
ブール値
ブール型の値 (リテラル) を生成するために使用される、ブール型を関数と考えることができます。
コードをコピー コードは次のとおりです。
Boolean(false) === false; // true Boolean('') === false; // true
つまり、Boolean(0) と !!0 は同等です。 Boolean をコンストラクターとみなして、new を通じて Boolean 型オブジェクトを作成することもできます。
コードをコピーコードは次のとおりです:
new Boolean(false) === false; // false new Boolean(false) == false; // true typeof(new Boolean(false)); typeof(Boolean(false)); // "boolean"
高速な文字列連結
短い文字列を連結するために をよく使用します。 1 つの長い文字列ですが、ほとんどの場合はこれで問題ありません。
しかし、連結する必要がある文字列が多数ある場合、このアプローチでは、特に IE ではパフォーマンスの問題が発生します。
コードをコピーします コードは次のとおりです。
var startTime = new Date(); '; for (var i = 0; i
演算子が最適化されているようですが、IE は愚かな動作をします。
単項演算子
JavaScript では、文字列の前に単項演算子 " " を使用できます。これにより文字列が数値に変換され、変換が失敗した場合は NaN が返されます。
encodeURI と encodeURIComponent
window.encodeURI 関数を使用して URL をエンコードしますが、次の文字はエンコードされません。 「:」、「/」、「;」、「?」。window.encodeURIComponent は上記の文字をエンコードします。
例で説明します。
table.innerHTML は IE の読み取り専用属性です
多くの場合、次のようなノードの innerHTML 属性を通じてノードを埋めます。 >
コードをコピーします コードは次のとおりです。
var startTime = new Date(); var arr = []; i Firefox が表示されます。
演算子が最適化されているようですが、IE は愚かな動作をします。
単項演算子
JavaScript では、文字列の前に単項演算子 " " を使用できます。これにより文字列が数値に変換され、変換が失敗した場合は NaN が返されます。
コードをコピーします コードは次のとおりです。 2 '1'; // "21" 2 ( '1' ); // 3
文字列以外の前で使用した場合、次の順序で変換が試行されます。
valueOf() を呼び出し、toString() を呼び出して数値に変換します
コードをコピーします コード new Date; // 1242616452016 new Date === new Date().getTime(); // true new Date() === Number(new Date) // true
参考記事
encodeURI と encodeURIComponent
window.encodeURI 関数を使用して URL をエンコードしますが、次の文字はエンコードされません。 「:」、「/」、「;」、「?」。window.encodeURIComponent は上記の文字をエンコードします。
例で説明します。
コードをコピーします コードは次のとおりです。 'index.jsp?page =' encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp" 'index.jsp?page=' encodeURIComponent('/page/home.jsp'); // "index.jsp?page=/page/home.jsp"
したがって、URL をエンコードするときに encodeURIComponent を選択することがよくあります。 table.innerHTML は IE の読み取り専用属性です
多くの場合、次のようなノードの innerHTML 属性を通じてノードを埋めます。 >
コードをコピーします コードは次のとおりです。
>
コードをコピーします コードは次のとおりです: document.getElementById('container1').innerHTML = "Hello World !";
ただし、IE で table.innerHTML
を設定するとエラーが発生します:
コードをコピー コードは次のとおりです:
