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