ES6 基础 - 02

 1.箭头函数：

    在ES6以前，写函数表达式的格式为：

var a = function b(){
     console.log('hello')
}
a()     //"hello"

    ES6中出现了箭头函数，简写了代码，格式为：

var a = () => {          //()中为参数
   console.log('world')
}
a()    //"world"       注：箭头函数如果不写成函数表达的形式的话，会报错

    箭头函数与普通函数的区别：

    （1）箭头函数中的 this 指向的对象是 window（全局）；普通函数中的this指向的是本身；

    （2）在普通函数中使用 arguments 可以输出所有参数；但在箭头函数中使用 arguments 就会报错；例：

var obj = function(a,b,c,d){
     console.log(arguments)
}
obj(1,2,3,4)             //输出全部参数

var test = (a,b,c,d) =>{
     console.log(arguments)
}
test(1,2,3,4)              //直接报错

2.for in 循环 和 for of 循环：

    在ES6以前，一般用 for in 语句循环对象；

var json = {
    'a' : 'banana',
    'b' : 'apple',
    'c' : 'orange',
    'd' : 'peach'
}
for(var i in json){
    console.log(json[i])          //依次输出这个对象所有的值
}

    在ES6中用 for of 语句不可以循环对象（它主要用于循环Map对象，也可以循环generator函数）；但是可以循环数组，并且相比 for 循环也简写了代码；

var arr = [1,2,3,4]
for (var i of arr){
     console.log(i)         //直接依次输出数组中的值
}

3.简单的信息提取--解构：

    在ES6以前，获取对象或者数组的信息时，需要一条一条的获取：

var cat = {
     key : "hello",
     value : "world",
}
var a = cat.key;
var b = cat.value;
console.log(a + '---' +b)           //"hello---world"

    在ES6中，新增了解构，这是将一个数据结构分解为更小的部分的过程（以上面cat对象为例）：

var {key,value} = cat;
console.log(`${key}---${value}`)        //"hello---world"

//再看数组的解构
var rel = [1,2,3];
var [a,b,c] = rel;
console.log(a,b,c)         //1 2 3

4.Spread Operator -- 展开运算符，也就是三个点儿（...）:

    （1）可以对数组或者对象进行浅克隆：

var arr = [1,2,3,4,5];                                      
var arr1 = [...arr];
console.log(arr1);        //[1, 2, 3, 4, 5]

//也可以利用解构的方式
var [...get] = arr;
console.log(get);         //[1, 2, 3, 4, 5]

    （2）可以获取数组或对象中的某个值或者某几个值：

//数组
var arr = [1,2,3,4,5];
var [,,...get] = arr;        //逗号仅表示数组中的元素
console.log(get)       // [3, 4, 5]
//对象
var obj = {
    name : 'jack',
    age : 22,
}
var {name,...set} = obj;          //不同于数组，必须要写上属性名
console.log(set)       //{age: 22}

    （3）对于多个对象，可以创建一个新的对象，将它们整合在一块儿;

var first = {
    a : 1,
    b : 2,
}
var two = {
    b : 3,
    c : 4,
}
var bond = {...first,...two};
console.log(bond)            //{a: 1, b: 3, c: 4} ，结果表示：如果遇到重复的属性名，右边会覆盖左边

5.生成器 -- generator 函数：

    特点：比普通函数多了一个*号，在其函数体内要使用yield关键定义属性值；并且函数执行时会在每个yield之后暂停执行；

//普通函数
function test(){
    console.log('apple');
    console.log('banana')
}
test()      //输出"apple" "banana"

//generator 函数
function* test(){
    yield "apple";
    yield "banana";
    yield "orange";
}
test()        //没有任何输出值，说明这种方式不可行，必须要使用next()，而且要一条一条的输出；
var res = test();
console.log(res.next());        //{value: "apple", done: false}   如果想要获取值，直接res.next().value即可
console.log(res.next());        //{value: "banana", done: false}
console.log(res.next());        //{value: "orange", done: false}
console.log(res.next());        //{value: undefined, done: true}

    从中可以看出 next 方法不仅是返回值，而且会返回出一个对象，这个对象拥有两个属性：value 和 done；

    value 是要获取的函数中的属性值；done表示 generator 函数是否已经停止提供值，没有停止返回false，停止则返回true；