博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
把JavaScript代码改成ES6语法不完全指南
阅读量:7036 次
发布时间:2019-06-28

本文共 6071 字,大约阅读时间需要 20 分钟。

目录

* 核心例子* 修改成静态变量(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)})

疑问解释(重复定义会发生什么)

const author = 'bw2'const author = 'bw3'  // Uncaught SyntaxError: Identifier 'author' has already been declaredlet 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 = 2333num = 2334  // Uncaught TypeError: Assignment to constant variable.num = ''  // Uncaught TypeError: Assignment to constant variable.// const定义的变量值是引用类型时,可以修改值const obj = {}obj.test = 2333console.log(obj.test)  // 2333const 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 + badd2(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)  // xiaoming2console.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语法囊括在内。感谢你的阅读。

转载地址:http://ewial.baihongyu.com/

你可能感兴趣的文章
西门子数控(南京)有限公司庆祝公司成立十周年
查看>>
Java中的基本数据类型
查看>>
CentOS7下如何正确安装并启动Docker(图文详解)
查看>>
libgdx游戏引擎教程
查看>>
source insight 保存时删除多余空格,去除多余空格 space tab键【转】
查看>>
在Linux中使用C语言实现控制流保护(CFG)【转】
查看>>
Python3-json3csv
查看>>
Ruby学习笔记-Array
查看>>
ABP理论学习之Javascript API(理论完结篇)
查看>>
ASP.NET 5 WebApi 返回 HttpResponseMessage
查看>>
UE工作流程实践
查看>>
[JavaScript]ECMA-262-3 深入解析.第二章.变量对象
查看>>
oracle的一些常用命令
查看>>
SQL Server中灾难时备份结尾日志(Tail of log)的两种方法
查看>>
Gradle tip #3: Tasks ordering
查看>>
ECC Copy Client 之后的SAP*登陆问题
查看>>
chest
查看>>
查看iPhone电池寿命
查看>>
备忘:BLOCK CORRUPTION IN SYSTEM DATAFILE
查看>>
教你如何删除WIN7系统文件以及无法删除的文件
查看>>