首頁  >  文章  >  es6新特性有哪些

es6新特性有哪些

coldplay.xixi
coldplay.xixi原創
2021-02-22 11:59:27106074瀏覽

es6新特性:1、新增屬性給物件;2、合併物件;3、刪除物件的屬性;4、動態刪除屬性;5、調整物件屬性的位置;6、預設屬性;7、重命名物件的屬性;8、條件屬性。

es6新特性有哪些

本文操作環境:Windows7系統,ECMAScript 6.0版本,Dell G3電腦。

es6新特性:

1、新增屬性

複製對象,同時在(淺)複製對象新增附加屬性,如下程式碼:

const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }

在這個例子裡面user克隆成userWithPass,並且userWithPass物件加入了password屬性,程式碼簡潔且有效率。

2、合併物件

我們透過舉例來說明是如何操作的

const part1 = { id: 10, name: 'Howard Moon' }const part2 = { id: 11, password: 'Password!' }const user1 = { ...part1, ...part2 }//=> { id: 10, name: 'Howard Moon', password: 'Password!' }

在這個例子裡面我們將part1和part2合併成一個物件user1,也可以透過以下方式合併物件

const partial = { id: 100, name: 'Howard Moon' }const user = { ...partial, id: 100, password: 'Password!' }user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3、刪除物件的屬性

可以結合REST運算子使用析構來刪除屬性。

onst noPassword = ({ password, ...rest }) => restconst user = { id: 100, name: 'Howard Moon', password: 'Password!'}noPassword(user) //=> { id: 100, name: 'Howard moon' }

4、動態刪除屬性

可以利用物件屬性名,然後removeProperty傳遞屬性名稱將屬性刪除

const user1 = { id: 100, name: 'Howard Moon', password: 'Password!'}const removeProperty = prop => ({ [prop]: _, ...rest }) => rest// ---- ------//  /// dynamic destructuringconst removePassword = removeProperty('password')const removeId = removeProperty('id')removePassword(user1) //=> { id: 100, name: 'Howard Moon' }removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5、調整物件屬性的位置

有時屬性不符合我們所需的順序。使用一些技巧,我們可以將屬性推到列表的頂部,或者將它們移動到底部,例如:

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

在這個例子裡面將id已到了第一位,下面的例子是將password屬性移動到最後一位

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: 'Naboo', id: 300, password: 'Password!' }

6、預設屬性

const user2 = { id: 200, name: 'Vince Noir'}const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."]}const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: 'Vince Noir', quotes: [] }setDefaults(user4)//=> {//=> id: 400,//=> name: 'Bollo',//=> quotes: ["I've got a bad feeling about this..."]//=> }

#值得注意的是預設屬性值僅在未包含在原始物件中時才會設置,從這個例子的結果來看,我們就知道怎麼設定預設值了。或者你也可能需要這樣寫

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7、重新命名物件的屬性

在有些場景,例如我們可能需要修改物件屬性的大小寫,那麼我們可以透過這樣​​的方式來重新命名

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的

8、條件屬性

這個有時候會非常實用,從名字來看,顯示是透過條件來控制對象的屬性

const user = { id: 100, name: 'Howard Moon' }const password = 'Password!'const userWithPassword = { ...user, id: 100, ...(password && { password })}userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

相關影片推薦:PHP影片教學

以上是es6新特性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn