概念:

1.ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。
        
  2.因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
        
  3.虽然目前不是所有浏览器都兼容,但是很多程序员实际项目当中已经开始使用ES6开发了;

依赖:

npm(包管理工具)

-v查看版本

-g全局安装   
    在mac的终端里,需要添加 sudo 前缀,输入密码,才能全局安装;

npm init 初始化
    会创建一个 package.json 文件 (包管理文件)

npm install jquery        
    安装jquery(等工具)

--save     
    将配置,保存到 package.json 文件的依赖中去;     
    (依赖:项目所需要的工具,当项目初始化(npm install)的时候,会主动帮我们安装依赖里面的工具)

npm install jquery@1.12.4 --save
    可以使用 @ 来安装指定版本

Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
        
  使用方法:       
  依赖: Node.js    
     npm install -g babel-cli (全局安装一个命令行工具)

1.项目初始化   
    npm init
       
  2.全局安装babel    
    npm install --save-dev babel-cli babel-preset-env
  
  3.在项目目录下创建一个文件    
    后缀名为 .babelrc       
    内容为:

presets(预设)
    {
      "presets": ["env"]
    }
       

4.命令行操作,执行转码        
    babel 01.js -o 01babel.js
      将 01.js 进行转码,新建一个 01babel.js 承接;
    babel-node 01.js     
      转码运行,但是不会生成新文件;

webpack脚手架工具

可以将 js css 等文件,打包生成一个文件;  
  使用方法:    
  依赖: npm install -g webpack (webpack脚手架工具)
  
  1.项目初始化    
    npm init
     
  2.打包,生成新文件;     
    webpack 01.js 02.js
      将01.js进行打包,生成02.js
       01.js 中,引入的文件也会被打包进来;

使用方法2: (配置文件打包)       
    webpack.config.js

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

声明变量:

let

用途类似于 var 都是用来声明变量的,但是又有很大的区别;
    1. let 为JavaScript新增了 块级作用域 ,使用 let 声明的变量,只在 let 命令所在的代码块内有效;
    
  例如:

        let name = 'zach'

        while (true) {
            let name = 'obama'
            console.log(name)  //obama
            break
        }

        console.log(name)  //zach

外面的 let 并不会影响里面的内容;

2. let 可以避免变量泄露为全局变量

例如:

        var a = [];
        for (var i = 0; i < 10; i++) {
          a[i] = function () {
            console.log(i);
          };
        }
        a[6](); // 10 

用 var 声明的 i 作用域是全局,所以每一次循环新的i值都会覆盖旧值,导致即使 a[6] 会出现最终的值 10;
     
  而用 let 则不会出现这样的问题:

        var a = [];
        for (let i = 0; i < 10; i++) {
          a[i] = function () {
            console.log(i);
          };
        }
        a[6](); // 6

3.let 不可以提前声明(变量提升),也不可以重复声明

const

同样是声明变量,但是声明的是 常量.(常量的值不能改变)

原型:

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。

新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

例如:

        class Animal {
            constructor(){
                this.type = 'animal'
            }
            says(say){
                console.log(this.type + ' says ' + say)
            }
        }

        let animal = new Animal()
        animal.says('hello') //animal says hello

        class Cat extends Animal {
            constructor(){
                super()
                this.type = 'cat'
            }
        }

        let cat = new Cat()
        cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。

简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。  
 
    Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。

上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

箭头函数(arrow function)

例如:

        function(i){ return i + 1; } //

        (i) => i + 1 //ES6

特性:箭头函数里面的this指向父级;

模板字符串 `` (反引号)

在模板字符串中,可以回车换行,拼接也很方便,把变量放在 ${} 里面就行;

解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
        
  例如:

        let cat = 'ken'
        let dog = 'lili'
        let zoo = {cat, dog}
        console.log(zoo)  //Object {cat: "ken", dog: "lili"}

声明了2个变量,cat dog,再声明 zoo = {cat,dog} 就可以把这两个合并;
       
  数组的解构:

        let [a,b,c] = [1,2,3];
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3

对象的解构:

        let dog = {type: 'animal', many: 2}
        let { type, many} = dog
        console.log(type, many)   //animal 2

参数默认值

在ES6中有函数参数默认值,当你没有给函数传递参数的时候,就会使用默认值

例如:

        function animal(type = 'cat'){
            console.log(type)
        }
        animal()

type = 'cat' //此时, cat 就是函数的默认参数
    在调用函数时,如果不写参数,就会默认有一个参数 cat,如果写了,就会替换它;

总结

以上就是ES6最常用的一些语法，可以说这20%的语法，在ES6的日常使用中占了80%...