小程序学习：ES6

1、通过ES6创建类

小程序的ES6支持情况： https://developers.weixin.qq.com/miniprogram/dev/guide/runtime/js-support.html 可以在小程序中通过ES6创建类，并通过Module export和import这个类。

注意：这里的Module与小程序的模块的使用方法不一样。 Module使用import和export引入和导出类； 而模块使用require和module.export。

如果要定义类，就要使用Module来封装类，并使用export和import来导出和导入类； 如果只是封装一些常量和函数，使用小程序的模块就行，并通过module.export和require导出和导入这些工具文件。

1、创建Module的js文件并导出Module：

const config = { api_blink_url: 'http://bl.7yue.pro/v1/', appkey: 'GgRhTjUNUYn1fHke' } export { config } //可以对Module重命名：export { config as config1}

还可以把export写在对象或函数前面：

export const config = { api_blink_url: 'http://bl.7yue.pro/v1/', appkey: 'GgRhTjUNUYn1fHke' } export let fun1 = function(){ }

2、导入Module：

import { config, fun1 } from '../config.js' //可以对Module重命名： //import { config as config1 } from '../config.js'

下面利用Module创建一个Http类 （1）创建类HTTP： 在根目录下新建utils文件夹，再新建Http.js作为类文件：

//config.js定义了几个常量 import { config } from '../config.js' //定义类 class HTTP { //构造函数 constructor() { this.baseRestUrl = config.api_blink_url } //http 请求类, 当noRefech为true时，不做未授权重试机制 //HTTP的方法 request(params) { var that = this var url = this.baseRestUrl + params.url; if (!params.method) { params.method = 'GET'; } wx.request({ url: url, data: params.data, method: params.method, header: { 'content-type': 'application/json', 'appkey':config.appkey }, success: function (res) { // 判断以2（2xx)开头的状态码为正确 // 异常不要返回到回调中，就在request中处理，记录日志并showToast一个统一的错误即可 var code = res.statusCode.toString(); var startChar = code.charAt(0); if (startChar == '2') { params.success && params.success(res.data); } else { params.error && params.error(res); } }, fail: function (err) { params.fail && params.fail(err) } }); } }; export { HTTP };

（2）导入并使用类

import { HTTP} from '../../utils/Http.js' let http = new HTTP()

注意：import只能使用相对路径，使用绝对路径会报错。

//把一个对象作为request的参数，对象里可以有数据、函数。 http.request({ url:'classic/latest', success: (res) => { console.log(res) } })

（3）继承类 可以把HTTP当做基类，而可以构建子类来继承它： classic.js:

class ClassicModel extends HTTP { constructor() { super() } getLatest(sCallback) { this.request({ url: 'classic/latest', success: (data) => { // 如果不用箭头函数，this将指代不正确 let key = this._fullKey(data.index) wx.setStorageSync(key, data) this._setLatestIndex(data.index) sCallback(data) } }) } } export { ClassicModel }

（4）创建类的实例：

let classicModel = new ClassicModel() classicModel.getLatest((data)=>{ this.setData({ classic:data }) })

其中getLatest的参数是一个箭头函数。

该箭头函数在classicModel.getLatest方法中success回调函数中执行； 而该回调函数又在HTTP.request方法中的success回调函数中执行。

以上调用classicModel的getLatest方法时，相当于是嵌套了三层回调。

2、ES6模板字符串：

let a = 123 console.log(`${a}456`) //打印：123456

其中${a}指代变量a。 注意要使用反引号``包裹字符串 除了将变量加入字符串里，还可以将函数加入字符串。

test: function(){ return 123 } console.log(`${this.test()}456`) //打印：123456

模板字符串的应用： 传统字符串拼接：

url: 'classic/' + index + '/' + nextOrPrevious

模板字符串：

url: `classic/${index}/$(nextOrPrevious)`

3、ES6扩展运算符…

扩展运算符…的作用就是把一个对象中的键值对平铺出来，这样在获取对象中的键值对时就不需要“.”运算符了，比如classic.title，而直接title就行。 例如：

classicModel.getLatest((data)=>{ this._getLikeStatus(data.id, data.type) this.setData({ ...data //classic:data }) })

在获取数据时，

<epsoide-cmp class="epsoide" index="{{index}}" />

直接使用index获取，而不是classic.index

4、ES6数组常用方法

includes()

数组是否包含指定值。

注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

// 参数1：包含的指定值 [1, 2, 3].includes(1); // true // 参数2：可选，搜索的起始索引，默认为0 [1, 2, 3].includes(1, 2); // false // NaN 的包含判断 [1, NaN, 3].includes(NaN); // true