ES6中物件簡寫屬性名的語法糖

2021-08-14 11:45:21 字數 901 閱讀 8749

首先讓我們看一段**

let demo1 = {};

// 屬性操作的get方法

function get(key)

//屬性操作的 set方法

function set(key,value)

//將物件還原成乙個空物件的方法

function clear();

}// 根據commonjs規範,模組輸出

module.exports =

在模組的末尾,模組輸出了乙個物件字面量。字面量的寫法是按照es5的規範寫的,雖然中規中矩,但多少有些麻煩,對於此,es6有了一種簡化寫法的語法糖。例如上面**的exports部分就可以寫成下面這樣:

module.exports =
簡言之,es6允許在物件字面量中直接寫入變數和函式,作為物件的屬性和方法。此時,屬性名就是變數名,屬性的值就是變數的值。

來個簡單點的例子:

function f(x,y);

}//等同於

function f(x,y)

}

剛剛說過了,除了普通變數作為屬性外,函式作為方法也可以簡寫:

const o = 

}//等同於

const o =

};

在此強調一下,這裡的語法糖,是在開發者想要實現

物件屬性(方法)名稱和外部變數(函式)名稱,同名的情況下,省略了屬性名的重複書寫以及冒號。

如果不想要同名的話,還是要自己起乙個其他的屬性(方法)名,然後加上冒號和外部的變數的。

其實這個語法糖,只是讓我們在寫返回值(例如第乙個例子中的module.exports)的時候能少些兩筆罷了。

ES6新語法計算屬性名

你可能也經歷過下面 片段中的這種情況,其中的乙個或多個屬性名來自於某個表示式,因此無法用物件字面量表達。var prefix user var o o prefix foo function o prefix bar function es6新增語法可以解決這個問題 var prefix user ...

ES6基礎之 物件屬性名

有乙個叫food的空白物件,往這個物件裡面新增屬性可以用點的方式,比如 let food food.dessert cake console.log food 如果屬性的名字包含空格,繼續使用點的方式來新增屬性的話,輸出food的時候就會報語法錯誤 let food food.dessert cak...

es6超好用的語法糖Decorator

decorator 修飾器 裝飾器 是es6提出的語法糖,用於修改類的行為。不過目前主流瀏覽器都沒有很好的支援,我們需要用babel來轉換為瀏覽器能識別的語言。在這篇文章中將介紹decorator的基礎用法和一些應用例項。testable class myclass function testabl...