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

目录

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

核心例子

文中的例子，请在最新的Chrome中测试。关于配置ES6转ES5的环境，不在本文探讨的范畴。

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

修改成静态变量（const）或块级变量（let）

当你变量的值需要修改的时候，应该使用块级变量（let）。其他时候，使用静态变量（const）。

无论是静态变量（const）还是块级变量（let），都不能重复定义，否则会报错。

静态变量（const）一旦定义，数据类型不可更改。但是引用类型，如Array，Object，都可以用相应的原型方法对数据的内部进行操作。

开始修改

我们这里定义的变量都不需要修改，所以直接全部改为const。在项目中，判断是改为const还是let有一个技巧，可以使用编辑器的变量复选功能（如，sublime中是双击变量名之后ctrl+d）。然后判断代码中是否对这个变量进行过赋值，以及根据自己的判断是否需要对这个变量进行修改，不需要则用const。

// 修改一 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)})