ES6学习笔记

常用语法：
1、let
与var类似，不同的是let定义的变量有块级作用域，比如：

var a=1;
while(true){
    var a =2;
    alert(a);      //2
}
alert(a);   //2
//用let:
let a=1;
while(true){
    let a=2;
    alert(a);  //2
}  
alert(a);   //1

2、const 用来定义变量，但是定义之后的值不能再次更改了。
一个实际的用途是用来定义引入的模块，避免重命名导致出错。

const hello = require('hello')

3、class、super、extends
ES6引入了类的概念，extends是用来继承的
代码如下：

class Animal{
    constructor{
        this.type=animal;
    }
    eat(food){
        console.log(this.type+' eat '+food);
    }
}
let animal = new Animal();
animal.eat('water')   //animal eat water

class Dog extends Animal{
    constructor{
        super();   //指代父类的实例，必须调用这个方法，子类才有this，因为子类的this也是继承父类的
        this.type=dog;
    }
    says(say){
        console.log(this.type+' says '+say);
    }   
}
let dog = new Dog();
dog.eat('bone');    //dog eat bone
dog.says('www');    //dog says www

其中的constructor方法就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。
4、箭头函数 arrow function
简洁的表示了函数：

function(i){
    return i+1;
}
ES6可以写为:  (i) => i + 1;
复杂一点的要加{}，例如：
function(x,y){
    x++;
    y--;
    return x*y;
}
写为：
(x,y) => {
        x++;
        y--;
        return x*y;
}

除了简洁之外，箭头函数中的this永远是指向当前的对象。
这就避免了一些this的指向，比如setTimeout（）中的this是指向全局对象，经常导致要求的结果不一样。例如：

setTimeout(function(){
    console.log(this.type);//this指向全局对象
})
ES6:  setTimeout(() => {console.log(this.type)})//this指向当前对象

5、模板字符串，比如之前的：

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);
字符串和变量拼接麻烦，现在ES6可以这样：
$("result").append(
`There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`
);  //用反引号来表示字符串，用${}来表示变量，并且{}里面可以是任意js表达式，可以进行运算等，`其中的空格和缩进都会保留出来。

如果不要保留换行可以用trim()方法去掉,放在反引号后：

$("result").append(
`There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`.trim()
);

6、ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。

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

ES6允许写成下面这样。

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

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
如果右边的个数多于左边，但是模式相同，这种情况叫解构不完全，但是可以成功。
如果右边个数小于左边，则解构不成功。

//不成功
let [x, y, ...z] = ['a'];
// x:"a" 
// y:undefined 
// z:[]

//不完全
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果右边不是数组就会报错

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

7、函数的默认参数值
ES5是不能直接为函数指定默认参数的，只能变通的方法：

//传统方法
function a(x,y){
    y = y || 'hello';
    console.log(x,y);
}
a('friend'); //friend hello
a('friend','bye') //friend bye
a('friend','')   //friend hello

//ES6方法
function a(x,y='hello'){
    console.log(x,y);
}
a('friend'); //friend hello

参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

8、ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

9、遍历器
ES6引入了其他语言如pyhton的for…of…，进行迭代，适用于数组，一些类数组的对象：

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}