2-4【微信小程序全栈开发课程】ES6知识点详解--创建conf

ES6是JavaScript的一个版本，因为我们前面用到的vue默认使用ES6语法开发，所以我们在这一节补充ES6的知识点，先了解我们项目经常用到的ES6的一些语法。

ES6文档参考
https://www.runoob.com/w3cnote/es6-concise-tutorial.html

1、创建测试方法

（1）编辑index.vue文件

为了方便我们理解，直接在src/pages/index/index.vue文件中编辑，这样可以在微信开发者工具控制台中看到效果。在script部分methods中添加test方法

methods: {
  addMark (add) {
    this.mark = this.mark + add
    console.log("mark为：",this.mark)  
  },
  //新添加的test方法，注意上一行的逗号“,”不要落下哦~
  test () {
    console.log("测试方法运行成功")
  }
},

//mounted是vue生命周期方法，在页面渲染完成后执行
mounted () {
  this.test()
}

（2）代码解析

1）在methods中，每个方法之间需要有逗号间隔

2）mounted是vue生命周期方法，在页面渲染完成后执行，我们在mounted中执行test方法，这样每次修改test方法，都会自动执行，我们就会在微信开发者工具控制台中看到效果。

（3）测试

保存代码后，在项目目录中运行npm run dev启动项目

~/WeChatProjects/truth_hold$ npm run dev

在微信开发者工具控制台中会看到以下效果

2、let、const作用域

（1）let用来声明变量，允许创建块级作用域，代替了var

test () {
  console.log("测试方法运行成功")
  //let声明变量
  let a = 2
  {
    let a = 3
    console.log("第一个a：",a)
  }
  console.log("第二个a：",a)
}

控制台返回结果：

（2）const用来声明常量，不可以被修改

test () {
  console.log("测试方法运行成功")
  //const声明常量
  const b = 3
  b = 2  
}

保存代码之后，回到微信开发者工具，效果没有更新。这就可能是报错了，这时我们回到终端，看到返回的结果，常量被const声明了之后，就不可以修改了。

3、字符串

拼接字符串，可以直接在${ }里面写变量，用反引号 ` 包裹字符串。这样可以代替用加号拼接字符串

test () {
  console.log("测试方法运行成功")
  //字符串拼接
  let name = "maoning"
  console.log("第一种拼接方法：my name is " + name + "")
  console.log(`第二种拼接方法：my name is ${name}`)
}

4、箭头函数

就是函数的一种简写形式

//函数普通形式
var add = function(a,b) {
  return a+b;
};

//箭头函数简写形式
var add = (a,b) => {
  return a+b;
};

5、数组批量赋值

test () {
  console.log("测试方法运行成功")
  //数组批量赋值
  let arr = [1,2]
  let [a,b] = arr
  console.log("a的值为:",a)
  console.log("b的值为:",b)
}

控制台返回结果：

6、模块化

（1）创建src/config.js配置文件

我们在src/config.js文件里面定义一个常量，通过export的意思是向外暴露接口，然后在index.vue文件中引用这个常量

//定义一个常量
const host = '[http://localhost:5757](http://localhost:5757)'

//通过export的意思是向外暴露接口
export default config

（2）在index.vue文件中导入config.js文件

在<script>和export default {这两行之间，添加import导入代码

//参考代码，无需粘贴
//<script>


  //需要添加的代码
  import host from '@/config'
  

  //参考代码，无需粘贴
  //export default {

（3）在test方法中引用config.js文件中的常量

test () {
  console.log("测试方法运行成功")
  console.log("打印出config.js文件中定义的host变量：",host)
}

控制台返回结果：

7、Promise异步执行

（1）Promise介绍

一个 Promise 是一个等待被异步执行的对象。当它执行成功，状态会变成resolved；执行失败状态会变成rejected

resolved状态说明是正常执行返回的信息，rejected状态相当于抛出错误信息，会被try...catch...捕捉到

什么是异步执行？同步执行？

异步执行，就是执行某项任务时，可以在它完成之前就执行下一个任务
同步执行，就是执行某项任务时，必须等待它完成才能执行下一个任务

（2）代码演示

添加一个promiseTest方法，里面包含Promise对象。然后在test方法中调用promiseTest方法，查看返回的结果

test () {
  console.log("测试方法运行成功")
  //调用promiseTest方法
  let promise_result = this.promiseTest(3)
  console.log(promise_result)
},

//注意两个方法之间要用逗号间隔
promiseTest (num) {
  var result = new Promise(function(resolve, reject) {  
    if (num > 2) {
      console.log(`num的值为${num}`)
      resolve("我执行成功了，状态变成了resolved");  
    } else {
      console.log(`num的值为${num}`)
      reject("我执行失败了，状态变成了rejected");  
    }
  });
  return result
}

在test方法中调用promiseTest方法时，参数为3，满足>2的条件，会返回resolve执行成功的结果

将参数改为1，不满足>2的条件，会返回reject执行失败的结果

8、async、await异步等待

（1）async、await介绍

async就是异步的意思，会作为一个关键字放到函数前面，用来表示函数是一个异步函数

await是等待的意思，后面常放一个promise对象。await关键字只可以放到async函数里面

（2）代码演示

在test方法前面加上async表明这是一个异步函数，创建setTime方法，里面定义一个延时器，会延时2秒执行程序，方便我们查看效果

async test () {
  console.log("测试方法运行成功")
  let result = await this.setTime(1);
  console.log("await后面的方法执行完成后，才能执行下面的语句");
  console.log(result);
},

setTime(num) {
  return new Promise(function(resolve, reject) {
    setTimeout(function(){
      resolve("第" + num + "个延时器");
    },2000)
  })
}

打开控制台，2s 之后，输出结果如下：

（3）代码执行过程

下面我们看看代码的执行过程：

• 执行test异步函数，遇到了await, await 表示等一下，要等后面的setTime(1)方法执行完才能继续执行下面的代码，现在代码暂停在await这里；

• 开始执行setTime(1)方法，setTime(1)方法中有一个setTimeout延时器，等待2000毫秒（2秒）之后，执行resolve拿到了返回值----「第1个延时器」；

• 将这个返回值赋值给result，await这里的暂停结束，代码继续向下执行console.log语句。

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录