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

在小程序中使用ES6的新特性
ECMAScript 6（簡稱ES6）是于2015年6月正式發布的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。


小程序在很久之前就支持了ES6了，因此在小程序的開發中，我們可以適當的使用ES6中的一些新特性，來簡化代碼，高效開發。


在使用微信開發者工具調試之前，記得先勾選上es6轉es5選項，這樣工具才會將es6語法進行轉換。


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


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、默認參數
在es6中，函數可以有默認的參數，這樣就避免了認為的對參數進行判空或者其他處理。例如下面代碼，封裝了微信小程序原生的toast，默認傳入title參數即可。


/**
  * 顯示toast
  * @param {string} title toast標題
  * @param {string} type toast類型
  * @param {number} duration toast時長
  * @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 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。例如定義一個基礎類，來封裝微信小程序常用的方法，讓代碼有更高的復用性，也使代碼更加簡潔。與傳統語言相似，支持繼承。


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


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


// 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、箭頭函數
ES6 允許使用“箭頭”（=>）定義函數。


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


拍照或者選擇相冊中的圖片
請求后臺上傳接口
提示上傳成功
這樣的一個步驟下來，看看代碼會變成什么樣子。


// 選擇圖片
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
可以看到，上面的代碼由一個個回調函數嵌套，這使得代碼非常難以閱讀，下面來看看如何使用es6中的promise進行簡化。


// 選擇圖片
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進行封裝，并以Promise對象的形式進行返回。當我們真正進行圖片上傳時，可以這樣操作。


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