[ES 6]常用ES 6を素早く把握する(一)

4151 ワード
javascript es 6
このシリーズの文章は速くES 6入門文法を掌握することに適しています.ES 6を深く勉強したい仲間は阮一峰先生の「ECMAScript 6入門」を見て、20%の知識を勉強して80%の仕事を完成します.
ES 6について
ES 6を紹介します.詳しくは自分でbaiduかGoogleを紹介してください.
  • ES 2015=ES 6
  • ES 6は、一般的にES 2015、ES 2016、ES 2017などを指し、JavaScriptの次世代規格
    • を指す.
  • 現代ブラウザはほとんどの(90%+)のオリジナルES 6をサポートしていますが、古いバージョンのブラウザに対応するために、通常はBabelを使用してES 6コードをES 5コードに変換します.
    • 定数変数let and const
    まず定数と変数の概念について話しましょう.
    定期的には、ゲームアカウントのID、変数は、ゲーム名、ゲームパスワードなどのような、一回の割当を行っても変更されないような値を言います.
    以前のJavaScriptでは、定数と変数を区別しないすべてのvarを使用してグローバル変数を定義しています.
    var userId = 666;
var userPassword = "mimabunengshuo";
    現在ES 6ではletを使ってローカル変数を定義し、constではローカル定数を定義します.
    const userId = 666;
let userPassword = "wobuzidao";
    なぜ局部変数と定数が必要ですか?
    //        0   9 ，  10 
//   var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//   let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//         0   9
letI();//
    もしvarを使用してこの需要を完成しなければならないならば、クローズドバッグを使ってもいいです.今回は多くのことを議論しません.
    function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//
    構造割り当て
  • 左右の両側は同じデータタイプでなければなりません.或いは、変換後は同じタイプです.
  • 等号の右の値は、行列またはオブジェクトであるべきです.オブジェクトや配列ではなく、まずオブジェクトに変換します.
  • 定義と割当は同期して完了しなければならない.
    たとえば変数を宣言する
    let a = 1;
let b = 2;
let c = 3;
    ES 6は次のように書くことができます.
    let [a, b, c] = [1, 2, 3];
    一般例1.変数の値を交換する
    let x = 1;
let y = 2;

[x, y] = [y, x];
    2.JSONデータの構造形成値を抽出することは、特にJSONオブジェクト中のデータを抽出するのに役立つ.
    let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]
    矢印関数
    ES 6の前に関数を定義するとこう書きます.
    var f = function (i){
    return  i + 5;
}
    矢印関数があれば、このように書いてもいいです.
    let f = (i) => {
    return  i + 5;
}
    あまり変わらないようです.
  • 矢印関数がパラメータが一つしかない場合は、「()」を省略してパラメータのみを書くことができます.返す語句が一つしかない場合は、「{}」を省略しても良いし、return文
    • を省略しても良いです.
    上のものはこのように書いてもいいです.
    let f = i => return  i + 5;
    矢印関数のthisは固定されています.定義された時のオブジェクトを指します.使用時のオブジェクトではありません.
    ES 6の矢印関数をES 5の一般関数に変換すると、矢印関数のthisが参照外層のthisであることが分かります.
    // ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}
    文字列テンプレート
  • 文字列テンプレートは、主に変数と文字列の混合を処理するために使用されます.
  • 文字列は、反引用符(`文字列`)を使用して文字列を包み、任意のJavaScript表現
    • をドル符で括弧を大きくする.
  • 文字列テンプレートにはエコー
    • が使用されます.
    例えば、JavaScriptを使ってHTMLを生成します.元素のテキストは自分のJavaScriptを使って演算したいです.
    $('#dom').append(
  '
          ：' + userName + '
     ' +
  '       ' + oNumber +' 
    '
);
    ES 6は比較的簡単です
    $('#dom').append(
  `
          ：${userName}
          ${oNumber} 
    `
);
    対象に向ける
  • クラスは一つのクラスを定義するために使用されます.
  • extensはどのクラスを受け継ぐかを表します.
  • constructorコンストラクタは、共有されている
    • 以外のプライベート方法と属性を定義することができます.
  • super()は、constructorにおいて、この方法を使用して親クラスのthisオブジェクト
    • を継承する.
    コードの例
    class user {
    constructor() {
        this.name = '  1';
    }
    sayHello(say) {
        console.log(`${this.name}，     ：${say}`);
    }
}

let user1 = new user();
user1.sayHello('  '); //  1，     ：  

class xiaoming extends user {
    constructor() {
        super();
        this.name = '  ';
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello('  '); //  ，     ：  
let user2 = new user();
user2.sayHello('  ')//  1，     ：
    [ES 6]常用ES 6(一)［ES 6］を素早くマスターし、常用ES 6(二)を素早く習得する.
    Sundayアルゴリズム-JavaScript実現