React系列（四）：ECMAScript6.0的使用（下）

随着google和firfox以及node6.0对ES6的支持，ES6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析，为后续的React知识点做好铺垫，主要内容如下：

• default, rest： 函数默认值，变量展开
• import, export：导入，输出
• as：修改变量名
• * ：模块整体加载**
• Map的使用方式
• Set的使用方式
• 新增的核心库

1. default, rest： 函数默认值，变量展开

1.1 默认值操作

• ES5对于函数参数的默认值操作：

function show(a) {
    a = a || 3;
    console.log(a);
}
show();

default是默认值，应用于函数传参个数不匹配时。

• ES6中的函数参数默认值设定：

function test(a, b = 6) {
    console.log(a, b);
}
test(4);

1.2 变量展开

rest是变量展开：

function sort(...a) {
    console.log(a); // [1, 2, 3]
}
sort(1, 2, 3);

let [x, y, ...z] = [1, 2, 3, 4, 5, 6];
console.log(x, y, z);

2. import, export：导入，输出

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import， 但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

es6中新增了两个命令export和import，export命令用于规定es6模块的对外接口，import 命令用于输入其他es6模块化提供的功能。一个es6模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量， 就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

2.1 index.js书写

如下是三种模块化写法的对比

• requireJS 的使用方式

require(["content.js"], function(data) {
    console.log(data);
})

• CommonJS 的写法

var data = require("content.js");

• ES6的写法

import data,{say, type} from "./content/content.js";
let test = say();
console.log(data, test, type);

2.2 content.js书写

如下是三种模块化写法的对比

• requireJS 的使用方式

define("content.js", function() {
    var str = "HTML5";
    return str;
})

• CommonJS 的写法

module.exports = "HTML5";

• ES6的写法

export default "HTML5";
export function say() {
    return "CSS33";
};
export const type = "JS";

3. *：模块整体加载 && as：修改变量名

修改变量名使用as；

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

4. Map的使用方法

Map的size属性，获取Map数据格式的内容个数，其方法如下：

• set方法，给Map设置一个属性；
• get方法，获取Map数据格式中的某条属性；
• has方法，判断Map数据中是否拥有某条属性，return 布尔值；
• delete方法，删除Map数据格式中的某条属性；
• clear方法，删除Map数据格式中的所有数据。

方法使用如下：

var map = new Map();
map.set("a", 1);
map.set("b", 2);
map.set("c", 3);
map.set("d", 4);
console.log(map);
console.log(map.get("b"));
console.log(map.size);
console.log(map.has("e")); // false
map.delete("d");
map.clear();

Map支持for…of语句

for(let i of map) {
     console.log(i);
}

支持数组\字符串

for(let i of [2, 3, 4, 5]) {
    console.log(i);
}

5. Set的使用方法

Set类似数组，成员都是唯一，不存在重复值：

• Set的应用：数组去重；
• add方法，新增一个数据；
• size属性，获取当前Set的长度；
• has方法：判断成员是否属于当前Set，返回布尔值；
• delete方法，删除Set中的某条属性。

方法使用：

console.log(new Set([1, 2, 3, 4, 4]));

var arr1 = [1, 1, 1, 1, 4];
var arr2 = [...new Set(arr1)];
console.log(arr2);

支持添加方法add：

var set = new Set([1, 2, 3]);
set.add(5);
console.log(set);

6. 新增核心库

增加了Number、Math、Array等方法，使得原本的JS逻辑更加清晰简单，如下：

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll("*")) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

总结

本文与上一篇文章都是对ES6语法的深入解读，旨在提供简化开发难度，使得JS逻辑、方法更简便。

使用到的代码文件可下载：链接：https://pan.baidu.com/s/1dGsYuyt 密码：6t3g