Boost Mini Program Development with Essential ES6 Features

In the process of developing WeChat Mini Programs, several ES6 features can greatly improve productivity. Below we introduce the most useful features with concrete examples.

1. Arrow Functions

Front‑end developers often encounter the this and closure pitfalls where asynchronous callbacks lose the original context. Previously developers stored the outer this in variables such as that, _this, $this, or self. ES6 arrow functions inherit this from the surrounding scope, eliminating the need for extra variables and making the code more concise.

In Mini Programs, page lifecycle hooks (e.g., onLoad, onShow, onUnload) and custom component callbacks are defined inside AppService. Within these functions, this always refers to the current Page object, so using arrow functions reduces repetitive this handling and lowers the chance of errors.

2. Array Methods

Although WeChat Mini Program's wxml syntax resembles Vue's Mustache, it does not support filters like {{value | filter}}. Therefore, developers can rely on ES5/ES6 array methods. After receiving a list from the backend, you can preprocess it using Array.prototype.forEach or Array.prototype.map, and filter out invalid items with Array.prototype.filter.

3. Rest & Destructuring Assignment

When the official component standard is not yet released, a common solution is to use template together with destructuring to bind different objects' data to separate components, keeping their state and event handlers independent.

For example, two templates can bind data from data to their own objects inside AppService, avoiding field name collisions.

When rendering, simply destructure bannerState and comicListState fields.

4. Enhanced Object Literals

setData()

When property names and variable names are identical, you can omit the repetition, making the code shorter and faster to write.

With many fields, this reduces maintenance cost.

Method Shorthand

Enhanced object literals also allow concise method definitions, similar to class methods.

5. Class and Inheritance

Using ES5 prototype for inheritance works but can become tightly coupled and harder to maintain. ES6 class syntax provides a unified, more intuitive way to define and extend classes.

6. Block‑Scoped Variables

When iterating with for, a var declaration is hoisted to the function top, which can cause data leakage between iterations. Replacing var with let or const creates a block‑scoped variable, eliminating this risk.

Supplement

The Babel version bundled with the Mini Program development tool may not support the latest ES6 features. Currently, static fields inside a class and the for...of loop (which relies on Symbol.iterator) can cause issues on some mobile runtimes.

2020‑03‑29 update: the newer development tool version has fixed these problems, and the ES6 syntax can now be used safely.

When iterating arrays, for...of behaves similarly to Array.prototype.forEach but allows early break statements.