在小程序中使用ES6的新特性

發(fā)布日期：2019-10-30瀏覽次數(shù)：2321 來(lái)源：福州網(wǎng)站建設(shè)

https://blog.csdn.net/qq_37954086/article/details/86216642

在小程序中使用ES6的新特性
ECMAScript 6（簡(jiǎn)稱ES6）是于2015年6月正式發(fā)布的JavaScript語(yǔ)言的標(biāo)準(zhǔn)，正式名為ECMAScript 2015（ES2015）。

小程序在很久之前就支持了ES6了，因此在小程序的開(kāi)發(fā)中，我們可以適當(dāng)?shù)氖褂肊S6中的一些新特性，來(lái)簡(jiǎn)化代碼，高效開(kāi)發(fā)。

在使用微信開(kāi)發(fā)者工具調(diào)試之前，記得先勾選上es6轉(zhuǎn)es5選項(xiàng)，這樣工具才會(huì)將es6語(yǔ)法進(jìn)行轉(zhuǎn)換。

1、模板對(duì)象
模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量，這樣就避免了使用大量的(+)來(lái)拼接字符串。例如下面的代碼：

var wechat = '1349571206zmy';
var qq = '1349571206',
// es5
console.log('my wechat is ' + wechat + ' and my qq is ' + qq);
// es6
console.lg(`my wechat is ${wechat} and my qq is ${qq}`);
1
2
3
4
5
6
2、默認(rèn)參數(shù)
在es6中，函數(shù)可以有默認(rèn)的參數(shù)，這樣就避免了認(rèn)為的對(duì)參數(shù)進(jìn)行判空或者其他處理。例如下面代碼，封裝了微信小程序原生的toast，默認(rèn)傳入title參數(shù)即可。

/**
* 顯示toast
* @param {string} title toast標(biāo)題
* @param {string} type toast類型
* @param {number} duration toast時(shí)長(zhǎng)
* @param {boolean} mask 是否顯示遮罩
*/
showToast(title, type='none', duration=1000, mask=false) {
wx.showToast({
title: title,
icon: type,
duration: duration,
mask: mask
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3、類
ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了 Class（類）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類。例如定義一個(gè)基礎(chǔ)類，來(lái)封裝微信小程序常用的方法，讓代碼有更高的復(fù)用性，也使代碼更加簡(jiǎn)潔。與傳統(tǒng)語(yǔ)言相似，支持繼承。

// base.js
class Api {
// 顯示toast
showToast(title, type='none', duration=1000, mask=false)
wx.showToast({
title: title,
icon: type,
duration: duration,
mask: mask
});
}
// ...
// 導(dǎo)出
export {
Api
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
定義好類后，可以在其他的js中進(jìn)行調(diào)用。

// index.js
// 引用
import {Base} from 'base';
const base = new Base();
// ...
// 在函數(shù)中調(diào)用
onLoad() {
base.showToast('toast');
}
1
2
3
4
5
6
7
8
9
4、解構(gòu)賦值
結(jié)解構(gòu)就是按照一定模式，從數(shù)組和對(duì)象中提取變量進(jìn)行賦值，通過(guò)解構(gòu)我們可以讓賦值更優(yōu)雅便捷。例如下面的代碼：

// options={wechat:134957126zmy, email:phillzou@gmail.com}
onLoad(options) {
// es5獲取值
let wechat = options.wechat;
let email = options.email;
// es6獲取值
let {wechat, email} = options;
}
1
2
3
4
5
6
7
8
5、箭頭函數(shù)
ES6 允許使用“箭頭”（=>）定義函數(shù)。

// es6
var sum = (num1, num2) => num1 + num2;
// es5
var sum = function(num1, num2) {
return num1 + num2;
};
1
2
3
4
5
6
6、使用promise簡(jiǎn)化回調(diào)
小程序中的api幾乎都是回調(diào)函數(shù)的方式，因此經(jīng)常會(huì)照常回調(diào)里面嵌套回調(diào)的情況，這使得代碼難以理解，因此可以通過(guò)promise簡(jiǎn)化回調(diào)。舉個(gè)簡(jiǎn)單的例子，小程序中的圖片上傳。使用小程序進(jìn)行圖片上傳的傳統(tǒng)方式一般分為這幾個(gè)步驟：

拍照或者選擇相冊(cè)中的圖片
請(qǐng)求后臺(tái)上傳接口
提示上傳成功
這樣的一個(gè)步驟下來(lái)，看看代碼會(huì)變成什么樣子。

// 選擇圖片
wx.chooseImage({
success: (res)=>{
// 上傳圖片
wx.uploadFile({
url: 'serverUrl',
filePath: res.tempPath[0],
success: (res)=>{
// 提示上傳成功
wx.showToast({
title: '上傳成功',
success: (result)=>{
// ...
}
});
},
});
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
可以看到，上面的代碼由一個(gè)個(gè)回調(diào)函數(shù)嵌套，這使得代碼非常難以閱讀，下面來(lái)看看如何使用es6中的promise進(jìn)行簡(jiǎn)化。

// 選擇圖片
chooseImage() {
return new Promise((resolve, reject) => {
wx.chooseImage({
success: (res)=>{
resolve(res);
},
});
});
}

// 上傳圖片
uploadFile(url, path) {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: url,
filePath: path,
success: (res)=>{
resolve(res);
},
});
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上面的代碼將微信小程序api進(jìn)行封裝，并以Promise對(duì)象的形式進(jìn)行返回。當(dāng)我們真正進(jìn)行圖片上傳時(shí)，可以這樣操作。

this.chooseImage()
.then(res => {
return this.uploadFile(res.tempPath[0], 'serverUrl');
})
.then(res => {
return this.showToast('上傳成功!');
})
1
2
3
4
5
6
7
上面的代碼就非常的清晰，以鏈?zhǔn)秸{(diào)用的方式，能夠使人清楚的知道代碼的每一步的作用。當(dāng)然，這里只是介紹了promise在小程序中的一種應(yīng)用，具體在ES6中的用法還請(qǐng)移步ES6文檔。
————————————————
版權(quán)聲明：本文為CSDN博主「MayanDev」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37954086/article/details/86216642