Javascript 6里的4个新语法

JS 的 ES6版本已经被各大浏览器广泛支持，很多前端框架也已经使用 ES6，并且还有 Babel 可以做兼容处理，所以ES6已经进入了应用阶段

如果您对 ES6 还不太熟悉，下面4个简单的基础用法可以帮助您快速了解ES6

1.使用 let 和 const 声明变量

在传统的 ES5 代码中，变量的声明有两个主要问题

（1）缺少块儿作用域的支持

（2）不能声明常量

ES6中，这两个问题被解决了，增加了两个新的关键字：let 和 const

块儿作用域使用 let

var a = 1; if (true) { var b = 2; } console.log(a); // 1 console.log(b); // 2 

ES5 中 if 块儿内声明的变量 b 可以在块儿外访问

// in ES6 let a = 1; if (true) { let b = 2; } console.log(a); // 1 console.log(b); // ReferenceError: b is not defined 

ES6 中 if 块儿内使用 let 声明的变量 b 不能在块儿外访问

下面这段代码是常见的一个比较迷惑人的情况

var a = []; for (var i=0; i< 5; i++) { a.push(function() { console.log(i); }); } a.forEach(function(value) { value(); }); 

运行结果是：5, 5, 5, 5, 5

使用 let 声明循环中的变量 i

var b = []; for ( let i=0; i< 5; i++) { b.push(function() { console.log(i); }); } b.forEach(function(value) { value(); }); 

运行结果是：0, 1, 2, 3, 4

定义常量使用 const

// in ES5 var MY_CONSTANT = true; MY_CONSTANT = false; 

ES5 中不能定义常量，值可以被改，只能靠我们自己来保证

// in ES6 const MY_CONSTANT = true; MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable 

ES6 中使用 const 声明的常量是不可以被改的

2.模板字符串

下面这种字符串与变量的拼接方式是比较常见的

var url = ‘http://www.’ + domain + ‘.com/’ + path + ‘?’ + queryParams; 

ES6 提供了简洁的用法

let url = `http://www.${domain}.com/${path}?${queryParams}`; 

3.新的 Set 和 Map 对象

ES5 中我们经常使用数组来存储动态数据，例如

var collection = []; collection.push(1, 2, 1); console.log(collection); // [ 1, 2, 1] 

其中包含了重复数据，如果不想有重复数据，需要使用代码判断

function addToCollection(collection, value) { if (collection.indexOf(value) < 0) { collection.push(value) } } 

ES6 提供了 Set 对象，处理这个情况就方便多了

let collection = new Set(); collection.add(1); collection.add(2); collection.add(1); console.log(collection); // Set {1, 2} 

Set 还可以方便的遍历集合，和处理集合中的数据

ES5 中通常使用 object 来存储键值对数据，例如

var collection = {}; collection.a = ‘abc’; collection.b = ‘xyz’; 

ES6 有了 Map，就可以这样使用

let collection = new Map(); collection.set(‘a’, ‘abc’); collection.set(‘b’, ‘xyz’); 

遍历也很简单

collection.forEach(function(value, key) { console.log(key + ":" + value); }); console.log(collection.size); 

4.函数参数

ES6 中函数的参数有两个新特性

默认值

function doSomething(someObject) { console.log(someObject); } 

这里有可能会出现运行时错误，需要验证参数

function doSomething(someObject) { if (someObject === undefined) { someObject = {}; } console.log(someObject); } 这类的验证代码非常普遍，ES6 中可以给参数设置默认值，就简单了很多 function doSomething(someObject = {}) { console.log(someObject); } 

对象解构

我们常会把一个包含键值对的对象做为参数传给某个函数，然后在函数内获取对象的各个属性

function doSomething(someObject) { var one = someObject.propOne; console.log(one); var two = someObject.propTwo; console.log(two); var three = someObject.propThree; console.log(three); } 

ES6 可以让我们直接在参数中解构对象参数

function doSomething({ propOne, propTwo, propThree }) { console.log(propOne); console.log(propTwo); console.log(propThree); }