ES 6のいくつかの新しい特性

19577 ワード

ES 6のいくつかの新しい特性
ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.S 6は2017年に大火と言われ、多くの人に頻繁に取り上げられ、React、React Native開発において広く使われています.比較的に深い学習のess 6は非常に必要です.私はいくつかのess 6関連の文法特性と詳細な使用説明をまとめました.
ES 6とは

es6    ECMAscript 2015

es 6はどんな新しい特性がありますか?
一、let
1.変数の昇格なし

console.log(a);
    let a = 4;
    // a is not defined

2.繰り返し説明してはいけません.

let a = 4;
    let a = 5;
    console.log(a);
    // Identifier 'a' has already been declared

3.臨時失効区(一時性死区)

var a = 5;
    function fn(){
        console.log(a);
        let a = 4;
    }
    fn();
    // a is not defined

4.ブロックレベルのスコープ(かっこで囲まれた領域)を持っています.
一例を見る

 var a = 5;
    function foo(){
        console.log(a); // undefined
        if(false){
            var a = 6;
        }
    }

これは明らかに私達が欲しい結果ではないです.

js es6

    for(let i = 0; i < 3; i++){
        console.log(i);
    }
    console.log(i);
    // 0 1 2 i is not defined

    {
        let a = 10;
    }
    console.log(a);
    // a is not defined

ありふれた閉ざし問題は、実質的にはブロックレベルのないスコープによる問題を解決するためです.
包みを閉じる

*     （   ）      （   ）
*                 
*         ，               ，           ，          
*     （      ） 
    (function(){
    //  ...   
    })();

 var aLi = document.getElementsByTagName('li');// len = n
    for(var i = 0; i < aLi.length; i++){
        aLi[i].onclick = function(){
            console.log(i);
        }
    }
    // n......n

   var aLi = document.getElementsByTagName('li');// len = n
    for(var i = 0; i < aLi.length; i++){
        (function(i){
            aLi[i].onclick = function(){
                console.log(i);
            }
        })(i)
    }
    // 0、1、2....n

forサイクルの本質はn個の"{}"から構成されていると理解でき、各括弧の中でletの役割領域は独立しているので、iの値をそれぞれ取得することができる.しかし、varにとって実質は作用領域であるため、iの値は各々保持できない.
二、const
エス6の前に定数を定義したいなら、普通プログラマが自分で約束します.

var NUM = 100;

すべての文字を大文字にする変数は定数として約束されていますが、本質は変数であります.

   const NUM = 100;
    NUM = 200;
    // Assignment to constant variable.

constで定義された定数は、そのアドレス値を変更することができません.ここでなぜアドレス値を強調しますか?下記のコードは非厳格モードで通過できます.

  const OBJ = {a: 100};
    OBJ.a = 200;
    console.log(OBJ.A);
    // 200

この時、これは穴ですね!どうすればいいですか?もし私達は常量の対象を定義したいならば?

   const OBJ = {a: 100};
    Object.freeze(OBJ);
    OBJ.a = 200;
    console.log(OBJ.a);
    // 100

これでいいです.
2.変数の昇格なし
3.ブロックレベルのスコープ
letとconst宣言の変数はwindowにかけません.
三、クラス
エス6の前に、クラスを定義したいです.functionでしかシミュレーションできません.

 function Person(){
        this.name = 'xxx';
    }
    Person.prototype.say = function(){

    }
    var person = new Person();

属性を原型に置くとどうなりますか?Person.prototype.name='xxx'のようです.通常のデータタイプについては問題ありませんが、参照の種類については、オブジェクトの変更は、クラスを継承するすべてのオブジェクトに影響を与えます.
1.文法

 class Person{
        constructor(name){
            this.name = name;
        }
        say() {
            console.log(this.name);
        }
    }
    var person = new Person();
    person.say();

2.継承の実現

    class Man extends Person{
        constructor(name, food){
            super(name, food); //            ，           
            this.food = food;
        }
        eat(){
            console.log(this.food);
        }
    }
    var man = new Man();
    man.say();

3.static静的方法/変数

 class Person{
        constructor(){
        }
        static say(){
            console.log(123); //             
        }
        static name(){
            return 'xxx'; //             
        }
    }
    Person.say();

S 6では、クラス内部に静的な方法しかないと規定されています.静的な属性がないと以下の表記は無効です.

 class Person{
        constructor(){

        }
        name: 2
        static name: 2
    }
    console.log(Person.name)
    // undefined

四、セット集合
Setは重複要素がないセットで、繰り返し追加は無効です.

    var s = new Set();
    s.add(1);
    s.add(2);
    // s.delete(2)    
    // s.clear()   
    // s.size()

1.Setを巡回

 var keys = s.keys(); //        
    for(var k of keys){
        console.log(k);
    }

    var values = s.values();
    for(var v of values){
        console.log(v);
    }

    var entries = s.entries(); //  key value          
    for(var e of entries){
        console.log(e);
    }

2.es 6の前にAray配列が重くなる問題
方法1:

 var arr = [1,2,3,4,1,1,1];
    function fn(arr){
        var map = {};
        var newArr = arr.filter(function(item, index){
            if(!map[item]){
                map[item] = true;
                return item;
            }
        });
        return newArr;
    }
    fn(arr);

方法二:

    var arr = [1,2,3,4,1,1,1];
    function fn(arr){
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(newArr.indexOf(arr[i]) === -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    fn(arr);

Aray.fromを利用する方法3:

  var arr = [1,2,3,4,1,1,1];
    function fn(arr){
        var s = new Set(arr);
        return Array.from(s);
    }
    fn(arr);

3.Arayは一回だけの要素を返します.

   var arr = [1,2,3,4,1,1,1];
    function fn(arr){
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(arr.indexOf(arr[i]) === arr.lastIndexOf(arr[i])){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    fn(arr);

五、Map(キーペア)

  var m = new Map();
    m.set('a',1);
    m.set('b',2);
    m.get('a'); // 1

    // m.delete('a')

オブジェクトの属性名は文字列とみなされますが、Mapのキーはすべてのデータタイプとなります.

forEach    Array、Set、Map。 
for of          。

六、アロw矢印関数
やっと矢印関数のコーナーに来ました.()=>{}これはとても簡潔で優雅な関数の書き方です.このように書いてもいいです.

 var fn = (item, index) => {console.log(item)}

このように書いてもいいです

 var fn = item => {console.log(item)}

このように書いてもいいです

 var fn = item => (item)
    fn(2) // 2

もっと簡潔にしてもいいです

 var fn = item => item
    fn(2) // 2

=>後は、括弧()を使って、結果を戻り値として表します.一方の行の結果は、パラメータが唯一の場合は省略してもいいです.前の()を省略してもいいですが、他のものは失われてしまいました.

 var fn = () => {
        console.log(arguments);
    }
    fn(2) // arguments is not defined

解決方法は以下の通りです.

   var fn = (...arg) => {
        console.log(arg);
    }
    fn(2) // [2]

矢印関数は構造関数としてはいけません.つまり、newコマンドを使ってはいけません.そうでないと、エラーが発生します.
矢印関数はデフォルトのthisの方向を変更します.
矢印関数は、関数の外側のthisを関数内部に同期させることができます.

   var aLi = document.getElementsByTagName('li');// len = n
    for(var i = 0; i < aLi.length; i++){
        aLi[i].onclick = function(){
            setTimeout(function(){
                console.log(this.innerHTML);
                //       ，  this        ， setTimeout window    ，  this  window
            })
        }
    }

Functionを矢印関数に変更すると正しく動作します.

    var obj = {
        a: 1,
        say: function(){
            console.log(this.a);
        }
    }
    obj.say() // 1

上から見たらこれは普通の結果ですね.矢印関数に変えたら.

   var obj = {
        a: 1,
        say: () => {
            console.log(this.a);
        }
    }
    obj.say() // undefined

矢印の関数がいいですが、整理場を見て使います.
七、強化された対象の字面量
相手の字面の量が強くなり、書き方がより簡潔で柔軟になり、同時に相手を定義する時にできることが多くなりました.具体的な表現は:
1、対象の字面量の中で原型2を定義することができます.定義方法は、Fnctionキーワード3を使わずに直接的に親の方法を呼び出すことができます.これにより、対象の字面量は前に述べた類概念とよりよく一致し、対象に向けたJavaScriptを作成する時に、より便利になりました.

//           
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //         human,     human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//   ‘breathing...
//      breathe  
worker.breathe();//   ‘breathing...

八、文字列テンプレート
文字列テンプレートは比較的簡単で分かりやすいです.ES 6では、アンチクォーテーションマーク`を使用して文字列を作成することができます.この方法で作成された文字列には、ドル記号と括弧で包まれた変数が含まれます.

//       
var num=Math.random();
//        console
console.log(`your num is ${num}`);

九、解体
自動解析配列またはオブジェクトの値.例えば、関数が複数の値を返す場合、通常はオブジェクトを返し、各値をこのオブジェクトの属性として返します.しかし、ES 6においては、この特性を利用して、直接に1つの配列に戻ることができ、その後、配列の値は自動的にその値を受信する変数に解析される.

var [x,y]=getVal(),//        
    [name,,age]=['wayou','male','secrect'];//    

function getVal() {
    return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//  ：x:1, y:2 
console.log('name:'+name+', age:'+age);//  ： name:wayou, age:secrect

十、パラメータのデフォルト値、不定パラメータ、拡張パラメータ
1.標準パラメータ値
今は関数を定義する時にパラメータのデフォルト値を指定できます.以前のように論理やオペレータを通して目的を達成する必要はありません.

	//            
	var name=name||'dude';
	console.log('Hello '+name);
}
//  ES6     
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}
sayHello();//  ：Hello dude
sayHello('Wayou');//  ：Hello Wayou
sayHello2();//  ：Hello dude
sayHello2('Wayou');//  ：Hello Wayou

2.不定パラメータ
不定パラメータは、関数でネーミングパラメータを使用して不定数を同時に受信する名前のないパラメータです.これは文法飴の一種で、以前のJavaScriptコードの中で、argments変数を通じてこの目的を達成することができます.不定パラメータの書式は、3つのピリオドと、すべての不定パラメータを表す変数名です.例えば、以下の例では、…xは、すべての着信add関数のパラメータを表している.

//          
function add(...x){
	return x.reduce((m,n)=>m+n);
}
//         
console.log(add(1,2,3));//  ：6
console.log(add(1,2,3,4,5));//  ：15

3.拡張パラメータ
拡張パラメータは、別の形式のシンタックス飴であり、配列またはクラスの配列を直接関数として使用することができます.

var people=['Wayou','John','Sherlock'];
//sayHello               ，     
function sayHello(people1,people2,people3){
	console.log(`Hello ${people1},${people2},${people3}`);
}
//                   ，               
sayHello(...people);//  ：Hello Wayou,John,Sherlock 

//    ，           ，         apply  
sayHello.apply(null,people);//  ：Hello Wayou,John,Sherlock

十一、for ofの値が遍歴されています.
for inサイクルは配列を巡回するために使われることを知っています.クラス配列やオブジェクト、ES 6に新しく導入されたfor ofサイクル機能は似ています.違いはサイクル毎にシーケンス番号ではなく値が提供されます.

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//   a,b,c
}

モジュール
ES 6規格では、JavaScript原生はmoduleをサポートしています.このJSコードを異なる機能に分割した小さい塊をモジュール化するという概念は、いくつかの三者規範において流行してきたものであり、例えば、CommonJSとAMDモードである.
異なる機能のコードをそれぞれ異なるファイルに記入し、各モジュールは共通インターフェース部分を導出し、モジュールの導入によって他のところで使用できます.

// point.js
module "point" {
    export class Point {
        constructor (x, y) {
            public x = x;
            public y = y;
        }
    }
}
 
// myapp.js
//       
module point from "/point.js";
//      ，          ，                 
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

十三、Proxies
Proxyは、対象者に何が起こったかを傍受し、これらの事件が発生した後に、いくつかの操作を実行することができます.一度に、私たちは一つの対象に対して強い追跡能力を持つようになりました.また、データーバインディングの面でも効果があります.

//          
var engineer = { name: 'Joe Sixpack', salary: 50 };
//      
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
//         
engineer = Proxy(engineer, interceptor);
//          
engineer.salary = 60;//     ：salary is changed to 60

十四、Symbools
私たちは対象がキーのセットであることを知っています.キーは通常文字列です.現在は文字列以外にも、smbolという値を対象としたキーを使うことができます.Symbolは基本的なタイプで、数字、文字列、ブールのように対象ではありません.Symbolは、smbol関数を呼び出すことによって生成され、この関数が返したsmbolは唯一である任意の名前パラメータを受信する.後はこの戻り値を対象とするキーが使えます.Symbolはまた、プライベート属性を作成するために使用されてもよく、外部から直接にsmbolをキーとする属性値にアクセスできません.

(function() {

  //   symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

})();

var c = new MyClass("hello")
c["key"] === undefined//       ，

十五、Promises
Promisesは非同期動作を扱うモデルであり、jQueryのdeferredオブジェクトなど、多くの三方倉庫で実現されています.非同期要求を開始し、バインドしました.when()や.done()などのイベント処理プログラムは、プロミスモードを適用しています.

//  promise
var promise = new Promise(function(resolve, reject) {
    //            
    if ( /*     */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//      
promise.then(function(result) {
	//promise         
    console.log(result); // "Stuff worked!"
}, function(err) {
	//promise       
    console.log(err); // Error: "It broke"
});

締め括りをつける
前後の差異はますます小さくなりました.
転載先:https://juejin.im/post/5b6e9c29e51d45190869c940

ガッチリと手を組み、GreamonkeyでjQueryクラスを使う