卡卡網(wǎng)

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

將屬性設(shè)置為undefined

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

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

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

示例：

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

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

{color: undefined, brand: 'Ford'}

解釋

定義car對(duì)象原始屬性：color和brand。

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

再查看car對(duì)象。

使用delete還是非常快的，如果你有很好的理由要考慮這種性能問題，否則應(yīng)該有更清晰的語義和功能。

在不改變?cè)瓕?duì)象的情況下刪除屬性

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

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 //查看新對(duì)象

輸出

{brand: 'Ford'}

可以看到新對(duì)象屬性不包含color屬性。

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

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

可以看到原對(duì)象屬性并沒有變化。

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

解釋：

car對(duì)象原屬性包含：color和brand。

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

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

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

總結(jié)

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

相關(guān)文章

• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: 屬性  刪除屬性  delete  undefined  rest