把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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js输出列表实现代码
Sep 12 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 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+js实现异步图片上传实例分享
2014/06/02 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php开发工具有哪五款
2015/11/09 PHP
php实现头像上传预览功能
2017/04/27 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python决策树分类算法学习
2017/12/22 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python对html过滤处理的方法
2018/10/21 Python
django连接oracle时setting 配置方法
2019/08/29 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Python是怎样处理json模块的
2020/07/16 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
工程资料员岗位职责
2014/03/10 职场文书
生物技术专业求职信
2014/06/10 职场文书
无房证明样本
2015/06/17 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
表扬信范文
2019/04/22 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python