[js高手之路] es6系列教程 - 對象功能擴展詳解

第一：字面量對象的方法，支持縮寫形式

        //es6之前,這么寫
        var User = {
            name : 'ghostwu',
            showName : function(){
                return this.name;
            }
        };
        console.log( User.showName() );

        //有了es6之后，這么寫
        let User = {
            name : 'ghostwu',
            showName (){
                return this.name;
            }
        };
        console.log( User.showName() );

方法縮寫規則： 在原來的基礎上去掉 冒號 和 function關鍵字

第二：對象中的屬性與變量名或者參數 同名的時候， 可以省略賦值的操作

        //參數與屬性同名
        let User = function( name, age ){
            return {
                name : name,
                age : age
            }
        };
        let oUser = User( 'ghostwu', 22 );
        console.log( oUser.name, oUser.age );

上面例子中的寫法，可以簡寫為：

        let User = function( name, age ){
            return {
                name, //省略name的賦值, 會在作用域中查找同名的name變量或者參數
                age //省略age的賦值,會在作用域中查找同名的age變量或者參數
            }
        };
        let oUser = User( 'ghostwu', 22 );
        console.log( oUser.name, oUser.age );

        let User = function(){
            let name = 'ghostwu', age = 26;
            return {
                name, //查找到同名變量name,賦值給name屬性
                age   //查找到同名變量age,賦值給age屬性
            }
        };
        let oUser = User();
        console.log( oUser.name, oUser.age );

        let User = function(){
            let name = 'ghostwu', age2 = 26;
            return {
                name,
                age //當沒有同名變量或者參數時,省略寫法會報錯 
            }
        };
        let oUser = User();
        console.log( oUser.name, oUser.age );

            let User = function( name, age ){//形參相當於var name, var age
            let name = 'ghostwu', age = 26;//let不能重定義, 報錯
            return {
                name,
                age
            }
        };
        let oUser = User( 'zhangsan', 20 );
        console.log( oUser.name, oUser.age );

如果同時出現同名參數和let定義的同名變量時候，會報語法錯誤，如果不知道為什么，請看下我之前寫的博客文章: 

[js高手之路] es6系列教程 - var, let, const詳解

第三：可計算屬性名, 即: 屬性名支持表達式參與運算

         let User = {};
        let lastName = "last Name";

        User['first Name'] = 'ghost';
        User[lastName] = 'wu'; //lastName被解釋為last name, 從而等價於User['last Name'] = 'wu'
        console.log( User['first Name'] , User['last Name'] );

        let User = {
            "full Name" : "ghostwu",
            //  first Name : "ghostwu" //屬性名包含空格或者特殊符號要用引號或者轉義處理,否則報錯
        };
        console.log( User['full Name'] );

        let firstName = 'first name';
        let lastName = 'last name';
        //屬性名如果用中括號括起來,屬性名就被解釋成了變量
        let User = {
            [firstName] : 'ghost', 
            [lastName] : 'wu',
        };

        console.log( User['firstName']); //undefined
        console.log( User['lastName']); //undefined
        console.log( User['first name']); //ghost
        console.log( User['last name']); //wu

用中括號把屬性括起來，屬性就變成了變量，變量就可以用操作符組合成表達式，參與運算，所以叫計算表達式

        let suffix = ' Name';
        let User = {
            ['first' + suffix] : 'ghost',
            ['last' + suffix] : 'wu',
        };
        console.log( User['first Name'], User['last Name']);