把JavaScript代码改成ES6语法不完全指南(分享)

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

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

// 修改一 var ==> constconst Student1 = function(name, age) { this.name = name this.age = age}// 修改二 var ==> constconst xiaoming1 = new Student1('xiaoming', 18)// 修改三 var ==> constconst 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 declaredlet author = 'bw4' // Uncaught SyntaxError: Identifier 'author' has already been declared

// 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定义的变量值是基础数据类型时，不能修改值，也不能修改类型const num = 2333num = 2334 // Uncaught TypeError: Assignment to constant variable.num = '' // Uncaught TypeError: Assignment to constant variable.// const定义的变量值是引用类型时，可以修改值const obj = {}obj.test = 2333console.log(obj.test) // 2333const arr = []arr.push(1)console.log(arr) // [1]

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

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

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 + badd2(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.

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

const People2 = function(name, age) { this.name = name this.age = age}const xiaoming2 = new People2('xiaoming2', 18)// 开始结构const {name, age} = xiaoming2// 现在可以独立访问了console.log(name) // xiaoming2console.log(age) // 18

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