ホームページ > 記事 > ウェブフロントエンド > 収集する価値のある 21 の Javascript ヒント_JavaScript ヒント

収集する価値のある 21 の Javascript ヒント_JavaScript ヒント

WBOYオリジナル: 2016-05-16 17:01:28904ブラウズ

1 Javascript 配列を CSV 形式に変換します

まず、次のアプリケーションシナリオを考えてみましょう。JavaScript 文字 (または数値) 配列があり、これをカンマ区切りの CSV 形式ファイルに変換する必要があります。次に、次のヒントを使用できます。コードは次のとおりです:

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

var Fruits = ['apple', '桃'、'オレンジ'、'マンゴー'];
var str =fruits.valueOf();

出力: リンゴ、桃、オレンジ、マンゴー

このうち、valueOf()メソッドはJavaScriptの配列をカンマ区切りの文字列に変換します。 | で区切るなど、カンマを使用したくない場合は、次のように join メソッドを使用してください。

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

var Fruits = ['apple', '桃'、'オレンジ'、'マンゴー'];
var str = Fruits.join("|");

出力: リンゴ|桃|オレンジ|マンゴー

2 CSV 形式を Javascript 配列に変換して戻します

では、CSV 形式の文字列を Javascript 配列に変換するにはどうすればよいでしょうか?指定した文字を使用して分割するには、split() メソッドを使用できます。コードは次のとおりです。

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

var str = "リンゴ、桃、オレンジ、マンゴー" ;

var FruitsArray = str.split(",");

出力 FruitArray[0]: apple

3 インデックス

に基づいて配列から要素を削除します Javascript 配列から要素を削除する必要がある場合は、splice メソッドを使用できます。このメソッドは、渡されたパラメーター n (JavaScript 配列の 0 番目の位置から計算) に基づいて配列から n 番目の要素を削除します。

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

function RemoveByIndex(arr, Index) {

 arr .splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test [2] = 'Cat';
test[3] = 'Dog';
alert("要素を削除する前の配列: " test);
removeByIndex(test, 2);
alert( "要素を削除した後の配列: " test);

最終出力は Apple,Ball,Dog です

4 要素

の値に従って配列要素の値を削除します。 次のテクニックは、指定された値に基づいて配列内の要素を削除するものです。

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

function RemoveByValue(arr, val) {

 for (var i=0; i if(arr[i] == val) {
 arr.splice(i, 1);
 Break;
 } 
 }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
/ /somearray will 含まれる要素は "mon"、"wed"、"thur" です

もちろん、次のコードに示すように、プロトタイプメソッドを使用してそれを実現する方が良い方法です。

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

Array.prototype.removeByValue = function(val ) {

 for(var i=0; i if(this[i] == val) {
 this.splice(i, 1);
 Break;
 }
 }
}
//..
var somearray = ["mon", "tue", "wed", "thur"]
somearray.removeByValue ("火");

5 文字列を指定してメソッドを動的に呼び出す

場合によっては、実行時に既存のメソッドを動的に呼び出してパラメータを渡すことが必要になります。これを達成するにはどうすればよいでしょうか?次のコードが実行されます:

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

var strFun = "someFunction"; //someFunction は定義されたメソッド名です
var strParam = "これはパラメータです" //メソッドに渡されるパラメータです
var fn = window [strFun];

//メソッドを呼び出してパラメータを渡します
fn(strParam);

6 1 から N までの乱数を生成します

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

var random = Math.floor(Math. random() * N 1); 
//1 から 10 までの乱数を生成します
var random = Math.floor(Math.random() * 10 1); 
//乱数を生成します1 から 100 までの乱数
varrandom = Math.floor(Math.random() * 100 1);

7 ブラウザ終了イベントをキャプチャします

ユーザーがブラウザを閉じるときに、未保存のものを保存するように求めることがよくあります。コードは次のとおりです。

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

< body onbeforeunload= "fnUnloadHandler()">
…………

onbeforeunload() イベントのコードを記述するだけです

8 戻るボタンが押されたか確認します

同様に、ユーザーが戻るキーを押したかどうかを確認できます。コードは次のとおりです。

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

window.onbeforeunload = function() {
 return "あなたの仕事は失われます。";
};

9 フォームデータが変更されていないか確認します

場合によっては、ユーザーがフォームのコンテンツを変更したかどうかを確認する必要があります。フォームのコンテンツが変更されている場合は true を返します。変更されていない場合は false を返します。コードは次のとおりです:

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

function formIsDirty(form) {
 for (var i = 0; i  var element = form.elements[i];
 var type = element.type;
 if (type == "チェックボックス" || type == "ラジオ") {
 if (element.checked != element.defaultChecked) {
 == "パスワード" ||
 タイプ == "テキスト" || type == "textarea") {
 if (element.value != element.defaultValue) {
 return true ;
 }
 }
 else if (type == " select-one" || type == "select-multiple") {
 for (var j = 0; j < element.options.length; j ) 🎜> }
 }
 return false;
}

window.onbeforeunload = function(e) {
 e = e || 
 if (formIsDirty (document.forms["someForm"] )) {
 // IE および Firefox
 if (e) {
 e.returnValue = "未保存の変更があります。";
 }
 // Safari ブラウザ
 return "未保存の変更があります。";
 }
};




10 バック キーの使用を完全に無効にします
 


 次のヒントをページに配置すると、ユーザーが「戻る」ボタンをクリックするのを防ぐことができます。これは場合によっては必要になります。コードは次のとおりです: 

コードをコピー

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