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 属性はありますが、スライス、プッシュ、ソートなどの関数はありません。そこで、引数 にこれらにのみ使用できる関数を持たせる方法配列？
言い換えると、引数を実数の配列にするにはどうすればよいでしょうか?

コードをコピー コードは次のとおりです。

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 ;次に、次のように配列内の最大値を見つけることができます:

コードをコピー コードは次のとおりです:

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 コンテキストを作成したい場合は、自己実行の匿名関数を使用できます: