卡卡網(wǎng)

在前面文章，已經(jīng)介紹過JS刪除對象屬性的兩種方法，其實，還有其他方法可以實現(xiàn)JS刪除屬性，比如本文介紹的方法，它可以比前文介紹的delete方法快50倍。

將屬性設(shè)置為undefined

如果你需要以非常優(yōu)化的方式刪除JS屬性，例如當你在循環(huán)中對大量對象進行操作時，你可以將屬性設(shè)置為undefined。

由于它的性質(zhì)， delete的性能比undefined簡單的重新分配要慢得多，慢了 50 倍以上。

但是，請記住，該屬性不會從對象中刪除。它的值已被擦除，但如果你迭代對象，它仍然存在。

示例：

const car = {
  color: 'blue',
  brand: 'Ford'
}
car.color = undefined
car

執(zhí)行結(jié)果

{color: undefined, brand: 'Ford'}

解釋

定義car對象原始屬性：color和brand。

把color的屬性設(shè)置為undefined。

再查看car對象。

使用delete還是非?？斓模绻阌泻芎玫睦碛梢紤]這種性能問題，否則應(yīng)該有更清晰的語義和功能。

在不改變原對象的情況下刪除屬性

如果可變性是一個問題，你可以通過復(fù)制舊對象的所有屬性來創(chuàng)建一個全新的對象，除了你要刪除的屬性：

const car = {
      color: 'blue',
      brand: 'Ford'
}
const prop = 'color'
     
const newCar = Object.keys(car).reduce((object, key) => {
      if (key !== prop) {
        object[key] = car[key]
      }
      return object
}, {})


newCar //查看新對象

輸出

{brand: 'Ford'}

可以看到新對象屬性不包含color屬性。

使用car語句查看原對象屬性，結(jié)果輸出

{color: 'blue', brand: 'Ford'}

可以看到原對象屬性并沒有變化。

下圖顯示上述執(zhí)行過程及結(jié)果

解釋：

car對象原屬性包含：color和brand。

重新定義一個變量newCar，把car的屬性賦給newCar，但color這個屬性除外。

思路很清晰，只是代碼看起來有點復(fù)雜。

這個方法與ES6里的rest，有異曲同工之合，但使用rest只需1行代碼就搞定，在前文已經(jīng)詳細介紹，使用rest語法刪除JS對象屬性。

總結(jié)

本文介紹了刪除JS對象屬性的快速方法，以及如何在不改變對象的情況下刪除屬性，在實際應(yīng)用中，可能用delete操作更多些，因為其語法簡單，并且語義清晰。

相關(guān)文章

• 【實例】演示2種方法JS從對象中刪除屬性

標簽: 屬性  刪除屬性  delete  undefined  rest