ES6 从入门到放弃^_^

小伙伴大多数还在使用ES5来进行编写，使用ES5这无可厚非，因为ES5毕竟还是主流，速度也更快，但ES6引入的新特性是ES5无法比拟的，接下来分享一下我掌握的es6 也为自己做个总结

ES6搭建环境（与语法没什么关系 可忽略）

现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法。

webpack是有自动编译转换能力的，除了Webpack自动编译，我们还可以用Babel来完成

只用Babel做很简单的配置哈，想深入的可以观看阮一峰大大的日志

第一步配置 快速构建package.json

npm init -y

安装 babel npm install -g babel-cli

安装之后 再次安装 npm install --save-dev babel-preset-es2015 babel-cli

安装完成之后看看package.json 先 不要慌

"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-preset-es2015": "^6.24.1"
}

接着在根目录下 新建 .babelrc

担心小伙伴懵逼 截个图

在文件中写入下方代码

    {
        "presets":[
            "es2015"
        ],
        "plugins":[]
    }

新建src 目录 新建html 与 js ，再新建dist 目录 新建js

注意此时 我们在html中引入的是dist中的js 我们不动dist中的js 编辑src下的js

在src下的js中编辑 使用es6语法

let a=1;
console.log(a);

然后我们在终端输入babel src/index.js -o dist/index.js

这句代码意思就是 把src下的index.js 转译到dist下的index.js中 此时我们查看dist下的index.js

此时es5语法的js已经自动生成 控制台也能看到1的输出

每次的编译都需要转换输入命令有点烦，可以配置一下package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src/index.js -o dist/index.js"
  },

修改好后，以后我们就可以使用 npm run build 来进行转换了。

###没学过webpack的小伙伴可以尝试一下环境的安装

正式进入ES6 （想了解前后代码变化可以使用我上面的环境安装，编译之前记得npm run build ）

ES6中新的声明方式

1.var：它是variable的简写，可以理解成变量的意思。
2.let：它在英文中是“让”的意思，也可以理解为一种声明的意思。
3.const：它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你可以简单理解为不变的量。

var声明

var在ES6里是用来升级全局变量的，我们可以先作一个最简单的实例，用var声明一个变量a,然后用console.log进行输出。

    var a="ES6";
    window.onload= function(){
        console.log(a);  
    }

可以看到控制台输出了ES6，这证明var确实是全局的。如果你觉的这个不够直观说明var是全局声明，还可以用区块的方式进行调用测试，先看下面的代码。

    var a=2;
    {
    var a=3;
    }
    console.log(a);

这时打印出来的值是多少那？对，应该是3，因为var是全局声明的。覆盖了上面的2

let局部声明

通过两个简单的例子，我们对var的全局声明有了一定了解。那跟var向对应的是let，它是局部变量声明。还是上面的例子，我们试着在区块里用let声明。

    var a=2;
    {
    let a=3;
    }
    console.log(a);

这时候控制台打印出来的值就是2了。如果我们只在区块里声明，不再外部声明，我们打印a时就会报错，显示找不到变量。

{
    let a=3;
}
console.log(a);

有些小伙伴可能会以为输出undefined 其实是报错了 a并没有被声明

有些刚接触JavaScript的小伙伴会疑惑了，我感觉let还没有var好用，其实let是防止你的数据污染的，在大型项目中是非常有用处的。现在看一个循环的例子，我们来看一下let的好处。

用var声明的循环

    for(let i=0;i<10;i++){
        console.log('循环体中:'+i);
        }
        console.log('循环体外:'+i);

你执行时会发现控制台报错了，找不到循环体外的i变量。通过两种声明的比较，可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明，减少var声明去污染全局空间，在vue的使用中也要注意这点。

const声明常量

在程序开发中，有些变量是希望声明后在业务层就不再发生变化了，简单来说就是从声明开始，这个变量始终不变，就需要用const进行声明。

    const a="ES6";
    var a='ES6';
    console.log(a);

在编译这段代码的过程中，你就会发现已经报错，无法编译了，原因就是我们const声明的变量是不可以改变的。const是很好理解的，我就不作过多的解释说明了。

ES6变量的解构赋值

简单的数组解构

以前，为变量赋值，我们只能直接指定值。比如下面的代码：

    let a=0;
    let b=1;
    let c=2;

而现在我们可以用数组解构的方式来进行赋值。

let [a,b,c]=[1,2,3];

上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。

数组模式和赋值模式统一

可以简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败。

let [a,[b,c],d]=[1,[2,3],4];

如果等号两边形式不一样，很可能获得undefined或者直接报错。

解构的默认值

解构赋值是允许你使用默认值的，先看一个最简单的默认是的例子

    let [foo = true] =[];
    console.log(foo); //控制台打印出true

上边的例子数组中只有一个值，可能你会多少有些疑惑，我们就来个多个值的数组，并给他一些默认值

let [a,b="ES6"]=['2016']
console.log(a+b); //控制台显示“2016ES6”   a对应2016  b对应空 但是默认值为ES6

现在我们对默认值有所了解，需要注意的是undefined和null的区别。

let [a,b="2016"]=['ES6',undefined];
console.log(a+b); //控制台显示“ES62016”

undefined相当于什么都没有，b是默认值。

let [a,b="2016"]=['ES6',null];
console.log(a+b); //控制台显示“技术胖null” 

null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。

对象的解构赋值 解构不仅可以用于数组，还可以用于对象。<