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


Posted in Javascript onSeptember 10, 2017

目录

* 核心例子
* 修改成静态变量(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的探索,还会继续保存更新。

以上这篇把JavaScript代码改成ES6语法不完全指南(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
js 发布订阅模式的实例讲解
Sep 10 #Javascript
node.js 发布订阅模式的实例
Sep 10 #Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 #Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 #Javascript
基于AngularJS的简单使用详解
Sep 10 #Javascript
JS获取字符对应的ASCII码实例
Sep 10 #Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 #Javascript
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JavaScript修改css样式style
2008/04/15 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
原生js实现购物车
2020/09/23 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
摄影展策划方案
2014/06/02 职场文书
运动会加油口号
2014/06/07 职场文书
公安学专业求职信
2014/07/27 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python