1. 新增屬性

複製物件的同時，為其新增新的屬性。

例子中複製了user物件到userWithPass，並添加了password屬性。

const user = { id: 110,name: 'Kayson Li'}
const userWithPass = { ...user,password: 'Password!' }

user //=> { id: 110,name: 'Kayson Li'}
userWithPass //=> {  id: 110,name: 'Kayson Li',password: 'Password!' }

2. 合併多個物件

利用...可以合併www.cppcns.com

const part1 = {  id: 110,name: 'Kayson Li' }
const part2 = { id: 110,password: 'Password!' }

const user1 = { ...part1,...part2 }
//=> { id: 110,name: 'Kayson L程式設計客棧i',password: 'Password!' }

3. 移除物件屬性

可以結合使用解構和剩餘操作符刪除物件的屬性。例子中password被解構出來，其他屬性保留在rest物件裡並被返回。

const noPassword = ({ password,...rest }) => rest
const user = {
  id: 110,password: 'Password!'
}

noPassword(user) //=> { id: 110,name: 'Kayson Li' }

4.動態移除屬性

來看一個例子。removeProperty函式接受一個引數prop，利用動態屬性名這個特性，prop可以動態地從拷貝物件中移除。

const user1 = {
  id: 110,password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _,...rest }) => rest
//                     ----       ------
//                          \   /
//                      動態解構

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 110,name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li',password: 'Password!' }

5. 調整屬性順序

有時候物件的屬性並不是我們想要的順序。利用一些技巧，可以將屬性移到最前面或最後面。

為了把id移到最前面，可以把id: undefined放在展開object的前面：

const user3 = {
  password: 'Password!',name: 'Bruce',id: 300
}

const organize = object => ({ id: undefined,...object })
//                            -------------
//                          /
//  移動 id 到第一個屬性位置

organize(user3)
//=> { id: 300,password: 'Password!',name: 'Bruce' }

要把password移動到最後位置，先從object中解構出password，然後把password放在展開object的後面：

const user3 = {
  password: 'Password!',id: 300
}

const organize = ({ password,...object }) =>
  ({ ...object,password })
//              --------
// www.cppcns.com            /
// 把 password 移動到最後

organize(user3)
//=> { name: 'Bruce',id: 300,password: 'Password!' }

6. 設定屬性預設值

當物件不存在某個屬性時，我們有時候需要給物件新增這個屬性，並設定一個預設值。

例如，user2沒有quotes屬性，setDefaults函式的作用是確保所有物件都有quotes，並有個預設值[]。

執行setDefaults(user2)，返回的物件包含quotes: []。

執行 setDefaults(user4)，由於userQndsqQuP4已經有quotes了，那它就保持不變。

const user2 = {
  id: 200,name: 'Jack Ma'
}

const user4 = {
  id: 400,name: '魯迅',quotes: ["我沒說過這句話……"]
}

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

setDefaults(user2)
//=> { id: 200,name: 'Jack Ma',quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,//=>   name: '魯迅',//=>   quotes: ["我沒說過這句話……"]
//=> }

如果想讓這個屬性在最前面，可以這樣寫：

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

7: 屬性重新命名

結合前面的幾個技巧，我們可以寫一個給屬性重新命名的函式。

假設某些物件都有大寫的ID屬性，我們想讓它們都變成小寫，該怎麼做呢？先從object中解構出ID的值，然後再把這個值合併到新物件裡，改成小寫的id：

const renamed = ({ ID,...object }) => ({ id: ID,...object })

const user = {
  ID: 500,name: "張全蛋"
}

renamed(user) //=> { id: 500,name: '張全蛋' }

8. 還有更秀的操作

可以根據條件決定是否新增某個屬性，這在構造請求引數的時候非常有用。比如，我們只在password有值的情況才新增該屬性：

const user = { id: 110,name: 'Kayson Li' }
const password = 'Password!'
const userWithPassword = {
  ...user,id: 100,...(password && { password })
}

userWithPasswQndsqQuPord //=> { id: 110,password: 'Password!' }

以上就是js ES6展開運算子的幾個妙用的詳細內容，更多關於JS ES6展開運算子的資料請關注我們其它相關文章！