JavaScriptコードをES 6文法不完全ガイドに変更します.

目次

*     
*        （const）     （let）
    *     
    *     （         ）
    *     （let          ）
    *     （const                     ）
*    Promise   
    *     （       ）
    *     （         Promise）
    *     
*        （Arrow Function）
    *     （       ）
    *     （        this   ）
    *     
*              
    *     （        ）
    *     （          ）
    *     
*         
*    Class

中心となる例
文中の例は最新のChromeでテストしてください.ES 6からES 5を構成する環境については、本明細書で検討した範疇ではない.

//           
var People = function(name, age) {
  this.name = name
  this.age = age
}

//       
var xiaoming = new People('xiaoming', 18)

//         
//         ，            
var examStart = function(callbackSucc, callbackFail) {
  var result = prompt('1+5=')
  if(result === '6') {
    callbackSucc('Awesome. Your answer is ' + result)
  }
  else {
    callbackFail('You can try again. Your answer is ' + result)
  }
}

//     
//                
examStart(function(res) {
  console.log(res)
}, function(res) {
  console.log(res)
})

静的変数(const)またはブロックレベル変数(let)に変更します.

変数の値を変更する必要があるときは、ブロックレベル変数(let)を使用します.その他の場合は静的変数(const)を使用します.

は、静的変数(const)であれ、ブロックレベル変数(let)であれ、定義を繰り返してはいけません.そうでないとエラーが発生します.

静的変数(const)が定義されると、データタイプは変更できない.しかし、参照のタイプは、Aray、Objectなど、対応するプロトタイプの方法でデータの内部を操作することができます.

変更を開始
ここで定義した変数は修正する必要がないので、直接全部constに変更します.プロジェクトでは、constに変更するか、それともletに変更するかを判断するテクニックがあります.エディタの変数チェック機能(例えば、sublimeでは変数名をダブルクリックした後、ctrl+d)が使用できます.コードにこの変数が割り当てられているかどうかを判断し、自分の判断に基づいて変数を修正する必要があるかどうかを判断します.

//      var ==> const
const Student1 = function(name, age) {
  this.name = name
  this.age = age
}

//      var ==> const
const xiaoming1 = new Student1('xiaoming', 18)

//      var ==> const
const examStart1 = function(callbackSucc, callbackFail) {
  //      var ==> const
  const result = prompt('1+5=')
  if(result === '6') {
    callbackSucc('Awesome. Your answer is ' + result)
  }
  else {
    callbackFail('You can try again. Your answer is ' + result)
  }
}

examStart1(function(res) {
  console.log(res)
}, function(res) {
  console.log(res)
})

疑問の解釈(定義を繰り返すと何が起こるか)

const author = 'bw2'
const author = 'bw3'  // Uncaught SyntaxError: Identifier 'author' has already been declared
let author = 'bw4'  // Uncaught SyntaxError: Identifier 'author' has already been declared

疑問の解釈(letのブロックレベルのスコープはどのようなものですか?)

// let            
if(true) {
  let test1 = 2333
}
console.log(test1)  // Uncaught ReferenceError: t is not defined


// var        ，         
if(true) {
  var test2 = 2333
}
console.log(test2)  // 2333

疑問の解釈(const定義の変数は基礎データタイプと参照タイプの違い)
例を始める前に、以下の基礎データタイプを振り返ってみます.Number、String、Boolean、null、undefined、Symbol.このうちSymbolはES 6が新たに加わったものです.基本データタイプ以外は、すべて参照タイプです.一般的な参照のタイプはAray,Objectである.

// const              ，     ，       
const num = 2333
num = 2334  // Uncaught TypeError: Assignment to constant variable.
num = ''  // Uncaught TypeError: Assignment to constant variable.

// const            ，     
const obj = {}
obj.test = 2333
console.log(obj.test)  // 2333

const arr = []
arr.push(1)
console.log(arr)  // [1]

Promiseの形に修正する

アプリケーションの観点から、Promiseの主な役割は、コールバック関数をチェーン式呼出しモードに変更することです.

に複数のネストされたコールバック関数が存在すると、コードのインデントレベルは非常に多くなり、読み取りに不便です.ここにPromiseが登場します.

は、一つのコールバック関数だけがエラー処理に関与していない場合は、Promiseの形式に変更することは推奨されない.

予備知識(コールバック関数は何ですか?)
コールバック関数とは、関数を定義し、入力されたパラメータは関数です.そして関数内の特定の位置でこの着信関数を実行し、必要なデータをパラメータとして入力します.コールバック関数は非同期プログラミングでよく見られます.例えば、Ajax要求とNodeJSにおける非同期ファイルの送信動作.百聞は一見に如かず、一番簡単な例を見ましょう.

//                
function fun1(callback) {
  //        ，   2333      
  callback(2333)
}

//        
fun1(function(res){
  //        
  console.log(res)
})

予備知識(どうやってコールバック関数をPromiseに変えるか)
ここでは例を挙げるためだけに、エラー処理に触れない場合は、Promiseに修正することを勧めません.

function fun2() {
  //         Promise  
  // resolve reject    
  return new Promise(function(resolve, reject){
    // resolve           .then   
    // reject           .ctch   
    resolve(2333)
  })
}

fun2().then(function(res){
  console.log(res)  // 2333
})

変更を開始
Promiseはreolveとrejectを通じて正確な結果をそれぞれチェーン式に提示しています.thenと.catch方法にあります.

const examStart2 = function() {
  //     Promise  
  return new Promise(function(resolve, reject) {
    var result = prompt('1+5=')
    if(result === '6') {
      resolve('Awesome. Your answer is ' + result)
    }
    else {
      reject('You can try again. Your answer is ' + result)
    }
  })
}
examStart2()
.then(function(res) {
  console.log(res)
})
.catch(function(err) {
  console.log(err)
})

矢印関数に変更します.
予備知識(矢印関数は何ですか?)
矢印関数は関数構造を簡単にするためのツールです.

//       
const add1 = function(a, b) {
   return a + b
}
add1(1, 2)  // 3

//       
const add2 = (a, b) => a + b
add2(1, 2)  // 3

予備知識(矢印関数のthisはピット)

//          this   
const obj1 = {
  name: 'bw2',
  showName: () => {
    return this.name
  }
}
obj1.showName()  // ""

//     ：  function  
const obj2 = {
  name: 'bw2',
  showName: function() {
    return this.name
  }
}
obj2.showName()  // "bw2"

変更を開始

var examStart3 = function() {
  //    
  return new Promise((resolve, reject) => {
    var result = prompt('1+5=')
    if(result === '6') {
      resolve('Awesome. Your answer is ' + result)
    }
    else {
      reject('You can try again. Your answer is ' + result)
    }
  })
}
//    
examStart3().then((res) => console.log(res)).catch((err) => console.log(err))

スティッチング文字列をテンプレート文字列に変更します.
予備知識(文字列の綴り方)

const xh1 = 'xiaohong'
console.log('I\'m ' + xh1 + '.')  // I'm xiaohong.

予備知識(テンプレート文字列に変更する方法)
文字列テンプレートで使うのはシングルクォーテーションではなく、英語で入力した状態の‘キー’です.

const xh2 = 'xiaohong'
console.log(`I'm ${xh2}.`)  // I'm xiaohong.

変更を開始

var examStart4 = function() {
  return new Promise((resolve, reject) => {
    var result = prompt('1+5=')
    if(result === '6') {
      //    
      resolve(`Awesome. Your answer is ${result}`)
    }
    else {
      //    
      reject(`You can try again. Your answer is ${result}`)
    }
  })
}
examStart4().then((res) => console.log(res)).catch((err) => console.log(err))

オブジェクトを構成解除する
オブジェクトの解凍は、NodeJSがカバン内のモジュールを導入するときによく使用されます.自分が書いたオブジェクトに対して、解決が必要であれば、オブジェクト内の名前が解凍されて衝突しないようにします.ここは例を挙げて便利にするために、独特のネーミングがありません.

const People2 = function(name, age) {
  this.name = name
  this.age = age
}
const xiaoming2 = new People2('xiaoming2', 18)

//     
const {name, age} = xiaoming2
//          
console.log(name)  // xiaoming2
console.log(age)  // 18

クラスに修正

類は文法飴ですが、これは彼を食べるのを邪魔しません.

Reactでは、テンプレートの定義は、通常クラスであり、ライフサイクルの方法もクラスに書いてあります.

class People3 {
  constructor(name, age){
    this.name = name
    this.age = age
  }
  showName() {
    return this.name
  }
}

const xiaoming3 = new People3('xiaoming3', 18)
console.log(xiaoming3)  // People {name: "xiaoming3", age: 18}
console.log(xiaoming3.showName())  // xiaoming3

飽きない?文章はもう終わりました.しかし、ES 6の探索については、引き続き更新を保存します.
先端階段案内のWeChat公式アカウントに注目してみましょう.
また、私も対応するQQ群を作りました.660112451、一緒に交流することを歓迎します.
注:以上のES 6文法は著者が日常的に頻繁に使用する文法であり、すべてのES 6文法を網羅していません.読んでくれてありがとうございます.