es6学习（1）

1.函数参数默认值

在前端开发中，有时候需要写一些组件供其他开发者调用，这时候需要提供对外接口，对外接口的默认值的接口参数由调用者决定，如果在调用接口时没有传参，该怎么处理？es6之前的实现如下:

    function showName(arg){
        var name = arg || "React";
        console.log(name);
    }
    showName(); //输出React
    showName("LuoTianyou") //输出LuoTianyou

ES6提供了新的语法标准，使得函数参数默认值的处理变得简洁，代码如下

    function showName(arg="React"){
        console.log(arg);
    }
    showName();  //输出React
    showName("LuoTianyou"); //输出LuoTianyou

2.剩余（rest）参数

要实现一个求和函数，ES5以前的写法是这样的：

    function sum(){
        var sum = 0;
        for(var val of Array.prototype.slice.call(arguments)){
            sum += val;
        }
        return sum;
    }
    
    console.log(sum(1,2,3))  //输出6

这里是由于arguments是一个类数组对象，不是一个真正的数组，所以需要使用Array.prototype.slice.call()方法将其转换成数组对象

es6在剩余参数上提供了新的语法标准， 就上述求和功能，es6可以这么写：

    function(...values){
        let sum = 0;
        for (var val of values){
            sum += val;
        }
        return sum;
    }
    
    console.log(sum(1,2,3)) //输出6
        

上述示例中，...values是一个剩余参数，调用该函数时，剩余参数可以是不确定的。剩余参数是一个真正的数组，所以不需要转换，而且所有的数组特性剩余参数都具有。

3.箭头函数

    //语法：arg=>statement

例如

    var name = function(arg){
        return arg;
    }

可以写成

    var name = arg => arg

如果参数有多个，可以写成

    var sum = (num1, num2) => (return num1 + num2;);

箭头函数中大括号中的内容是被解释为代码块的，如果在大括号中返回一个对象，需要在对象外面再加一个小括号，例如:

    let person = (age, name) => { age: age, name: name}; //错误
    let person = (age, name) => ({age: age, name: name}); //正确

4.多个返回值的情况

    function f(age, name){
        return {myAge: age, myName: name};
    }
    console.log(f(26, "LuoTianyou"));
    //输出结果为: {MyAge: 26, myName: "LuoTianyou"}

上面的例子用ES6可以写成:

    function f(age, name){
        return(age, name);
    }
    console.log(f(26, "LuoTianyou"))
    //输出结果为：{age: 26, name: "LuoTianyou"}

从上述例子可以看出，ES6是允许在对象中直接写变量的，属性名即为变量，属性值即为变量值。这种表达式的简化功能可以使代码变得简洁漂亮

这里的(age, name)等同于(age: age, name: name)是es6标准对于对象的一个简写。 此外，方法也可以简写：

    //之前写法
    const person = {
        showName: function(){
            return "LuoTianyou";
        }
    }

    //es6写法
    const person = {
        showName(){
            return "LuoTianyou";
        }
    }

5.属性名表达式

在ES5之前也可以用字面量代替属性名，如

    obj["a" + "bc"] = "React";
    console.log(obj["abc"]) //输出React

在ES6之后，这种方式的定义也适用于对象字面量的定义，如:

    let propkey = "foo";
    let obj = {
        [propkey]: "true",
        ['a' + 'ge']: 21
    }
    console.log(obj['foo']) //输出true
    console.log(obj) //输出{foo: true, age: 21}

属性名表达式和属性简化是不可以同时使用的

    //错误
    const foo = 'bar';
    const bar = 'abc';
    const baz = {[foo]}
    //正确
    const foo = 'bar';
    const baz = {[foo]: 'abc'}

很显然，这里的[foo]虽然代表bar，但是编译器不能这么解释它，我们不要使用嵌套的简化属性。

6.class声明语法

众所周知，JavaScript是面向对象的一门语言，但是ES6之前的JavaScript没有原生的类机制，不能像Java，C++语言那样直接用关键字class定义一个类。

以前工程师常用函数原型来实现类系统 比如要定义一个Person类，则应该这么写：

    function Person(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.showName = function(){
        console.log(this.name);
    }
    
    var p = new Person("LTY", 21, "male");
    p.showName(); //输出LTY

ES6中类的基本语法为：

    class name {...}

则上述的示例用ES6标准可以改写为这样：

    class Person{
        constructor(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        showName(){
            console.log(this.name);
        }
    }
    
    const p = new Person("LTY", 21, "male");
    p.showName();