從數(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ù)組中存儲不同的類型，很可能是做錯了什么。

補充：特殊位置刪除

當我們只是需要刪除數(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)文章希望大家以后多多支持腳本之家！

最新評論