把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语法不完全指南(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。