JavaScript コードを ES6 構文ガイドに変更する方法を説明します

以下のエディターは、JavaScript コードを ES6 構文に変更するための不完全なガイド (共有) を提供します。編集者はそれがとても良いと思ったので、今すぐあなたに渡して参考にしたいと思います。エディターと一緒に見てみましょう

目次

* 核心例子
* 修改成静态变量（const）或块级变量（let）
 * 开始修改
 * 疑问解释（重复定义会发生什么）
 * 疑问解释（let的块级作用域是怎样的）
 * 疑问解释（const定义的变量在基础数据类型和引用类型中的差异）
* 修改成Promise的形式
 * 预备知识（回调函数是什么）
 * 预备知识（如何把回调函数改为Promise）
 * 开始修改
* 修改成箭头函数（Arrow Function）
 * 预备知识（箭头函数是什么）
 * 预备知识（箭头函数函数中的this是个坑）
 * 开始修改
* 修改拼接字符串成模板字符串
 * 预备知识（字符串的拼接方式）
 * 预备知识（改为模板字符串的方式）
 * 开始修改
* 修改成解构的对象
* 修改成Class

コアの例

記事内の例については、最新の Chrome でテストしてください。 ES6 を ES5 に変換するための環境の構成については、この記事の範囲外です。

// 定义一个学生构造函数
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)を定義すると、データ型を変更することはできません。ただし、配列やオブジェクトなどの参照型は、対応するプロトタイプ メソッドを使用して内部データを操作できます。

変更を開始

ここで定義する変数は変更する必要がないので、すべて const に変更するだけです。プロジェクトでは、const に変更するか let に変更するかを決定するためのコツがあります。エディターの変数チェック機能を使用できます (たとえば、sublime では、変数名をダブルクリックして ctrl+d)。次に、コード内で変数に値が割り当てられているかどうか、および変数を独自の判断に基づいて変更する必要があるかどうかを判断します。割り当てられていない場合は、const を使用します。

// 修改一 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で定義された変数）型と参照型の違い)

例を開始する前に、次の基本データ型を確認してください。数値、文字列、ブール値、null、未定義、記号。このうち、ES6で新たに追加されたのがSymbolです。基本データ型を除き、すべて参照型です。一般的な参照タイプは配列とオブジェクトです。

// 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の主な機能はコールバック関数をチェーンコールモードに変更することです。

複数のネストされたコールバック関数がある場合、コードのインデントレベルが多くなり、読みにくくなります。ここでプロミスがステージに登場します。

コールバック関数が 1 つだけで、エラー処理を含まない場合、それを Promise の形式に変更することはお勧めできません。

予備知識(コールバック関数とは)

コールバック関数とは関数を定義することを指し、渡されるパラメータは関数です。次に、渡された関数を関数内の特定の場所で実行し、必要なデータをパラメーターとして渡します。コールバック関数は非同期プログラミングでは一般的です。 NodeJS での Ajax リクエストの送信や非同期ファイル操作など。見ることは聞くことよりも優れています。最も単純な例を見てみましょう。

// 定义一个支持传入回调函数的函数
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 は、resolve と拒否を使用して、チェーン呼び出しの .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作用域
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.

予備知識（テンプレート文字列への変更方法）

文字列テンプレートはシングルクォーテーションを使わなくなり、英語入力状態になっています`キー(ESCの下のもの)。

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では、テンプレートの定義は通常クラスであり、ライフサイクルメソッドもクラス内に記述されます。

rree

十分ではありませんか？記事は終了しました。ただし、ES6 の探索に関しては、更新を保存し続けます。

以上がJavaScript コードを ES6 構文ガイドに変更する方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。