JavaScript第十二弹——ES6（上）
Hello大家好，最近我们也讲了不少JavaScript的知识了，今天再来点实用的吧，不管是在工作中还是面试中，ES6都是我们会遇到的一个东西，ES6呢，全称是ECMAScript2015，那么ECMAScript与JavaScript又是啥关系呢？ECMAScript是JavaScript的规格，JavaScript是ECMAScript的实现，ES6呢则是JavaScript的下一代标准。
Babel转换器
因为ES6提供了很多新特性，造成了很多浏览器不能够完美的支持所有新特性的问题，然而鉴于新特性的好用，很多公司会选择使用ES6进行开发，针对兼容问题，我们可以选择一个转码器对ES6进行转码，转码器有很多，比如Babel、Traceur等，今天我们主要介绍一下Babel转码器。
先举个?！
ES6: input.map(item=>item+1);
ES5: input.map(function(item){
return item+1;
})
是不是很神奇呢～那么要怎样配置babel呢？
1）我们首先要先安装node.js，运行npm init，然后会生成package.json文件 2）npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest 3）创建并配置.babelrc文件 4）npm install -global babel-cli 5）babel-version，出现版本号，即配置成功
现在我们就可以创建一个基于ES6的文件，并通过Babel转译啦
假设我们的文件叫rabbit.js
运行：babel./src/rabbit.js即可完成转译
ES6新特性
现在既然ES6能够无所畏惧的运行了，再也不怕兼容性问题了，我们就来看看ES6到底有哪些新特性吧～
1 let vs const vs var
任何一种语言，最开始必然要介绍的就是声明变量，我们知道在传统JavaScript中，我们都是采用var来声明变量，但是在ES6中却变得不同了，我们采用let和const来声明。不同于var声明的变量，
1）let或const所声明的变量只在其所在的代码块中有效
2）let或const不存在变量提升，因此必须在声明之后使用变量
3）会形成暂时性死区，当let或const在块级作用域中声明后，所声明的变量不再受外界影响
4）let和const不允许重复声明
5）const用来声明常量
6）const命令保证变量名指向的地址不变，并不保证该地址的数据不变（就是这个对象指向的地址不能变，但是对象自己可以变，比如加个属性～～）
2 块级作用域
上面我们谈到了块级作用域，事实上ES5中是不存在块级作用域的，这也是《JavaScript高级程序设计》中重点提到的，但是这其实在很多场景中是不合理的。如：
1）内层变量覆盖外层变量
var tmp = new Date(); function f() { console.log(tmp); //undefined if (false) { var tmp = "hello world"; } }
因为变量提升，内层变量认为tmp在内层被声明了，覆盖了外层的，所以打印出了undefined
2）用来计数的循环变量泄漏为全局变量
var s = 'hello'; for (var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i); // 5
let就可以阻止这些事情的发生，因为它为JS新增了块级作用域。
1）保证了外部作用域无法读取内部作用域的变量
2）保证了全局作用域不被污染，因此不再需要立即执行函数表达式的使用
3）也防止了变量的重复声明
3 箭头函数
箭头函数也是ES6中非常重要的一个变化点。我们来看看箭头函数有哪些特性吧～
1）如果箭头函数不需要或需要多个参数就采用圆括号代表参数部分
var f = () => S
var sum = (num1, num2) => num1+num2;
2）如果箭头函数的代码块多于一行，则需要大括号括起。
var sum = (num1, num2) => {return num1+num2};
3）如果返回一个对象，必须在对象外面加上括号
const full = ({first, last}) => first+' '+last;
PS注意
1）函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象
2）不可以当作构造函数，不可以new哦
3）没有argument对象，但是有rest参数作为代替
4）不可以使用yield，因此箭头函数不能用作generator
不同于argument
- rest参数只包括那些没有给出名称的参数，arguments包含所有参数
- arguments 对象不是真正的数组，而rest 参数是数组实例，可以直接应用sort, map, forEach, pop等方法
- arguments 对象拥有一些自己额外的功能
4 解构赋值
解构赋值指的是，按照一定模式从数组、对象中提取值，对变量进行赋值。
1）数组的解构赋值：
最基本的用法：var [a,b,c] = [1,2,3]
我们可以为数组设置一点模式：let [foo, [[bar], baz]] = [1,[[2],3]]
事实上，只要两边模式相同，即可解构成功，如果解构不成功，变量值就变成undefined咯
2）对象的解构赋值：
对象解构赋值类似数组解构赋值，又不同于数组的解构赋值。数组元素是按照顺序排列的，变量取值由元素次序决定，而对象的属性的值则是取决于属性名称。因此对象的解构赋值是先找到同名的属性，再给对应的变量赋值，赋值给变量而非属性名。
先来一个简单版的例子：
var {foo, bar} = {foo:'aaa', bar:'bbb'}
foo // "aaa"
bar // "bbb"
再来个嵌套版的：
var obj = {
p: [
"Hello",
{ y: "World"}
]
};
var {p:[x,{y}]} = obj
x//"Hello"
y//"World"
好啦，今天的内容就到这啦～ES6的这几个新特性有没有记住呢，这才仅仅是ES6的冰山一角，后续会为大家奉上更多ES6相关知识哟～喜欢兔妞的文章就请关注+好看吧，越点好看越好看哦～～么么哒！！！