ES 6常用新特性

9182 ワード

先端 es 6

一、ES 6の関数のデフォルトのパラメータ:
以前はこのようにデフォルトのパラメータを定義しました.

var fun = function(a,b){
    var a = a || "aaa";
    var b = b || "bbb";
    ...
}

このようにしてずっと大丈夫です.パラメータの値が0になるまでは、0はJavaScriptの中でfalseの値です.
これは直接に0自体ではなく後のハードコードの値になります.
ES 6でこの問題をうまく解決しました.

var func = function(a="aaa",b="bbb"){
    ...
}

二、ES 6のモダリティ表現(逆引用符`.と変数名で)
テンプレート表現は他の言語では一般的にテンプレート文字列に変数を出力するために使用されます.
ES 5では、文字列を切り離してこのようにしなければなりません.

var name = "My name is " + name;

ES 6の中で私達はこうしてもいいです.

var name = `My name is ${name}`

三、複数行の文字列:(逆引用符で`)
ES 6の前に必ず「+」で各行の文字列を接続します.

var str ="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    +"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"

ESではこうしてもいいです.

var str = `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb`

四、let、constとvarの対比
ES 6の前に、varキーワード宣言変数は、宣言がどこにあっても、関数の最上部にあると見なされます(関数内でないとグローバルスコープの最上部にあると宣言されます).これは私たちが言っている変数の引き上げです.

function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上のコードは実際には:

function aa() {
    var test //     
    if(bool) {
        test = 'hello man'
    } else {
        //    test   undefined
        console.log(test)
    }
    //    test   undefined
  }

だからbookがtrue or falseかどうかは気にしないでください.実際には、いずれにしてもtestは声明を作成されます.
次にES 6主人公が登場します.letとconstで宣言します.letは変数、constは定数を表します.letもconstもブロックレベルのスコープです.このブロックレベルのスコープはどう分かりますか?

は、関数の内部にある

です.

コードブロック内部

実は｛｝大括弧内のコードブロックはletとconstの作用領域です.
以下のコードを見てください

function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test        
        console.log(test)
    }
  }

letのスコープは現在のコードブロックにありますが、現在の関数の一番上には上げられません.
またconstについて説明します.const宣言の変数は定数です.一度値を与えたら、その値は死ぬと決められます.再度の割当は間違っています.

 const name = 'lux'
    name = 'joe' //

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

は、関数

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

リセットキーを省略する

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

には、argmentsパラメータ配列がありません.を使用します.
矢印の一番不思議なところは彼があなたに正しいコードを書かせるところです.例えば、thisのコンテキストと関数の値は同じであるべきで、それは変わらない.矢印関数を使って、that=thisまたはself=thisまたは_を使わなくなります.これらのコードはES 5において特に醜い.
ES 5において:

var _this = this
$(#button).click(function(event){
    _this.sentData()
})

ES 6:

$(#button).click((event)=>{
    this.sentData();
})

ES 6では矢印関数と古い関数を合理的に混用することができます.ES 6は旧式functionに対応しています.
矢印関数がある語句が1行しかない場合は、この語句の値を直接返します.しかし、複数の文があれば、明確にreturnを使います.
リセットを省略する場合:

var people = (name) => console.log('hello' + name);

六、開拓の対象機能:
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: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

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

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

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

const obj = Object.assign({}, objA, objB)

七、構造解除――より便利なデータアクセス:
配列とオブジェクトは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: 'lux',
        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'

八、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) //{"gender": "female", "age": 19, "address": "peking"}

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 }

九、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

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

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

十一、ジェネナート
ジェネレータ(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();
}

生成器とローズマリーが最も面白く、最もエキサイティングな点は、外観のはっきりした非同期操作コードを作成することができるかもしれません.コールバック関数をあちこち使う必要はなく、同期しているようなコードを作ることができますが、実際にはエイドを使って非同期の操作が終わるのを待ちます.

締め括りをつける
ES 6の特性はこれだけではないですが、私たちの日常的な開発について話します.これはもう十分です.面白い方法がたくさんあります.例えばfindIndex…などです.setを使って面接問題の常連客を完成させることを含めて、重い問題に行きます.私と私の子供たちは驚きました.

Scripyフレームの使用のScrpyドッキングSplash