Erfahren Sie, wie Sie JavaScript-Code in den ES6-Syntaxleitfaden ändern

Der folgende Editor bietet Ihnen eine unvollständige Anleitung (Teilen) zum Ändern von JavaScript-Code in die ES6-Syntax. Der Herausgeber findet es ziemlich gut, und jetzt möchte ich es Ihnen als Referenz geben. Kommen Sie und werfen Sie einen Blick mit dem Editor

Inhaltsverzeichnis

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

Kernbeispiele

Testen Sie die Beispiele in diesem Artikel bitte im neuesten Chrome. Das Konfigurieren der Umgebung für die Konvertierung von ES6 in ES5 geht über den Rahmen dieses Artikels hinaus.

// 定义一个学生构造函数
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)
})

Ändern Sie es in eine statische Variable (const) oder eine Variable auf Blockebene (let)

Wenn der Wert Ihrer Variablenanforderungen Bei der Änderung sollten Variablen auf Blockebene (let) verwendet werden. In anderen Fällen verwenden Sie statische Variablen (const).

Ob es sich um eine statische Variable (const) oder eine Variable auf Blockebene (let) handelt, sie kann nicht wiederholt definiert werden, da sonst ein Fehler gemeldet wird.

Sobald eine statische Variable (const) definiert ist, kann der Datentyp nicht mehr geändert werden. Referenztypen wie Array und Object können jedoch entsprechende Prototypmethoden verwenden, um die internen Daten zu bearbeiten.

Beginnen Sie mit der Änderung

Die Variablen, die wir hier definieren, müssen nicht geändert werden, daher ändern wir sie alle direkt in const. In einem Projekt gibt es einen Trick, um zu bestimmen, ob es in const oder let geändert werden soll. Sie können die Variablenprüffunktion des Editors verwenden (klicken Sie beispielsweise in Sublime doppelt auf den Variablennamen und dann auf Strg + D). Bestimmen Sie dann, ob der Variablen im Code ein Wert zugewiesen wurde und ob die Variable nach Ihrem eigenen Ermessen geändert werden muss. Wenn nicht, verwenden Sie 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)
})

Erklärung von Zweifeln (was passiert, wenn Sie die Definition wiederholen)

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

Erklärung von Zweifel (lassen Sie uns Was ist der Bereich auf Blockebene?)

// 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

Erklärung der Frage (der Unterschied zwischen konstant definierten Variablen in Basisdatentypen und Referenztypen)

Bevor Sie mit dem Beispiel beginnen, sehen Sie sich die folgenden grundlegenden Datentypen an. Zahl, Zeichenfolge, Boolescher Wert, null, undefiniert, Symbol. Darunter ist Symbol, das in ES6 neu hinzugefügt wurde. Mit Ausnahme der Basisdatentypen sind alle Referenztypen. Gängige Referenztypen sind Array und 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]

Ändern Sie es in die Form von Promise

Aus Anwendungssicht die Hauptfunktion von Promise ist Die Rückruffunktion kann in einen Kettenanrufmodus geändert werden.

Wenn mehrere verschachtelte Rückruffunktionen vorhanden sind, weist der Code viele Einrückungsebenen auf, was dem Lesen nicht förderlich ist. Dann kommt Promise auf die Bühne.

Wenn nur eine Rückruffunktion vorhanden ist und keine Fehlerbehandlung erforderlich ist, wird nicht empfohlen, sie in die Form von Promise zu ändern.

Vorkenntnisse (Was ist eine Callback-Funktion)

Eine Callback-Funktion bezieht sich auf die Definition einer Funktion und der übergebene Parameter ist eine Funktion. Führen Sie dann die übergebene Funktion an einer bestimmten Stelle in der Funktion aus und übergeben Sie die erforderlichen Daten als Parameter. Rückruffunktionen sind in der asynchronen Programmierung üblich. Zum Beispiel das Senden von Ajax-Anfragen und asynchronen Dateivorgängen in NodeJS. Sehen ist besser als Hören. Schauen wir uns das einfachste Beispiel an.

// 定义一个支持传入回调函数的函数
function fun1(callback) {
 // 执行传入的函数，并将值2333作为参数传入
 callback(2333)
}

// 执行定义的函数
fun1(function(res){
 // 输出传入的参数
 console.log(res)
})

Vorkenntnisse (wie man die Rückruffunktion in Promise ändert)

Dies ist nur ein Beispiel und stellt kein Beispiel dar Beim Umgang mit Fehlern wird nicht empfohlen, ihn in Promise zu ändern.

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
})

Beginnen Sie mit der Änderung

Promise verwendet „resolve“ und „reject“, um das richtige Ergebnis bzw. die richtige Fehleraufforderung in die Kette einzufügen die von der Formel aufgerufenen Methoden .then und .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)
})

Zur Pfeilfunktion ändern (Pfeilfunktion)

Vorkenntnisse (Was ist eine Pfeilfunktion)

Die Pfeilfunktion ist ein kleines Werkzeug, das uns hilft, die Funktionsstruktur zu vereinfachen.

// 普通函数形式
const add1 = function(a, b) {
 return a + b
}
add1(1, 2) // 3

// 箭头函数形式
const add2 = (a, b) => a + b
add2(1, 2) // 3

Vorkenntnisse (diese Funktion in der Pfeilfunktion ist eine Falle)

// 箭头函数没有独立的this作用域
const obj1 = {
 name: 'bw2',
 showName: () => {
 return this.name
 }
}
obj1.showName() // ""

// 解决方案：改为function模式
const obj2 = {
 name: 'bw2',
 showName: function() {
 return this.name
 }
}
obj2.showName() // "bw2"

Ändern beginnen

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))

Ändern Sie die verkettete Zeichenfolge in eine Vorlagenzeichenfolge

Vorkenntnisse (wie man Strings spleißt)

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

Vorkenntnisse (geändert zur Template-String-Methode )

Die Zeichenfolgenvorlage verwendet keine einfachen Anführungszeichen mehr, sondern die `-Taste (die unter ESC) im englischen Eingabestatus.

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

Mit der Änderung beginnen

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))

In destrukturiertes Objekt ändern

Objektdestrukturierung wird häufig verwendet, wenn NodeJS ein Modul in das Paket importiert. Wenn Sie Objekte, die Sie selbst geschrieben haben, dekonstruieren müssen, müssen Sie sicherstellen, dass die Namen in den Objekten ohne Konflikte dekonstruiert werden. Dies dient der Vereinfachung der Beispiele und es wird keine eindeutige Benennung verwendet.

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

wird in Klasse geändert

Die Klasse ist ein syntaktischer Zucker, aber das hindert uns nicht davon, es zu essen, er.

In React ist die Definition einer Vorlage normalerweise eine Klasse, und die Lebenszyklusmethoden werden ebenfalls in die Klasse geschrieben.

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

Nicht genug? Der Artikel ist beendet. Aber was die Erkundung von ES6 betrifft, werden wir weiterhin Updates speichern.

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie JavaScript-Code in den ES6-Syntaxleitfaden ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!