この記事では、JavaScriptに関する12のヒントを紹介します。これらのヒントは、実際の作業でいくつかの問題を解決するのに役立ちます。
使用!!ブール値を変換するオペレーター
変数が存在するかどうかを確認するか、値に有効な値があるかどうかを確認する必要がある場合があり、それが存在する場合、それは真実に戻ります。そのような検証を行うために、私たちはそれを使用することができます!!実装するオペレーターは非常に便利でシンプルです。変数の場合、検出に!!変数を使用できます。変数の値が:0、null、 ""、未定義、またはnanである限り、それはfalseを返し、それ以外の場合はtrueを返します。たとえば、次の例:
functionアカウント(Cash){this.cash = cash; this.hasmoney = !! cash;} var account = new Account(100.50); console.log(account.cash); // 100.50Console.log(account.hasmoney); // truevar emptyAccount = new Account(0); console.log(emptyaccount.cash); // 0console.log(emptyaccount.hasmoney); // 間違いこの例では、account.cashの値が0より大きい限り、account.hasmoneyによって返される値が真です。
+を使用して、文字列を数値に変換します
このトリックは非常に便利です。非常に単純で、文字列データと交差することにより数値に変換できます。ただし、文字列データにのみ適しています。そうしないと、次の例など、NANが返されます。
function tonumber(strnumber){return +strnumber;} console.log(tonumber( "1234")); // 1234Console.log(tonumber( "acb")); // nanこれは日付にも機能します。この場合、タイムスタンプ番号を返します。
console.log(+new date())// 1461288164385
および条件付き
このようなコードがある場合:
if(conected){login();}また、変数を省略し、&&を使用して連結することもできます。たとえば、上記の例は次のように省略できます。
conected && login();
次のコードに示すように、いくつかのプロパティまたは関数がオブジェクトに存在する場合は、検出を行うこともできます。
user && user.login();
使用||オペレーター
ES6にはデフォルトのパラメーター機能があります。この機能を古いブラウザでシミュレートするには、||演算子を使用でき、デフォルト値は2番目のパラメーターとして渡されます。最初のパラメーターによって返される値がfalseの場合、2番目の値はデフォルト値と見なされます。次の例のように:
function user(name、age){this.name = name || 「オリバークイーン」; this.age = age || 27;} var user1 = new user(); console.log(user1.name); // Oliver Queenconsole.log(user1.age); // 27var user2 = new user( "Barry Allen"、25); console.log(user2.name); // Barry allenconsole.log(user2.age); // 25ループ内のcache array.length
このトリックは非常にシンプルであり、これは大きな配列ループを扱うときにパフォーマンスに非常に大きな影響を与えます。基本的に、誰もがこのような同期の反復を書くでしょう:
for(var i = 0; i <array.length; i ++){console.log(array [i]);}それが小さな配列の場合、これは素晴らしいことです。大きな配列を扱っている場合、このコードは各反復で配列サイズを再計算し、多少の遅延を引き起こします。この現象を回避するために、array.lengthをキャッシュとして使用できます。
var length = array.length;
このように書くこともできます。
for(var i = 0、length = array.length; i <length; i ++){console.log(array [i]);}オブジェクトのプロパティを検出します
このトリックは、いくつかのプロパティが存在するかどうかを検出し、未定義の機能やプロパティの実行を避ける必要がある場合に役立ちます。いくつかの相互互換性のあるブラウザコードをカスタマイズする予定がある場合は、このヒントを使用することもできます。たとえば、document.queryselector()を使用してIDを選択し、IE6ブラウザーと互換性のあるものにしますが、この関数はIE6ブラウザーには存在しません。したがって、この演算子を使用して、次の例など、この関数が存在するかどうかを検出することが非常に便利です。
if( 'querySelector' in document){document.queryselector( "#id");} else {document.getElementbyId( "id");}この例では、ドキュメントにQuerySelector関数が存在しない場合、ドキュメントが呼び出されます。
配列の最後の要素を取得します
array.prototype.slice(begin、end)を使用して、開始と終了の間の配列要素を取得します。 endパラメーターを設定しない場合、配列のデフォルトの長さ値は最終値と見なされます。しかし、一部の学生は、この関数がパラメーターとしてネガティブ値を受け入れることができることを知らないかもしれません。ネガティブ値を開始の値として設定すると、配列の最後の要素を取得できます。のように:
var array = [1,2,3,4,5,6]; console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
配列の切り捨て
このトリックは、主に配列のサイズをロックするために使用され、配列内のいくつかの要素を削除するために使用すると非常に便利です。たとえば、アレイには10個の要素がありますが、最初の5つの要素のみを使用するだけで、配列で配列を切り捨てることができます。Length= 5。次の例のように:
var array = [1,2,3,4,5,6]; console.log(array.length); // 6array.length = 3; console.log(array.length); // 3Console.log(array); // [1,2,3]
すべてを交換します
string.replace()関数を使用すると、文字列または正規表現を使用して文字列を置き換えることができます。この関数自体は、最初の文字列のみを置き換えます。ただし、正規表現で /gを使用して、塗装機能をシミュレートすることができます。
var string = "John John"; Console.log(String.Replace(/hn/、 "ana")); // "Joana John" Console.log(String.Replace(/hn/g、 "ana"))); //「ジョアナ・ジョアナ」
アレイをマージします
2つの配列をマージする場合は、通常、array.concat()関数を使用します。
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
この関数は、新しく作成されたアレイを保存するために多くのメモリを消費するため、2つの大きな配列をマージするのに適していません。この場合、array.pus()を使用できます。適用(arr1、arr2)を使用して、代わりに新しい配列を作成できます。この方法は、新しい配列を作成するために使用されるのではなく、メモリの使用量を削減しながら、1番目と2番目の数値を一緒に組み合わせるだけです。
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.push.apply(array1、array2)); // [1,2,3,4,5,6];
ノデリストを配列に変換します
document.queryseLectorall( "p")関数を実行すると、DOM要素の配列、つまりNodeListオブジェクトを返す場合があります。ただし、このオブジェクトには、sort()、reduce()、map()、filter()などの配列の関数はありません。これらのネイティブ配列関数関数を使用するには、ノードリストを配列に変換する必要があります。 [] .slice.call(Elements)を使用して実装できます。
var elements = document.queryselectorall( "p"); // nodelistvar arrayelements = [] .slice.call(elements); //これで、ノデリストはarrayvar arrayelements = array.from(elements)です。 //これはノデリストを配列に変換する別の方法です
配列要素の縮小
配列要素のシャッフルの場合、Lodashなどの外部ライブラリを使用する必要はありません。これを行うだけです。
var list = [1,2,3]; console.log(list.sort(function(){math.random() - 0.5}); // [2,1,3]要約します
今、あなたはいくつかの便利なJavaScriptのヒントを学びました。これらのヒントが職場でのトラブルを解決するのに役立つことを願っています。そうしないと、この記事が役立つでしょう。優れたJavaScriptのヒントがある場合は、コメントでそれらを共有してください。
上記の12の非常に実用的なJavaScriptのヒント[推奨]は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。