Apprenez à modifier le code JavaScript en guide de syntaxe ES6

L'éditeur suivant vous apportera un guide incomplet (partage) sur la modification du code JavaScript vers la syntaxe ES6. L'éditeur pense que c'est plutôt bien, et maintenant je veux vous le donner et le donner comme référence. Venez jeter un oeil avec l'éditeur

Table des matières

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

Exemples principaux

Pour les exemples de cet article, veuillez les tester dans la dernière version de Chrome. La configuration de l'environnement pour la conversion d'ES6 en ES5 dépasse le cadre de cet article.

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

Modifiez-le en variable statique (const) ou variable de niveau bloc (let)

Lorsque la valeur de vos besoins en variables Lors de la modification, des variables au niveau du bloc (let) doivent être utilisées. D'autres fois, utilisez des variables statiques (const).

Qu'il s'agisse d'une variable statique (const) ou d'une variable de niveau bloc (let), elle ne peut pas être définie à plusieurs reprises, sinon une erreur sera signalée.

Une fois qu'une variable statique (const) est définie, le type de données ne peut plus être modifié. Cependant, les types référence, tels que Array et Object, peuvent utiliser les méthodes prototypes correspondantes pour opérer sur les données internes.

Commencer à modifier

Les variables que nous définissons ici n'ont pas besoin d'être modifiées, nous les changeons donc toutes directement en const. Dans un projet, il existe une astuce pour déterminer s'il faut le changer en const ou let. Vous pouvez utiliser la fonction de vérification des variables de l'éditeur (par exemple, dans sublime, double-cliquez sur le nom de la variable puis ctrl+d). Déterminez ensuite si la variable a reçu une valeur dans le code et si la variable doit être modifiée en fonction de votre propre jugement. Sinon, utilisez 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)
})

Explication des doutes (que se passera-t-il si les définitions sont répétées)

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

Explication des doutes (Voyons Qu'est-ce que la portée au niveau du bloc ?)

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

Explication de la question (la différence entre les variables définies par const dans les types de données de base et les types de référence)

Avant de commencer l'exemple, passez en revue les types de données de base suivants. Nombre, chaîne, booléen, nul, non défini, symbole. Parmi eux, Symbol est nouvellement ajouté dans ES6. À l’exception des types de données de base, tous sont des types de référence. Les types de référence courants sont Array et 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]

Modifiez-le sous la forme de Promise

Du point de vue de l'application, la fonction principale de Promise is La fonction de rappel peut être modifiée en mode d'appel en chaîne.

Lorsqu'il y a plusieurs fonctions de rappel imbriquées, le code aura de nombreux niveaux d'indentation, ce qui n'est pas propice à la lecture. C’est alors que Promise entre sur scène.

S'il n'y a qu'une seule fonction de rappel et qu'aucune gestion des erreurs n'est impliquée, il n'est pas recommandé de la changer sous la forme de Promesse.

Connaissances préliminaires (qu'est-ce qu'une fonction de rappel)

Une fonction de rappel fait référence à la définition d'une fonction, et le paramètre transmis est une fonction. Exécutez ensuite la fonction transmise à un emplacement spécifique de la fonction et transmettez les données requises en tant que paramètres. Les fonctions de rappel sont courantes dans la programmation asynchrone. Tels que l'envoi de requêtes Ajax et d'opérations de fichiers asynchrones dans NodeJS. Voir vaut mieux qu’entendre. Prenons l’exemple le plus simple.

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

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

Connaissances préliminaires (comment changer la fonction de rappel en Promesse)

Ceci est juste à titre d'exemple et ne signifie pas impliquer Lors de la gestion des erreurs, il n'est pas recommandé de le remplacer par 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
})

Commencer à modifier

La promesse utilise la résolution et le rejet pour mettre respectivement le résultat correct et l'invite d'erreur dans la chaîne. les méthodes .then et .catch appelées par la formule.

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

Modifier en fonction de flèche (Fonction de flèche)

Connaissances préliminaires (qu'est-ce que la fonction de flèche)

La fonction flèche est un petit outil utilisé pour nous aider à simplifier la structure des fonctions.

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

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

Connaissances préliminaires (cela dans la fonction flèche est un écueil)

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

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

Commencer à modifier

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

Modifier la chaîne concaténée en chaîne modèle

Connaissances préliminaires (comment épisser des chaînes)

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

Connaissances préliminaires (changées en méthode de chaîne modèle )

Le modèle de chaîne n'utilise plus de guillemets simples, mais la touche ` (celle en dessous de ESC) dans l'état de saisie anglais.

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

Commencer à modifier

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

Modifier en objet déstructuré

La déstructuration d'objet est souvent utilisée lorsque NodeJS importe un module dans le package. Pour les objets écrits par vous-même, si vous devez les déconstruire, vous devez vous assurer que les noms des objets sont déconstruits sans provoquer de conflits. C'est pour la commodité des exemples, et aucune dénomination très unique n'est utilisée.

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

est changé en Class

La classe est un sucre syntaxique, mais cela ne nous empêche pas de le manger, il.

Dans React, la définition d'un modèle est généralement une classe, et les méthodes de cycle de vie sont également écrites dans la classe.

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

Pas assez ? L'article est terminé. Mais concernant l'exploration d'ES6, nous continuerons à sauvegarder les mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!