如何從JavaScript數(shù)組中刪除空對象
從數(shù)組中刪除空對象:
- 使用
Array.filter()
方法遍歷數(shù)組。 - 將每個對象傳遞給
Object.keys()
方法并檢查鍵的長度是否不等于 0。 filter
方法將返回一個不包含空對象的新數(shù)組。
const arr = [{}, {id: 1}, {}, {id: 2}, {}]; const results = arr.filter(element => { if (Object.keys(element).length !== 0) { return true; } return false; }); // ??? [{id: 1}, {id: 2}] console.log(results);
我們傳遞給 Array.filter
方法的函數(shù)被數(shù)組中的每個元素(對象)調(diào)用。
如果函數(shù)返回真值,則 filter
方法將該元素添加到結(jié)果數(shù)組。
Object.keys
方法返回一個包含對象鍵的數(shù)組。
console.log(Object.keys({})); // ??? [] console.log(Object.keys({id: 1})); // ??? ['id']
如果對象沒有鍵值對,則該方法返回一個空數(shù)組。
如果它至少有 1 個鍵值對,我們只返回 true 并將對象添加到結(jié)果數(shù)組。
請注意 ,如果使用空數(shù)組
[]
或數(shù)字 0 調(diào)用Object.keys(obj).length
方法將返回 0。
console.log(Object.keys(0).length); // ??? 0 console.log(Object.keys([]).length); // ??? 0
如果我們的數(shù)組包含對象以外的類型,請使用以下方法僅從數(shù)組中刪除空對象。
const arr = [{}, {id: 1}, 'a', 0, {}, []]; const results = arr.filter(element => { if ( typeof element === 'object' && !Array.isArray(element) && Object.keys(element).length === 0 ) { return false; } else { return true; } }); // ??? [{id: 1}, 'a', 0, []] console.log(results);
我們使用 &&
(與)運算符來指定必須滿足所有條件才能運行 if 塊。
我們首先檢查元素是否有對象類型,但這還不夠,因為 JavaScript 數(shù)組也有對象類型。
console.log(typeof []) // ??? 'object'
然后我們檢查元素不是數(shù)組并且對象是空的。
如果滿足所有這些條件,我們就知道我們有一個空對象,不應(yīng)將其添加到結(jié)果數(shù)組中,因此我們返回 false。
在所有其他情況下,數(shù)組元素不是空對象并被添加到新數(shù)組中。
大多數(shù)情況下,在數(shù)組中存儲多種不同類型是一種反模式。 如果我們需要在同一個數(shù)組中存儲不同的類型,很可能是做錯了什么。
補(bǔ)充:特殊位置刪除
當(dāng)我們只是需要刪除數(shù)組的首尾數(shù)據(jù)的時候,也可以通過js的pop或者shift方法實現(xiàn),這其實是兩對對應(yīng)的操作:添加與刪除。
push 與pop
通過push我們可以將元素添加到數(shù)組末尾,通過pop將末尾元素去除并返回。
const arr = [1, 2, 3, 4, 5, 6] // 添加元素到數(shù)組末尾 arr.push(7) // arr: [1, 2, 3, 4, 5, 6, 7] // 取出數(shù)組末尾元素并返回 const pop_res = arr.pop() // arr: [1, 2, 3, 4, 5, 6], pop_res: 7
unshift與shift
通過unshift可以將元素添加到數(shù)組首部,通過shift可去除數(shù)組頭部元素并返回。
// 將元素添加到數(shù)組開頭 arr.unshift(0) // arr: [0, 1, 2, 3, 4, 5, 6] // 取出數(shù)組開頭元素并返回 const sft_res = arr.shift() // arr: [1, 2, 3, 4, 5, 6], sft_res = 0
總結(jié)
到此這篇關(guān)于如何從JavaScript數(shù)組中刪除空對象的文章就介紹到這了,更多相關(guān)JS數(shù)組刪除空對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一文教你用JavaScript制作個簡單的大轉(zhuǎn)盤游戲
日常生活中,我們經(jīng)常會見到形形色色的抽獎活動,例如九宮格、大轉(zhuǎn)盤等等……本文就來教大家如何利用JavaScript制作個簡單的大轉(zhuǎn)盤游戲,感興趣的可以了解一下2023-02-02ES6新特性三: Generator(生成器)函數(shù)詳解
這篇文章主要介紹了ES6新特性之Generator(生成器)函數(shù),簡單分析了Generator(生成器)函數(shù)的功能、定義、調(diào)用方法并結(jié)合實例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2017-04-04JavaScript判斷是否為數(shù)字的4種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實現(xiàn)代碼及運行效率效果圖,方便大家選擇使用,需要的朋友可以參考下2015-04-04當(dāng)滾動條滾動到頁面底部自動加載增加內(nèi)容的js代碼
這篇文章主要介紹了如何使用javscript實現(xiàn)滾動條滾動到頁面底部自動加載增加頁面內(nèi)容,需要的朋友可以參考下2014-05-05JavaScript 手動實現(xiàn)instanceof的方法
instanceof運算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上,本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧2021-10-10