先端面接のES 6編(高産似母豚)

これもフロントエンドの面接でよく聞かれる質問で、es 6にどんな新しい特性が現れたのか、普段使ったことがあるのかをよく聞きます.このチュートリアルを書くとき、最初の一言は面接でよく聞かれる場所で、その後、彼の詳細な説明が続き、面接で要求された内容は*でマークします.技術文書を書くのは本当に疲れますね.他人の文書を読むのですが、たくさん見なければなりません.そして、自分でまとめなければなりません.だから君に役に立つと思ったらstarを注文してくれhttps://github.com/skychenbo

1、           
2、ES6 let、const
3、set    
4、promise     ,    promise
5、class   
6、       
7、rest  
8、    module  

矢印関数の注意点
*動的コンテキストが必要な場合は、矢印関数は使用できません.すなわち、thisの固定化1、=>定義関数を使用する場合、thisの指向は定義時に存在するオブジェクトであり、使用時に存在するオブジェクト2ではなく、構造関数として十分に使用できない、すなわちnewコマンドを使用できない、そうでなければエラー3、argumentsオブジェクト4を使用できない、yield命令を使うことができませんこれは昔とても困惑していた私の1つの問題で、あなたが最初の目でその結果を見ることができるかどうか分かりません.thisの指向はいつも人を困らせていますが、後でお母さんは二度とあなたがthisを使うことを心配する必要はありません.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say) {
        setTimeout(function () {
            console.log(this.type + 'says' + say)
        },1000)
    }
}
var animal = new Animal()
animal.says('hi') // undefined says hi

もう一度=>の状況を見てみましょう

class Animal() {
    constructor() {
        this.type = 'animal'
    }
    says(say) {
        setTimeout(() => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says('hi') // animal says hi

ES 6 let、const*letはより完璧なvarであり、グローバル変数ではなく、ブロックレベルの関数の役割ドメインを持ち、ほとんどの場合変数のアップグレードは発生しません.constは定数値を定義、値を再付与することはできず、値が1つのオブジェクトである場合、オブジェクト内の属性値let 1、let宣言を変更できる変数がブロックレベルの役割ドメイン2、let宣言を有する変数はwindowを通過できない.変数名アクセス3、for(let x.)のループは、反復のたびにxに新しいバインドを作成することです.次はvarがもたらす不合理なシーンです.

var a = []
for (var i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 10

上記のコードでは、変数iはvar宣言であり、グローバル範囲クラスで有効である.したがって、ループごとに新しいi値が古い値を上書きし、最後の出力が10になります.ループにlet文を使用する場合、反復するたびにxに新しいバインドコードが作成されます.

var a = []
for (let i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 5

もちろん,配列中の各要素をそれぞれ異なる関数にする以外に,閉パケットと即時関数の2つの方法を採用することもできる.これは閉パケットの方法である

function showNum(i) {
    return function () {
        console.log(i)
    }
}
var a = []
for (var i = 0; i < 5; i++) {
    a[i] = showNum(i)
}

これは即時関数の方法です

var a = []
for (var i = 0; i < 5; i++) {
    a[i] = (function (i) {
        return function () {
            console.log(i)
        }
    })(i)
}
a[2]()

Setデータ構造
*es 6メソッドは、Set自体が配列に似た構造関数ですが、メンバー値は一意です.

const set = new Set([1,2,3,4,4])
[...set] // [1,2,3,4]
Array.from(new Set())  set    

promiseオブジェクトの使い方、手書きpromise
promiseは構造関数で、次は簡単な例です.

var promise = new Promise((resolve,reject) => {
    if (    ) {
        resolve(value)
    } else {
        reject(error)
    }
})
promise.then(function (value) {
    // success
},function (value) {
    // failure
})

Classの説明
*class文法は原型、構造関数、継承より伝統的な文法に近い.その書き方は対象原型の書き方をより明確にし、対象向けにプログラミングする文法をより通俗的にすることができる.これはclassの具体的な使い方である.

class Animal {
    constructor () {
        this.type = 'animal'
    }
    says(say) {
        console.log(this.type + 'says' + say)
    }
}
 let animal = new Animal()
 animal.says('hello') // animal says hello

 class Cat extends Animal {
     constructor() {
         super()
         this.type = 'cat'
     }
 }
 let cat = new Cat()
 cat.says('hello') // cat says hello

extendを使用する場合、構造出力はanimal says helloではなくcat says helloであることがわかります.contructor内部で定義されたメソッドとプロパティは、インスタンスオブジェクト自体であり、extendsで継承することはできません.class catにsuper()が出てきましたが、これは何でしょうかES 6では、サブクラスのコンストラクション関数にsuper関数が含まれている必要があります.superは親を呼び出すコンストラクション関数を表しています.親のコンストラクション関数ですが、thisはcatを指しています

Object.assign   

var n = Object.assign(a,b,c)nにa,b,cの属性を追加する
テンプレート構文
*この形式の${varible}です.従来は文字列と変数を接続する際にこの方式の'string'+varible+'string'を使用する必要がありましたが、テンプレート言語があればstring${varible}stringという接続ができます.
restパラメータ
*es 6は、関数の余分なパラメータを取得するためにrestパラメータを導入し、argumentsオブジェクトを使用する必要がなくなりますex:

function add(...values) {
    let sum = 0
    for(var val of values) {
        sum += val
    }
    return sum
}

moduleシステム
*歴史上jsはmoduleシステムがなく、大きなプログラムを小さなプログラムに分割することはできません.es 6以前にcommonJs、AMDの2種類のCommonJSはどのように書かれていましたか

const animal = require('./content.js')
    // content.js
    module.exports = 'a cat'

require.jsはそうしました//content.js

define('content.js', function () {
    return 'A cat'
})

require(['./content.js'], function (animal) {
    console.log(animal) // a cat
})

ES 6の文法(私が使っているvueでは、これを使っています)

import animal from './content'
// content.js
export default 'a cat'

Es 6 importの他の使い方vueではimport animal from'./content'animalという値は好きなように変えることができますが、関数や変数が導入されると、contentの名前と一致しなければなりません.import{say,type}from'./を参照できます.content'でよく使われるもう一つの書き方import*as content from'./content'という書き方は、すべての出力値がこのオブジェクトにあることを意味します.