资讯专栏INFORMATION COLUMN

把JavaScript代码改成ES6语法不完全指南

ninefive / 2727人阅读

摘要:无论是静态变量还是块级变量,都不能重复定义,否则会报错。当存在多个嵌套的回调函数时,代码的缩进层级将会非常多,不利于阅读。如果只有一个回调函数,不涉及到错误处理,则不建议修改为的形式。回调函数常见于异步编程。

目录
* 核心例子
* 修改成静态变量(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语法囊括在内。感谢你的阅读。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88469.html

相关文章

  • 前端练级攻略(第二部分)

    摘要:是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分,你将更好地理解并使用它们。到目前为止,你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。 本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如...

    BWrong 评论0 收藏0
  • [译]JavaScript ES6箭头函数指南

    摘要:以下例子的目的是使用来展示一个每秒都会更新的时钟当尝试在的回调中使用来引用元素时,很不幸,我们得到的只是一个属于回调函数自身上下文的。 前言 胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>...

    makeFoxPlay 评论0 收藏0
  • [译]JavaScript ES6 class指南

    摘要:前言又称通过一些新的关键字,使类成为了中一个新的一等公民。类声明在中,有两个声明类的方式。在使用了新的关键字后在底层,所做的,也只是将这个方法添加为构造函数的一个属性。在想要调用父类的构造函数时,你可以简单地将关键字视作一个函数使用,如。 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民。但是目前为止,这些关于类的新关键字仅仅是建...

    CoderDock 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 【译】前端练级攻略

    摘要:由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章,,也涵盖了预处理器相关的知识。 译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<