學習新對象字面量語法

目標

• 使用簡寫屬性名稱
• 使用簡寫方法名稱
• 使用計算屬性名稱

問題

哪些部分是冗餘的?

const person={
        name:name,
        address:address,
        sayHello:function(){/*......*/},
        sayName:function(){/*......*/}
        sayAddress:function(){/*......*/}
    }
複製代碼

簡寫屬性名稱

//ES5
const message={text:text} //將屬性text賦給text變量

//ES6
const message={ text }  //將屬性text分配給名爲text的變量
複製代碼

與解構結合使用

let {count} = stateManger.getState();  // 從轉態管理器中檢索出count
count+=amount;
stateManger.update({count})  //設置狀態管理器中的count 

// 實際是{count:count} 第一行取出和第三行設置，這種對稱性很優雅

複製代碼

簡寫方法名稱

簡寫方法會被視爲匿名函數，而不是命名函數,這意味着不能經過函數內部的名稱來引用函數

const fn={
    foo(n){
        if(n<=2) return 1;
        return foo(n-1) + foo(n-2)
    }
 }
 fn.foo(7)  //報錯，foo未定義
複製代碼

只有在函數自引用的狀況下，纔會有關係，函數就像遞歸同樣引用了本身

const person={
    sayHello:function sayHello(){
        console.log(123);
    }
}
person.sayHello(); //123
複製代碼

使用this解決這個問題

//this.foo在函數的上下文中調用，若是被獨立開，就沒用了
const fn={
    foo(n){
        if(n<=2) return 1;
        return this.foo(n-1) + this.foo(n-2)
    }
}
const {foo}=fn;
console.log(fn.foo(7));   //13
const fn2={foo};
console.log(fn2.foo(7));  //13
const fn3={f:foo};
console.log(fn3.f(7)); //this.foo is not a function

複製代碼

函數使用自我引用時，請不要使用簡寫方法名稱

計算屬性名稱

計算屬性容許在對象字面量上使用動態屬性名稱

const property='color';
const flower={
    [property]:'red'
}
console.log(flower.property); //undefined
console.log(flower.color); //red
console.log(flower.color); //red

複製代碼