ES 6まとめ

原文のリンク
es 6には多くの特性があります.javascript文法をより豊かにして、よく使われているes 6の知識点をまとめます.
1.変数宣言constとlet
ES 6の前に、変数をvarキーワードで宣言します.宣言はどこにあっても、宣言は関数の最上部にあると見なされます.これは、関数変数の昇格例です.

function a() {
    if(bool) {
        var str //     
        str = 'frontend'
    } else {
        //    str   undefined
        console.log(str)
    }
}

だからbookがtrue or falseかどうかは気にしないでください.実際、どうしてもstrは声明を作成されます.そして、es 6の後、私たちは通常letとconstで声明します.letは変数、constは定数を表し、letおよびconstはブロックレベルのスコープである.このブロックレベルのスコープはどう分かりますか?

は、関数の内部にある

です.

コードブロック内部

一般的に、｛｝大括弧内のコードブロックは、letおよびconstのスコープである.

function a() {
    if(bool) {
       let str = 'frontend
    } else {
        //str        
        console.log(str)
    }
  }

letのスコープは現在のコードブロックにありますが、現在の関数の一番上には上げられません.const宣言の変数は定数として認識され、その値が設定された後は変更できないことを示します.

  const role = 'frontend'
  role = 'backend' //         

constがオブジェクトである場合、オブジェクトに含まれる値は修正され得る.オブジェクトが指す住所は変わらなければいいです.

    const student = { name: 'cc' }
    //    
    student.name = 'yy'
    //           
    student  = { name: 'yy' }

よくある面接問題の中:

var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

このような面接問題はよく見られます.多くの学生が見たら10回の出力が分かりますが、0から9まで順次出力したいと思います.二つの解決方法があります.コードを直接見てください.

    // ES5          
    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(
          (function(value) {
            return function() {
                console.log(value)
            }
        })(i)
      )
    }
    funcs.forEach(function(func) {
        func()
    })

    // es6  
    const funcs = []
    for (let i = 0; i < 10; i++) {
        funcs.push(function() {
            console.log(i)
        })
    }
    funcs.forEach(func => func())

s 6解決案はもっと簡潔で便利です.
2.テンプレート文字列
S 6テンプレートの文字はまるで開発者の福音です.S 5の文字列機能上の痛みを解決しました.最初の用途は、基本的な文字列フォーマットです.表式を文字列に埋め込んでスティッチングします.${}で定義する

//ES5 
    var name = 'frontend'
    console.log('hello' + name)
    //es6
    const name = 'frontend'
    console.log(`hello ${name}`)

第二の用途は、ES 5では、バックスラッシュ()によって複数行の文字列または文字列の1行の連結を行います.ES 6反引用符(```)は直接解決します.

    // ES5
    var msg = "Hi \
    man!
    "
    // ES6
    const template = `

        hello world
    
`

文字列ES 6に対してももちろん多くの素晴らしい方法が提供されています.

    // 1.includes：               
    const str = 'hahay'
    console.log(str.includes('y')) // true

    // 2.repeat:        n 
    const str = 'he'
    console.log(str.repeat(3)) // 'hehehe'
    //       , Math.floor(num)    
    // s.repeat(3.1)    s.repeat(3.9)      s.repeat(3)    

    // 3. startsWith   endsWith                  
    const str =  'hello world!'
    console.log(str.startsWith('hello')) // true
    console.log(str.endsWith('!')) // true

3.関数
関数のデフォルトパラメータはES 5にありますが、関数にパラメータのデフォルト値を定義するのはいかがですか?

    function action(num) {
        num = num || 200
        //   num ，num     
        //       ，num      200
        return num
    }

しかし、注意深く観察している学生たちは、numが0に入った時はfalseであることを発見します.しかし、私たちの実際の需要はnum=0を得ることです.この時num=200は明らかに私たちが実際に欲しい効果とは違っています.ES 6はパラメータのデフォルト値を提供します.関数を定義するとき、パラメータが渡されていないときに使用するために、このパラメータを初期化します.

    function action(num = 200) {
        console.log(num)
    }
    action(0) // 0
    action() //200
    action(300) //300

矢印関数
ES 6の面白い部分は関数のショートカットです.矢印関数です.矢印関数の一番直観的な三つの特徴.

は、関数

を作成するために、Fnctionキーを必要としない.

リセットキーを省略する

現在のコンテキストを継承するthisキーワード

    //  ：
    [1,2,3].map(x => x + 1)
    
    //   ：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

細かいことを言います.関数があり、パラメータが一つしかない場合は、括弧を省略することができます.関数が戻り、表現が一つしかない場合は{}とリセットを省略できます.たとえば:

 var people = name => 'hello' + name
  //  name     

参考にする

    var people = (name, age) => {
        const fullName = 'hello' + name
        return fullName
    } 
    //    ()  {}    

筆記試験の問題:

    //    ES6       
    var calculate = function(x, y, z) {
      if (typeof x != 'number') { x = 0 }
      if (typeof y != 'number') { y = 6 }

      var dwt = x % y
      var result

      if (dwt == z) { result = true }
      if (dwt != z) { result = false }
      
      return result
    }

  const calculate = (x, y, z) => {
      x = typeof x !== 'number' ? 0 : x
      y = typeof y !== 'number' ? 6 : y
      return x % y === z
    }

4.拡張の対象機能
オブジェクト初期化の略字
ES 5私たちは対象に対してキーパッドで書いています.キーパッドの名前が表示される可能性があります.たとえば:

    function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

キーの値は名前に対して、ES 6は以下のように簡単に書くことができます.

    function people(name, age) {
        return {
            name,
            age
        };
    }

ES 6は同様に、対象の字面量方法のための値付け文法を改善した.ES 5を対象に追加する方法:

    const people = {
        name: 'sa',
        getName: function() {
            console.log(this.name)
        }
    }

ES 6は、コロンとfunctionのキーワードを省略することにより、この文法をより簡潔にします.

    const people = {
        name: 'sa',
        getName () {
            console.log(this.name)
        }
    }

ES 6オブジェクトは、Object.assign()という方法を提供し、レプリカを実現する.Object.assign()は、任意の複数のソースオブジェクト自身が列挙可能な属性を対象オブジェクトにコピーし、対象オブジェクトに戻ります.最初のパラメータは対象となります.実際のプロジェクトでは、ソースオブジェクトを変更しないために.ターゲットを{}と伝えます.

    const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} //        
    const obj = Object.assign(objC, objA, objB)

    //     objA objB objC obj       
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

    //   ，    ObjC      。
    // so，  objC           。  objC          {}
    Object.assign({}, objC, objA, objB)

5.より便利なデータアクセス--解決
配列とオブジェクトはJSで最もよく使われています.最も重要な表示形式です.情報の抽出を簡略化するために、ES 6は、1つのデータ構造をより小さい部分に分解するプロセスである解を追加した.
ES 5私たちが抽出したオブジェクトの情報の形式は以下の通りです.

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

よく知っていると思いますか?そうです.ES 6の前に私達はこのように対象情報を取得して、一つずつ取得します.現在、解凍は対象または配列からデータを取り出して変数として保存させます.例えば、

    //  
    const people = {
        name: 'sa',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //  
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

面接問題:

    //     ES6       

    //    
    var jsonParse = require('body-parser').jsonParse

    //    
    var body = request.body
    var username = body.username
    var password = body.password

    // 1.
    import { jsonParse } from 'body-parser'
    // 2. 
    const { body, body: { username, password } } = request

6.Spread Operator展開演算子
ES 6のもう一つの面白い特性はSpread Operatorも三つの点です.次にその用途を示します.
オブジェクトまたは配列の組み付け

    //  
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //  
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }

配列またはオブジェクトを取得したいときは、前の項目またはいくつかの他の項目を除きます.

    //  
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //  
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female" }

Objectについては、新たなObjectに組み合わせるためにも使用できます.(ES 2017 stage-2 proposal)もちろん重複する属性名があれば、左を右にカバーします.

    const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.importとexport
import導入モジュール、export導出モジュール

//    
import people from './example'

//       ，                   
//                   
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//    
import {name, age} from './example'

//     ,         
export default App

//     
export class App extend Component {};

導入する時、大きな括弧があるかどうかの違いは何ですか?以下はまとめです

1.  export default people   ，   import people   （     ）

2.     ，       export default。      export。

3.  export name  ，  import { name }  （       ）

4.      ，    export default people,     export name    export age ，     import people, { name, age } 

5.        n   export       ，           ，    import * as example

8.Promise
プロミセの前にコードが多すぎてリピートされたり、入れ子されたりして、可読性が悪く、結合度が高く、拡張性が低いです.Promise機構により、フラット化されたコード機構は、コード可読性を大幅に向上させた.同期プログラミングで非同期コードを作成し、線形コード論理を保存し、コード結合性を大幅に低減し、プログラムの拡張性を向上させました.はっきり言えば同期方式で非同期コードを書くことです.非同期要求を開始する:

    fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

面接問題:

    setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

9.Generators
ジェネレータ(generator)は、1つのサブジェネレータを返すことができる関数です.ジェネレータ関数も関数です.一番直観的な表現は普通のfunctionよりも多くなりました.その関数の中でyieldキーワードが使えます.面白いのは関数はyieldごとに一時停止します.
ここの生活の中でイメージを比較する例があります.銀行に行って業務をする時は、ロビーの機械に整理券を取ります.あなたの整理番号を取ってください.マシンは自動的に次のチケットを出してくれません.つまり、発券機は「一時停止」しました.次の人が再び起こしてから発券します.
OKです.サンデーについて話してください.generatorを呼び出したとき、そのオブジェクトはディエゼルに戻ります.この重ね合わせオブジェクトはnextという方法を持っています.ゲナート関数を再起動して次の値を得るために役立ちます.nextメソッドは値だけではなく、オブジェクトには2つの属性があります.doneとvalue.valueはあなたが獲得した値です.doneはあなたのgeneratorが提供を停止したかどうかを示します.チケットを取ったばかりの例を引き続き使います.一枚の整理番号はここのvalueです.プリント用紙はここのdoneです.

    //    
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }
    
    //               ，         
    let iterator = createIterator();
    
    console.log(iterator.next().value); // 1
    console.log(iterator.next().value); // 2
    console.log(iterator.next().value); // 3

ジェネレータとローズマリーは何の役に立つでしょうか?生成器を囲む多くの興奮点は非同期プログラミングに直接関係している.非同期の呼び出しは私たちにとって難しいことです.私たちの関数は非同期の呼び出しを待って実行するわけではありません.コールバック関数を使いたいです.(もちろん他のプログラムもあります.例えば、Aync/await).
ジェネレータはコードを待つことができます.ネストされたコールバック関数は使用されません.generatorを使用して、非同期呼び出しが私たちのgenerator関数で下りコードを実行する前に完了したら、関数の実行を停止することを確認できます.問題が来ました.私たちも手動でnext()をずっと呼び出すことができません.ジェネレータを起動してください.このように

    function run(taskDef) { //taskDef        

        //      ，       
        let task = taskDef();

        //     
        let result = task.next();
    
        //            next()    
        function step() {
    
            //          
            if (!result.done) {
                result = task.next();
                step();
            }
        }
    
        //       
        step();
    
    }

生成器とローズマリーが最も面白く、最もエキサイティングな点は、外観のはっきりした非同期操作コードを作成することができるかもしれません.コールバック関数をあちこち使う必要はなく、同期しているようなコードを作ることができますが、実際にはエイドを使って非同期の操作が終わるのを待ちます.
10.async関数
s 6はASync関数を導入し,非同期動作をより便利にした.async関数は何ですか?一言で言うと、それはGenerator関数の文法飴です.

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

比較すると、async関数はGenerator関数の星番号(*)をasyncに置き換え、yieldをawaitに置き換えるだけです.
async関数のGenerator関数の改善は、以下の4点に反映されます.

内蔵アクチュエータ

より良い意味

より広い適用性

戻り値はPromise

です.
11.クラスの基本文法
JavaScript言語において、インスタンスオブジェクトを生成する従来の方法は、構造関数を通じて

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

S 6は伝統言語に近い書き方を提供し、クラスという概念を導入し、対象とするテンプレートを提供します.クラスのキーワードでクラスを定義できます.
基本的には、es 6%(red)[class]は文法飴として見られます.ほとんどの機能は、es 5でできます.新しい%(red)[class]は対象の原型の書き方をより明確にし、対象に向けてプログラミングされた文法のように書くだけです.上のコードはes 6の%(red)[class]で書き換えられます.次のようになります.

//   
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上のコードは「クラス」を定義しています.中には構造方法があります.つまり、es 5の構造関数Pointは、es 6のPoint類に対応する構造方法です.
Point類は構造方法の他に、toString方法も定義されています.ただし、「クラス」を定義する方法は、前にFunctionというキーワードを追加する必要がなく、直接関数定義を入れてもいいです.また、方法間にはカンマ区切りは不要です.
s 6のクラスは、構造関数の別の書き方として考えられます.