Javascript で注意する必要がある詳細は何ですか?

1. ==
の代わりに === を使用する JavaScript では、===|!== と ==|!= という 2 つの異なる等価演算子が使用され、比較演算では前者を使用することがベスト プラクティスです。
「両側のオペランドの型と値が同じ場合、=== は true を返し、!== は false を返します。」 - JavaScript: Language Essence
ただし、== と!を使用する場合は、 = の場合、型が異なる状況が発生する可能性があります。この場合、オペランドの型は強制的に同じになって比較されるため、期待した結果が得られない可能性があります。
2.Eval == Evil
最初は慣れないかもしれませんが、「eval」を使用すると JavaScript のコンパイラにアクセスできます (注釈: これは非常に強力であるようです)。基本的に、文字列をパラメーターとして eval に渡して実行できます。
これは、スクリプトのパフォーマンスを大幅に低下させるだけでなく (注釈: JIT コンパイラーは文字列の内容を予測できず、プリコンパイルと最適化もできません)、実行されるテキストのペイロードが大きすぎるため、セキュリティ上の大きなリスクももたらします。権威者よ、近づかないでください。

3. 省略しても問題は解決しない可能性があります
技術的には、ほとんどの中括弧とセミコロンを省略できます。ほとんどのブラウザは次のコードを正しく理解します:

if(someVariableExists) 
    x = false

次に、次のようになった場合:

if(someVariableExists) 
   x = false 
   anotherFunctionCall();

上記のコードはこれと同等であると考える人もいるかもしれません:

if(someVariableExists) { 
   x = false; 
   anotherFunctionCall(); 
}

残念ながら、この理解は間違っています。 。実際の意味は次のとおりです:

if(someVariableExists) { 
   x = false; 
} 
anotherFunctionCall();

上記のインデントが中括弧のような錯覚を与えやすいことに気づいたかもしれません。当然のことですが、これはひどい行為であり、何としても避けるべきです。中括弧を省略できるケースは 1 つだけ、つまり 1 行しかない場合ですが、これについては議論の余地があります。

if(2 + 2 === 4) return 'nicely done';

雨の日の計画を立てましょう
おそらく、いつか if ブロックにさらにステートメントを追加する必要が生じるでしょう。この場合、このコードを書き直す必要があります。結論 – 省略は地雷原です。

4. スクリプトをページの下部に配置します
覚えておいてください。主な目的は、ページをできるだけ早くユーザーに表示することです。スクリプトが読み込まれるまで、ブラウザは続行できません。以下のコンテンツをレンダリングします。したがって、ユーザーはより長い待ち時間を余儀なくされることになります。
JS がエフェクトを強化するためだけに使用される場合 (ボタンのクリック イベントなど)、本文の終わりの直前にスクリプトをすぐに配置します。これは間違いなくベストプラクティスです。

5. For ステートメント内での変数の宣言は避けてください
長い for ステートメントを実行する場合は、ステートメント ブロックをできるだけ簡潔にしてください。例:
おっと:

for(var i = 0; i < someArray.length; i++) { 
   var container = document.getElementById(&#39;container&#39;); 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}

配列の長さは次のようにする必要があることに注意してください。ループを通過するたびに計算され、「container」要素をクエリするために dom を横断する必要があるたびに、効率は非常に低くなります。
提案:

var container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len;  i++) { 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}

6. 文字列を構築する最良の方法
配列やオブジェクトをトラバースする必要があるときは、常に「for」ステートメントについて考える必要はなく、創造的になり、いつでも見つけることができます。より良いもの 例えば、次のようなアプローチがあります。

var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = &#39;<ul><li>' + arr.join('</li><li>') + '</li></ul>';

私はあなたの神ではありませんが、信じてください (信じられない場合は自分で試してください) - これが断然最速の方法です!
ネイティブ コード (join() など) を使用すると、システムが内部で何を行うかに関係なく、通常は非ネイティブ コードよりもはるかに高速になります。

7. グローバル変数を減らす
「複数のグローバル変数が 1 つの名前空間の下に編成されている限り、他のアプリケーション、コンポーネント、またはクラス ライブラリとの不正な相互作用の可能性は大幅に減少します 」—Douglas Crockford

var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name// 更好的做法var DudeNameSpace = { 
   name : 'Jeffrey', 
   lastName : 'Way', 
   doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

8. コードにコメントを追加します 不要に思えますが、信じてください。コードにさらに合理的なコメントを追加してください。数か月後にプロジェクトを振り返ったとき、最初の考えを思い出せないかもしれません。あるいは、同僚の 1 人がコードを変更する必要がある場合はどうすればよいでしょうか?全体として、コードにコメントを追加することは重要な部分です。

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]); 
}

9. プログレッシブエンハンスメントを採用 JavaScript が無効な場合でもスムーズな機能低下を保証します。 「訪問者のほとんどはすでに JavaScript を有効にしているので、心配する必要はありません。」と私たちは常に考えがちですが、これは大きな誤解です。
JavaScript をオフにして、美しいページがどのように見えるかを少し時間を取って確認したことがありますか? (これは、Web Developer ツールをダウンロードすることで簡単に実行できます (翻訳者注: Chrome ユーザーはアプリ ストアでダウンロードし、IE ユーザーはインターネット オプションで設定します))。しかし、これにより Web サイトが壊れる可能性があります。経験則として、JavaScript が無効であることを前提としてサイトを設計し、それに基づいてサイトを徐々に強化していきます。


10. 文字列パラメーターを「setInterval」または「setTimeout」に渡さないでください。次のコードを検討してください:

setInterval( 
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000 );

setInterval(someFunction, 3000);

with (being.person.man.bodyparts) { 
   arms = true; 
   legs = true; 
}

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true;

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true;

ar o = new Object(); 
o.name = 'Jeffrey'; 
o.lastName = 'Way'; 
o.someFunction = function() { 
   console.log(this.name); 
}

var o = { 
   name: 'Jeffrey', 
   lastName = 'Way', 
   someFunction : function() { 
      console.log(this.name); 
   } 
};

var a = new Array(); 
a[0] = "Joe"; 
a[1] = 'Plumber';// 更好的做法：var a = ['Joe','Plumber'];

var someItem = 'some string'; 
var anotherItem = 'another string'; 
var oneMoreItem = 'one more string';// 更好的做法var someItem = 'some string', 
    anotherItem = 'another string', 
    oneMoreItem = 'one more string';

function TimeTracker(){ 
 console.time("MyTimer"); 
 for(x=5000; x > 0; x--){} 
 console.timeEnd("MyTimer"); 
}