JS ES6サプリメント

補助点：1、CONST 2、3テンプレート文字列、関数矢印4、5モノマーオブジェクトモデル、オブジェクト指向を聞かせ

まず、変数の定義

、私が持っています

特徴：

1、グローバル変数の定義

図2は、定義を繰り返すことができます

3、変数名のアップグレード

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0"> 
    < HTTP-当量=メタ"X - UA互換"コンテンツ= "IE =エッジ"> 
    <タイトル>宣言変数</タイトル> 
</ head> 
<body> 
    <SCRIPT> 
        { 
            VAR A = 66 ; 
            はconsole.log（ ' 「+ ; A）
        } 
        // 可変ブロックレベルのスコープでグローバルに使用することができる
        // 1.varグローバル変数で定義されている 
        OUT「+はconsole.log（」; A）
         // 2。varは変数を再定義する
        のvar A = 88 ; 
        にconsole.logを（ '新しい新しいです' +A）;
         // 3.変数名持ち上げ
        // プロセスVAR bを- >印刷bを高める、無割当結果B：未定義 
        はconsole.log（B）を;      // 未定義
        するvar B = 10 ;
     </ SCRIPT> 
</ボディ> 
</ HTML>

B、聞かせて

特徴：

図1に示すように、可変ブロック・レベル

2、同じスコープ内で、再定義することはできません

図3は、変数名のアップグレードをサポートしていません。

{ 
    LETのB = 5 ; 
    はconsole.log（ 'B1' 、B）
} 
// 1.let宣言ブロックレベルの変数は、
// はconsole.log（ 'B2'、B）; // Bが定義されていない 
のlet B = 10 。
console.log（ 'B3' 、B）

// 2.let再宣言されていない変数は
// のlet B = 20であり; 
// はconsole.log（ 'B4'、B）//識別子'B'は、既に宣言されてい

// 3.可変リフトがサポートしていません聞かせて 
はconsole.log（C）を;      // 前のアクセス'C'初期化することはできません 
= 2のlet C;

C、CONST

特徴：

1、定数を定義

図2は、同じスコープ内で、再定義しません

3可変リフトをサポートしていません。

10 =定数;
 // 定義1.constは定数を変更することができず、一定である
// A = 20; 
// //定数変数代入にはconsole.log（A）

// 2.ステートメント繰り返すことができない
// CONSTを= 20であり; 
// はconsole.log（A）//識別子'A'は既に宣言されてい


// 定義3. CONST変数、持ち上げ変数をサポートしていない
にconsole.log（B）を、
CONST B = 30;    // アクセスすることができません初期化する前に、「B」

第二に、テンプレート文字列

図1に示すように、バッククォート（テーブルキー、上キー）

2、形式：変数名$ {}

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>字符串模板</ TITLE> 
</ HEAD> 
<BODY> 
    <SCRIPT> VAR名= 'トム。
    VaRの年齢= 24 ;
    // 注意：// 1.反引号// 。2 $ {变量名} のvar情報= `$ {名前}、今年の$ {年齢}岁！`; 
    console.log（情報）     </スクリプト> 
<

第三に、関数矢印

、はじめに

フォーマット：

F =関数（a、b）は{} ---> F =（A、B）=> {}

注意：

図1に示すように、パラメータが数値である場合、括弧を省略することができます

2限りリターン{}として、{}書き込まない省略してもよいです

ピットB、矢印機能

1、この

この伝統的な機能、オブジェクトの呼び出しへのポイント

オブジェクトのオブジェクトを宣言するために矢印のこの機能、

// オブジェクトリテラルの実施形態を作成
するvar人= { 
    名：「トム、
    年齢： 24 、
    INFO：関数（）{
         // これは人の両方を指す。1.通常の関数呼び出しオブジェクト 
        はconsole.log（この）;    // {名前： "トム"、年齢：24、INFO：ƒ} 
    } 
}; 
person.inf0（）; 

// 作成したオブジェクトリテラルの実施形態の
VARの PERSON2 = { 
    名： 'アレックス'は、
    年齢： 43であり、
    （）：インフォメーション => {
         // オブジェクトや窓を宣言するために、この矢印ポインティング1.機能
        console.log（この）;  // ウィンドウ{のpostMessage：ƒ、ぼかし：ƒ、フォーカス：ƒ、クローズ：ƒ、親：窓、...} 
    } 
}。

person2.info（）;

2、引数

    // 2.箭头函数不能使用引数
    のvar FOO = 関数（）{ 
        にconsole.log（引数）。  // 引数（3）[1、2、3、呼び出し先：ƒ、シンボル（Symbol.iterator）：ƒ] 
    } 
    FOO（ 1、2、3 ）。

    VaRのバー=（）=> { 
        にconsole.log（引数）。     // 捕捉されなかっにReferenceError：引数が定義されていない
    } 
    バー（ 3、2、1）。

第四に、モノマーオブジェクトモデル

目的：このピット矢印の機能を解決するために

// オブジェクトリテラルの実施形態を作成
するvar人= { 
    名：「トム、
    年齢： 34である、
     // フォーマットの比較：
    @ （）=> {}：情報
    // 情報（）{} 
    {）（情報を
        にconsole.logを（この .nameの）;      // トム
    } 
} 
person.info（）;

第五に、オブジェクト指向

1、ES5

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0"> 
    < HTTP-当量=メタ"X-UA-Compatible-"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
</ HEAD> 
<BODY> 
    <SCRIPT> // オブジェクトのコンストラクタを作成するための方法、名前に注意を払います大文字の関数人（名前、年齢）{ 
        self.name = 名; 
        self.age = 年齢; 
    } // オブジェクト作成する方法 
    Person.prototypeを。= showname 関数（）{ 
        にconsole.log（self.name）; 
    } 
　　 //オブジェクトインスタンスVARを
    
    
    
    P1 = 新しい人（ 'トム'、24 ）; 
    p1.showname（）;      // トム 
    </スクリプト> 
</ BODY> 
</ HTML>

ES6

// クラスの定義
クラス人{
     // コンストラクタの
    コンストラクタ（名前、年齢）{ 
        self.name = 名; 
        self.age = 年齢; 
    } 
    // カスタムメソッド
    showname（）{ 
        にconsole.log（self.name）; 
    } 
} 

// オブジェクトインスタンス化
するvar P2 = 新しい新しい人（ 'トム'、24 ）;
 //は、メソッド呼び出し 
p2.shownameを（）;   // トム

注意：オブジェクト指向のようなES5オブジェクト指向のオブジェクト指向構文よりも構文ES6を

おすすめ