把JavaScript代码改成ES6语法不完全指南(分享)
目录
*核心例子 *修改成静态变量（const）或块级变量（let） *开始修改 *疑问解释（重复定义会发生什么） *疑问解释（let的块级作用域是怎样的） *疑问解释（const定义的变量在基础数据类型和引用类型中的差异） *修改成Promise的形式 *预备知识（回调函数是什么） *预备知识（如何把回调函数改为Promise） *开始修改 *修改成箭头函数（ArrowFunction） *预备知识（箭头函数是什么） *预备知识（箭头函数函数中的this是个坑） *开始修改 *修改拼接字符串成模板字符串 *预备知识（字符串的拼接方式） *预备知识（改为模板字符串的方式） *开始修改 *修改成解构的对象 *修改成Class
核心例子
文中的例子，请在最新的Chrome中测试。关于配置ES6转ES5的环境，不在本文探讨的范畴。
//定义一个学生构造函数
varPeople=function(name,age){
this.name=name
this.age=age
}
//创建小明实例
varxiaoming=newPeople('xiaoming',18)
//定义一个考试函数
//定义两个回调函数，在适当的时候把参数传进去
varexamStart=function(callbackSucc,callbackFail){
varresult=prompt('1+5=')
if(result==='6'){
callbackSucc('Awesome.Youransweris'+result)
}
else{
callbackFail('Youcantryagain.Youransweris'+result)
}
}
//开始考试
//传入的两个回调函数分别处理结果
examStart(function(res){
console.log(res)
},function(res){
console.log(res)
})
修改成静态变量（const）或块级变量（let）
当你变量的值需要修改的时候，应该使用块级变量（let）。其他时候，使用静态变量（const）。
无论是静态变量（const）还是块级变量（let），都不能重复定义，否则会报错。
静态变量（const）一旦定义，数据类型不可更改。但是引用类型，如Array，Object，都可以用相应的原型方法对数据的内部进行操作。
开始修改
我们这里定义的变量都不需要修改，所以直接全部改为const。在项目中，判断是改为const还是let有一个技巧，可以使用编辑器的变量复选功能（如，sublime中是双击变量名之后ctrl+d）。然后判断代码中是否对这个变量进行过赋值，以及根据自己的判断是否需要对这个变量进行修改，不需要则用const。
//修改一var==>const
constStudent1=function(name,age){
this.name=name
this.age=age
}
//修改二var==>const
constxiaoming1=newStudent1('xiaoming',18)
//修改三var==>const
constexamStart1=function(callbackSucc,callbackFail){
//修改四var==>const
constresult=prompt('1+5=')
if(result==='6'){
callbackSucc('Awesome.Youransweris'+result)
}
else{
callbackFail('Youcantryagain.Youransweris'+result)
}
}
examStart1(function(res){
console.log(res)
},function(res){
console.log(res)
})
疑问解释（重复定义会发生什么）
constauthor='bw2' constauthor='bw3'//UncaughtSyntaxError:Identifier'author'hasalreadybeendeclared letauthor='bw4'//UncaughtSyntaxError:Identifier'author'hasalreadybeendeclared
疑问解释（let的块级作用域是怎样的）
//let定义的变量存在块级作用域
if(true){
lettest1=2333
}
console.log(test1)//UncaughtReferenceError:tisnotdefined
//var定义的变量不存在，会直接成为全局变量
if(true){
vartest2=2333
}
console.log(test2)//2333
疑问解释（const定义的变量在基础数据类型和引用类型中的差异）
开始例子之前，先回顾以下基础数据类型。Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基础数据类型外，皆为引用类型。常见的引用类型是Array，Object。
//const定义的变量值是基础数据类型时，不能修改值，也不能修改类型
constnum=2333
num=2334//UncaughtTypeError:Assignmenttoconstantvariable.
num=''//UncaughtTypeError:Assignmenttoconstantvariable.
//const定义的变量值是引用类型时，可以修改值
constobj={}
obj.test=2333
console.log(obj.test)//2333
constarr=[]
arr.push(1)
console.log(arr)//[1]
修改成Promise的形式
从应用的角度上来讲，Promise的主要作用是可以把回调函数，改为链式调用的模式。
当存在多个嵌套的回调函数时，代码的缩进层级将会非常多，不利于阅读。这时Promise就登场了。
如果只有一个回调函数，不涉及到错误处理，则不建议修改为Promise的形式。
预备知识（回调函数是什么）
回调函数是指，定义一个函数，传入的参数是一个函数。然后在函数中特定的位置，执行这个传入的函数，并将需要用到的数据，作为参数传入。回调函数常见于异步编程。比如发送Ajax请求和NodeJS中的异步文件操作。百闻不如一见，我们看个最简单的例子吧。
//定义一个支持传入回调函数的函数
functionfun1(callback){
//执行传入的函数，并将值2333作为参数传入
callback(2333)
}
//执行定义的函数
fun1(function(res){
//输出传入的参数
console.log(res)
})
预备知识（如何把回调函数改为Promise）
这里只是为了举个例子，不涉及错误处理的时候，不建议修改为Promise。
functionfun2(){
//在函数中返回一个Promise对象
//resolve和reject都是函数
returnnewPromise(function(resolve,reject){
//resolve函数中的参数将会出现在.then方法中
//reject函数中的参数将会出现在.ctch方法中
resolve(2333)
})
}
fun2().then(function(res){
console.log(res)//2333
})
开始修改
Promise是通过resolve和reject来分别把正确结果，和错误提示放在链式调用的.then和.catch方法里。
constexamStart2=function(){
//返回一个Promise对象
returnnewPromise(function(resolve,reject){
varresult=prompt('1+5=')
if(result==='6'){
resolve('Awesome.Youransweris'+result)
}
else{
reject('Youcantryagain.Youransweris'+result)
}
})
}
examStart2()
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
修改成箭头函数（ArrowFunction）
预备知识（箭头函数是什么）
箭头函数是一个用来帮我们简化函数结构的一个小工具。
//普通函数形式
constadd1=function(a,b){
returna+b
}
add1(1,2)//3
//箭头函数形式
constadd2=(a,b)=>a+b
add2(1,2)//3
预备知识（箭头函数函数中的this是个坑）
//箭头函数没有独立的this作用域
constobj1={
name:'bw2',
showName:()=>{
returnthis.name
}
}
obj1.showName()//""
//解决方案：改为function模式
constobj2={
name:'bw2',
showName:function(){
returnthis.name
}
}
obj2.showName()//"bw2"
开始修改
varexamStart3=function(){
//修改一
returnnewPromise((resolve,reject)=>{
varresult=prompt('1+5=')
if(result==='6'){
resolve('Awesome.Youransweris'+result)
}
else{
reject('Youcantryagain.Youransweris'+result)
}
})
}
//修改二
examStart3().then((res)=>console.log(res)).catch((err)=>console.log(err))
修改拼接字符串成模板字符串
预备知识（字符串的拼接方式）
constxh1='xiaohong'
console.log('I\'m'+xh1+'.')//I'mxiaohong.
预备知识（改为模板字符串的方式）
字符串模板使用的不再是单引号了，是在英文输入状态下的`键（ESC下面那个）。
constxh2='xiaohong'
console.log(`I'm${xh2}.`)//I'mxiaohong.
开始修改
varexamStart4=function(){
returnnewPromise((resolve,reject)=>{
varresult=prompt('1+5=')
if(result==='6'){
//修改一
resolve(`Awesome.Youransweris${result}`)
}
else{
//修改二
reject(`Youcantryagain.Youransweris${result}`)
}
})
}
examStart4().then((res)=>console.log(res)).catch((err)=>console.log(err))
修改成解构的对象
对象解构常用在NodeJS导入包内的某个模块时。对于自己写的对象，如果需要进行解构，则要确保对象内的命名被解构出来不会造成冲突。这里是为了举例子方便，没有使用很独特的命名。
constPeople2=function(name,age){
this.name=name
this.age=age
}
constxiaoming2=newPeople2('xiaoming2',18)
//开始结构
const{name,age}=xiaoming2
//现在可以独立访问了
console.log(name)//xiaoming2
console.log(age)//18
修改成Class
类是一个语法糖，但是这并不妨碍我们去食用他。
在React中，模板的定义，通常是类，生命周期方法也是写在类中。
classPeople3{
constructor(name,age){
this.name=name
this.age=age
}
showName(){
returnthis.name
}
}
constxiaoming3=newPeople3('xiaoming3',18)
console.log(xiaoming3)//People{name:"xiaoming3",age:18}
console.log(xiaoming3.showName())//xiaoming3
不过瘾？文章已经结束了。但是关于ES6的探索，还会继续保存更新。
以上这篇把JavaScript代码改成ES6语法不完全指南(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。