把JavaScript代码改成ES6语法不完全指南
2024-10-12 22:50:52
目录
* 核心例子
* 修改成静态变量（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 ==> 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)
})
疑问解释（重复定义会发生什么）
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
疑问解释（let的块级作用域是怎样的）
// 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定义的变量在基础数据类型和引用类型中的差异）
开始例子之前，先回顾以下基础数据类型。Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基础数据类型外，皆为引用类型。常见的引用类型是Array，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]
修改成Promise的形式
- 从应用的角度上来讲，Promise的主要作用是可以把回调函数，改为链式调用的模式。
- 当存在多个嵌套的回调函数时，代码的缩进层级将会非常多，不利于阅读。这时Promise就登场了。
- 如果只有一个回调函数，不涉及到错误处理，则不建议修改为Promise的形式。
预备知识（回调函数是什么）
回调函数是指，定义一个函数，传入的参数是一个函数。然后在函数中特定的位置，执行这个传入的函数，并将需要用到的数据，作为参数传入。回调函数常见于异步编程。比如发送Ajax请求和NodeJS中的异步文件操作。百闻不如一见，我们看个最简单的例子吧。
// 定义一个支持传入回调函数的函数
function fun1(callback) {
// 执行传入的函数，并将值2333作为参数传入
callback(2333)
}
// 执行定义的函数
fun1(function(res){
// 输出传入的参数
console.log(res)
})
预备知识（如何把回调函数改为Promise）
这里只是为了举个例子，不涉及错误处理的时候，不建议修改为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
})
开始修改
Promise是通过resolve和reject来分别把正确结果，和错误提示放在链式调用的.then和.catch方法里。
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)
})
修改成箭头函数（Arrow Function）
预备知识（箭头函数是什么）
箭头函数是一个用来帮我们简化函数结构的一个小工具。
// 普通函数形式
const add1 = function(a, b) {
return a + b
}
add1(1, 2) // 3
// 箭头函数形式
const add2 = (a, b) => a + b
add2(1, 2) // 3
预备知识（箭头函数函数中的this是个坑）
// 箭头函数没有独立的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.
预备知识（改为模板字符串的方式）
字符串模板使用的不再是单引号了，是在英文输入状态下的`键（ESC下面那个）。
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))
修改成解构的对象
对象解构常用在NodeJS导入包内的某个模块时。对于自己写的对象，如果需要进行解构，则要确保对象内的命名被解构出来不会造成冲突。这里是为了举例子方便，没有使用很独特的命名。
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
修改成Class
- 类是一个语法糖，但是这并不妨碍我们去食用他。
- 在React中，模板的定义，通常是类，生命周期方法也是写在类中。
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
不过瘾？文章已经结束了。但是关于ES6的探索，还会继续保存更新。
来关注一下前端进阶指南微信公众号吧：
另外我也创了一个对应的QQ群：660112451，欢迎一起交流。
注：以上ES6语法为作者日常使用较为频繁的语法，未将所有ES6语法囊括在内。感谢你的阅读。
最新文章
- Echars详解
- 第6届蓝桥杯javaA组第7题，牌型种数，一道简单的题带来的思考
- Memcached 笔记与总结（9）Memcached 与 Session
- 为AM335x移植Linux内核主线代码(35)使用platform中的GPIO
- IE9 不F12打开控制台，代码不执行。打开后正常
- 首先，定义描述学生的类——Student，包括学号（int）、 姓名（String）、年龄（int）等属性；二个方法：Student(int stuNo,String name,int age) 用于对对象的初始化，outPut()用于输出学生信息。其次，再定义一个主类—— TestClass，在主类的main方法中创建多个Student类的对象，使用这些对象来测 试Student类的功能。
- 微软开放技术开发了适用于 Windows Azure 移动服务的开源 Android SDK
- 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高
- jquery 重复事件
- 编译linux内核时出错
- Jfinal中Db类的的使用
- 基于权限安全框架Shiro的登录验证功能实现
- Android studio - Failed to find target android-18
- Oarcle之用户管理 与 DCL
- ubuntu16.04 Docker默认存储路径修改
- Java--实现单点登录
- python入门第二篇
- mac系统下安装Composer和laravel
- Django+Uwsgi+Nginx项目部署文档
- JTable常见用法细则