使用ES6新特性开发微信小程序（9）

发布：2018-01-24 11:50浏览：次来源：网络作者：tianshu

不需要申明严格模式

不需要将"use strict"放在脚本文件的第一行，微信小程序开发工具开启ES6转换功能的情况下，默认启用javasctipt严格模式（Strict Mode）。

用块级作用域代替IIFES

IIFE（立即执行函数表达式）的通常用途是创造一个内部的作用域，在ES6中，能够创造一个块级作用域而不仅限于函数作用域。块级作用域的出现使得获得广泛应用的立即执行匿名函数(IIFE)不再必要了。

IIFE：

(function() {
var food = 'Meow Mix';
}());
// console.log(food); // 输出：ReferenceError: food is not defined

ES6块级作用域：

{
let food = 'Meow Mix';
}
// console.log(food); // 输出：ReferenceError: food is not defined

使用for...of循环

ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。

一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象以及字符串。

遍历数组：

const arr = ['red', 'green', 'blue'];
for (let s of arr) {
console.log(s); // 输出：red green blue
}

遍历Set：

var set = new Set(['red', 'green', 'blue', 'green']);
for (var s of set) {
console.log(s); // 输出：red green blue
}

for...of 用于遍历一个迭代器：

let names1 = ['zhao', 'qian', 'sun', 'li'];
for (let name of names1) {
console.log(name); // 输出：zhao qian sun li
}

for...in 用来遍历对象中的属性：

let names2 = ['zhou', 'wu', 'zheng', 'wang'];
for (let name in names1) {
console.log(name); // 输出：0 1 2 3
}

数组实例的forEach方法遍历一个数组的元素和索引

let names3 = ['feng', 'chen', 'chu', 'wei'];
names3.forEach(function(elem, index) {
console.log(`index = ${index}, elem = ${elem}`); // 输出：index = 0, elem = feng index = 1, elem = chen index = 2, elem = chu index = 3, elem = wei
});

for...of循环支持 ES6 迭代（通过 iterables 和 iterators）和解构。。通过数组的ES6新方法enteries()结合解构，可以代替数组实例的forEach方法。

let names4 = ['jiang', 'shen', 'han', 'yang'];
for (const [index, elem] of names4.entries()) {
console.log(`index = ${index}, elem = ${elem}`); // 输出：index = 0, elem = jiang index = 1, elem = shen index = 2, elem = han index = 3, elem = yang
}

通过变量解构交换两个变量的值

如果将一对变量放入一个数组，然后将数组解构赋值相同的变量（顺序不同），就可以不依赖中间变量交换两个变量的值。

let [a, b] = [10, 20];
[a, b] = [b, a];
console.log(`a = ${a}, b = ${b}`); // 输出：a = 20, b = 10

使用展开运算符和剩余操作符

展开运算符（the spread syntax ）允许一个表达式在某处展开，在多个参数（用于函数调用）或者多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方就会这样。

用于函数调用语法：

myFunction(...iterableObj);

用于数组字面量语法:

[...iterableObj, 4, 5, 6]

剩余操作符（the rest operator），它的样子看起来和展开操作符一样，但是它是用于解构数组和对象。在某种程度上，剩余元素和展开元素相反，展开元素会“展开”数组变成多个元素，剩余元素会收集多个元素和“压缩”成一个单一的元素。

剩余参数（rest parameter）允许长度不确定的实参表示为一个数组。

剩余参数语法：