最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptベストプラクティス


グローバル変数を避け、避けnew避ける==避けるためeval()


グローバル変数を避けてください

グローバル変数の使用を最小限に抑えます。

これは、すべてのデータ・タイプ、オブジェクト、及び機能を含みます。

グローバル変数と関数は、他のスクリプトで上書きすることができます。

代わりに、ローカル変数を使用し、使用方法を学習クロージャを


常にローカル変数を宣言

関数内で使用されるすべての変数はローカル変数として宣言する必要があります。

ローカル変数は使用して宣言しなければならない varそうでない場合は、グローバル変数になるだろう、キーワード。

strictモードでは宣言されていない変数を許可していません。


トップ上の宣言

各スクリプトや関数の上部にあるすべての宣言を置くのに良いコーディング習慣です。

この意志:

  • クリーンなコードを与えます
  • ローカル変数を探すために単一の場所を提供します
  • それが簡単に不要な(暗黙の)グローバル変数を回避するようにしてください
  • 不要な再宣言の可能性を減らします
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

これはまた、ループ変数のために行きます:

// Declare at the beginning
var i;

// Use later
for (i = 0; i < 5; i++) {

デフォルトでは、JavaScriptがトップ(JavaScriptの巻上げ)にすべての宣言を移動します。


変数の初期化

あなたがそれらを宣言するときに変数を初期化するのは良いコーディング習慣です。

この意志:

  • クリーンなコードを与えます
  • 変数を初期化するための単一の場所を提供します
  • 未定義の値を避けます
// Declare and initiate at the beginning
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

変数を初期化すると、意図された使用(と意図したデータ型)のアイデアを提供します。


数値、文字列、またはブールオブジェクトを宣言することはありません

常にプリミティブ値として数値、文字列、またはブール値を扱います。 ていないオブジェクトとして。

オブジェクトとしてこれらの型を宣言すると、実行速度を遅くし、厄介な副作用を生成します。

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
»それを自分で試してみてください

またはさらに悪いことに:

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.
»それを自分で試してみてください

使用しないでくださいnew Object()

  • 使用{}の代わりにnew Object()
  • 使用""の代わりに、 new String()
  • 使用0の代わりにnew Number()
  • 使用falseの代わりにnew Boolean()
  • 使用[]の代わりに、 new Array()
  • 使用/()/の代わりにnew RegExp()
  • 使用function (){}の代わりにnew Function()

var x1 = {};           // new object
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array object
var x6 = /()/;         // new regexp object
var x7 = function(){}; // new function object
»それを自分で試してみてください

自動型変換の用心

数値が誤って文字列またはに変換することができることに注意してくださいNaN (非数)。

JavaScriptは弱い型付けされます。 変数は、異なるデータ型を含むことができ、変数は、そのデータ型を変更することができます。

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number
»それを自分で試してみてください

数学演算を実行する場合、JavaScriptは数値を文字列に変換することができます:

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
»それを自分で試してみてください

文字列から文字列を引くと、エラーが発生したが返していないNaN (非数)を:

"Hello" - "Dolly"    // returns NaN
»それを自分で試してみてください

使用===の比較

==比較演算子は常に比較の前に(一致するタイプに)変換します。

===値と型のオペレータ力比較:

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false
»それを自分で試してみてください

パラメータのデフォルト値を使用します

機能が不足している引数を指定して呼び出された場合は、不足している引数の値がに設定されているundefined

未定義の値は、あなたのコードを壊すことができます。 引数にデフォルト値を割り当てることは良い習慣です。

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
»それを自分で試してみてください

で、関数のパラメータと引数についての続きを読むファンクションのパラメータ


デフォルトであなたのスイッチを終了

常にデフォルトを使用してswitch文を終了します。 あなたが考えている場合でも、それは必要ありません。

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    default:
        day = "Unknown";
}
»それを自分で試してみてください

使用しないようにeval()

eval()関数は、コードなどのテキストを実行するために使用されます。 ほとんどの場合、それを使用する必要はありません。

それは、任意のコードが実行されることを可能にするので、それはまた、セキュリティ上の問題を表します。