ES6常用的一些语法总结

1. let和const的使用
    * let和const类似于javascript中的var的使用,都是用来声明变量的，只是都存在各自的特殊用法。

//javascript 只有全局作用域和函数作用域
var name = 'one';//全局变量
while(true){
     var name  = 'two';
     console.log(name);//two,内层变量覆盖了外层变量
     break;
}
console.log(name);//two,

而ES6带来的一个新特性：
*let：为javascript添加一个块级作用域
使用let声明的变量，只作用于使用了let命令的代码块：

var name = 'one';//全局变量
while(true){
     let name  = 'two';
     console.log(name);//two,
     break;
}
console.log(name);//one

const :声明一个常量，声明过后，就不可修改其值(会报错)

const PI = Math.PI;
console.log(PI);//3.141592653589793

PI = 32;//报错Module build failed: SyntaxError: E:/hi/first_demo/src/hello.js: "PI" is read-only

2. classs，extends，super的使用

//class声明一个animal类(对象)：
class Animal{
    constructor(){//这个constructor方法内定义的方法和属性是实例化对象自己的，不共享；construstor外定义的方法和属性是所有实例对象（共享）可以调用的
         this.type = 'animal'  //this关键字代表Animal对象的实例对象 
     }
     says(say){
         console.log(this.type+' says ' +say); 
     }
}
let animal = new Animal();
animal.says('hello');//控制台输出‘animal says hello’

//这里声明一个Cat类，来继承Animal类的属性和方法
class Cat extends Animal(){
     constructor(){
          super();//super关键字，用来指定父类的实例对象
          this.type = 'cat';
     }
}          
let cat  = new Cat();
cat.says('hello');//输出‘cat says hello’

3. arrow function箭头函数

function(i){ return i + 1; }//ES5写法
(i) => i+1;         //ES6写法

  如果代码块比较多，则使用{ }将代码包起来：
  es5:
  function(x,y){
       x++;
       y--;
       return x+y;
  }
  es6:
  (x,y) => {
       x++;
       y--;
       return x+y;
  }

箭头函数用法的两个明显的优点： * 函数的写法更加简洁 *
箭头函数内部没有自己的this对象，而是全部继承外面的，所以内部的this就是外层代码块的this。

class Animal{
    constructor(){
        //alert(this instanceof Object);//Object
        this.type = 'animal';//this代表实例对象
    }
    /*says(say){
        console.log(this.type+' says '+say);
    }*/
    says(say){
        //alert("says="+this);
        /*var self = this.type;
        setTimeout(function () {
            //alert("自定义方法中的this="+this);//window,全局对象
            //console.log(this.type +" says " +say);//因为这里的this指的是全局对象window,所以返回的为：undefined says hello
            console.log(self +" says " +say);//ok
        },1000);*/
        /*setTimeout(function () {
            console.log(self +" says " +say);//ok
        }.bind(this),1000);*///使用bind函数，ok
        setTimeout(() => {
            console.log(self +" says " +say);
        },1000);//使用es6的箭头函数，ok
    }
}
let animal = new Animal();
animal.says('hello');

4. destructuring解构
    *从数组或者对象中提取值，对变量进行赋值

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

//es6写法
let cat1 = 'ken2';
let dog1 ='lili2';
let zoo1 = {cat1,dog1};
console.log(zoo1);//Object {cat1:'ken2',dog1:'lili2'}

//destructuring --解构
let dog3 = {type:'animal',many: 2};
let {type,many} = dog3;//将对象或者数组中提取值，然后对变量进行赋值--即解构
console.log(type,many);//animal 2 

5. default和rest语法
   *调用某个带参函数时，没有传参的情况：

//默认值default
function animal(type){
  type = type || 'cat';
  console.log(type);
}
animal();//没有传参数--输出默认值‘cat’

//es6写法
function animal1(type = 'cat'){
    console.log(type);
}
animal1();//输出'cat'

//rest语法
//es6写法
function animal3(...types){
  //alert(types instanceof Array);//true-'...types'的用法是指types是个数组
  console.log(types);
}
animal3('cat1','dog1','fish1');//输出["cat1","dgo1","fish1"]

6. 模板字符串：待补充