複数のヒップスターJavaScriptハック

JavaScriptは面白いプログラミング言語です。

コードに間違いを犯すことへの絶え間ない恐怖は、常に考えさせられます。 常に頭の中でコードを実行する必要があるため、プログラミングスキルが向上します。他に方法はありません。

それが、コードがきちんとしていて、コンパクトで、なめらかであることが重要である理由です。 あなたが恋に落ちることができるもの。 そうしないと、JavaScriptがあなたを怖がらせるかもしれません。

私はあなたのために、私を喜ばせる興味深いスニペットを選択しました。私自身は、多くのスペースを占有する退屈なコードの代わりに使用しています。 それらのいくつかはコードを短くし、他のものはよりシャープで明確になります。 さらに2つがデバッグハックです。

これはすべて、ソースコードを使用してプロジェクトを学習することで学びましたが、ここでは、それらを発明したのは私であるかのように書きます。

ヒップスターハック＃1-関数呼び出し

if / elseブロックは本当に嫌いです。これを取り除くと、ブール値に基づいて関数呼び出しを行うことができる便利なトリックができます。

//  if (success) { obj.start(); } else { obj.stop(); } //   var method = (success ? 'start' : 'stop'); obj[method](); 

ヒップスターハック＃2-文字列結合

既知の事実-文字列は他の文字列と友達です。 遅かれ早かれ、それらのいくつかを連結する必要があります。 「+」の使用はあまり好きではないので、参加してください。

 ['first', 'name'].join(' '); // = 'first name'; ['milk', 'coffee', 'suger'].join(', '); // = 'milk, coffee, suger' 

Hipster hack＃3-デフォルト演算子||

JavaScriptでは、オブジェクトの内容を正確に知ることはできません。 関数の引数として取得する場合もあれば、ネットワーク経由で渡される場合や、設定で読み取る場合もあります。 いずれの場合でも、便利な演算子||を使用できます 最初の値がfalseの場合、2番目の値を返します。

 //  'No name'  myName  (null  undefined) var name = myName || 'No name'; //  options  ,      var doStuff = function(options) { options = options || {}; // ... }; 

Hipster Hack＃4-セキュリティオペレーター&&

デフォルトの演算子と同様に、これは非常に便利です。 これにより、ほぼすべてのIFを取り除くことができ、コードがより快適になります。

 //  if (isThisAwesome) { alert('yes'); // it's not } //  isThisAwesome && alert('yes'); //      var aCoolFunction = undefined; aCoolFunction && aCoolFunction(); //  ,       

ヒップスターハック＃5-オペレーターXXX

このオペレーターは著作権法で完全に保護されています。 コードを記述し、何らかの理由でオンラインに移行するか、別のコードを編集する必要がある場合、 xxx演算子を使用して行を追加します。 この場所のコードは最愛の人によって中断され、後で開始されたものを終了することが可能になります。 文字列xxxは 、通常のコードでは検出されないため、完全に検索されます。通常、TODOでコメントを付ける必要はありません。

 var z = 15; doSomeMath(z, 10); xxx //  .  ,     TODO doSomeMoreMath(z, 15); 

ヒップスターハック＃6-時間測定

どちらが速いかを知ることに興味があります：i ++またはi--のループ。 私は個人的にしません。 興味のある人は、コンソールへの時間の測定結果の出力を使用できます。 これは、イベントループをブロックする操作の速度を知る必要がある場合に役立ちます。

 var a = [1,2,3,4,5,6,7,8,9,10]; console.time('testing_forward'); for (var i = 0; i < a.length; i++); console.timeEnd('testing_forward'); // : testing_forward: 0.041ms console.time('testing_backwards'); for (var i = a.length - 1; i >= 0; i--); console.timeEnd('testing_backwards'); // : testing_backwards: 0.030ms 

Hipster Hack＃7-デバッグ

あるJava開発者からこのトリックを学びました。 なぜ彼が彼について知っていたのか全くわからないが、私は知らない。 しかし、それがそうであっても、それ以来、私はそれを常に使用しています。 デバッガーをコードに入力すると、デバッガーはこの行で停止します。

 var x = 1; debugger; //    x++; var x = Math.random(2); if (x > 0.5) { debugger; //   ... } x--; 

Hipster Hack＃8-オールドスクールデバッギング

行ごとのデバッグの代わりに、コードのいくつかの場所で変数の値を表示することが常に好きでした。 あなたが私のような人なら、いくつかのプライベート変数をグローバルスコープに入れる必要があるかもしれません。 主なことは、プロダクションに渡す前にコードをクリーンアップすることを忘れないことです。

 var deeplyNestedFunction = function() { var private_object = { year: '2013' }; //    : pub = private_object; }; //     (Chrome dev tools, firefox tools,  ..) pub.year; 

Hipster Hack＃9-超軽量テンプレート

まだ文字列を連結するために+を使用していますか？ 行をデータと結合するより良い方法があります。 テンプレートと呼ばれ、素晴らしい2.5行のコードフレームワークがあります。

 var firstName = 'Tal'; var screenName = 'ketacode' //   'Hi, my name is ' + firstName + ' and my twitter screen name is @' + screenName; //  var template = 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}'; var txt = template.replace('{first-name}', firstName) .replace('{screen-name}', screenName); 

あなたはすでにそれを知っていましたか？

そして私が個人的に発明した演算子XXXでさえ？ はい、あなたは本当のヒップスターハッカーです！