从 JavaScript 中的数组中删除空对象

作者

在 JavaScript 中从数组中删除空对象

Remove Empty Objects from an Array in JavaScript

从数组中删除空对象：

  1. 使用该Array.filter()方法遍历数组。
  2. 使用该Object.keys()方法检查每个对象是否不为空。
  3. 该filter()方法将返回一个不包含空对象的新数组。
索引.js
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()方法的函数

被数组中的每个元素（对象）调用。

如果该函数返回真值，则该filter()方法将该元素添加到结果数组。

Object.keys
()
方法返回一个包含对象键的数组。

索引.js
console.log(Object.keys({})); // 👉️ []

console.log(Object.keys({id: 1})); // 👉️ ['id']

如果对象没有键值对，则该方法返回一个空数组。

如果它至少有 1 个键值对，我们只返回true并将对象添加到数组中。results

请注意，如果使用空数组或数字调用Object.keys(obj).length，表达式将返回。 0[] 0
索引.js
console.log(Object.keys(0).length); // 👉️ 0

console.log(Object.keys([]).length); // 👉️ 0

如果您的数组包含对象以外的类型，请使用以下方法仅从数组中删除空对象。

索引.js
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);

我们使用&&(and) 运算符来指定必须满足所有条件才能if运行该块。

我们首先检查元素的类型是否为object，但这还不够，因为 JavaScript 数组也有一个类型object。

索引.js
console.log(typeof []) // 👉️ 'object'

然后我们检查元素不是数组并且对象是空的。

如果满足所有条件，我们知道我们有一个空对象，不应将其添加到数组中results，因此我们返回。 false

在所有其他情况下，数组元素不是空对象并被添加到新数组中。

大多数情况下，在数组中存储多种不同类型是一种反模式。如果您需要在同一个数组中存储不同的类型，很可能是您做错了什么。

如果您必须经常从数组中删除空对象，请定义一个可重用的函数。

索引.js
function removeEmptyObjects(array) {
  const newArray = array.filter(element => {
    if (Object.keys(element).length !== 0) {
      return true;
    }

    return false;
  });

  return newArray;
}

const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = removeEmptyObjects(arr);

// 👇️ [{id: 1}, {id: 2}]
console.log(results);

该removeEmptyObjects()函数将数组作为参数并从数组中删除空对象。

或者，您可以使用该Array.forEach()方法遍历数组。

Remove Empty Objects from an Array using Array.forEach() #

This is a three-step process:

  1. Use the Array.forEach() method to iterate over the array.
  2. Use the Object.keys() method to check if each object isn’t empty.
  3. Push the matching elements into a new array.
index.js
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = [];

arr.forEach(element => {
  if (Object.keys(element).length !== 0) {
    results.push(element);
  }
});

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(results);

The function we passed to the
Array.forEach
method gets called with each element (object) in the array.

On each iteration, we use the Object.keys() method to check if the current
object isn’t empty.

If the condition is met, we push the object into the results array.

If you have to do this often, create a reusable function.

index.js
function removeEmptyObjects(array) {
  const newArray = [];

  array.forEach(element => {
    if (Object.keys(element).length !== 0) {
      newArray.push(element);
    }
  });

  return newArray;
}

const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const result = removeEmptyObjects(arr);

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(result);

The removeEmptyObjects() function takes an array as a parameter and removes
all empty objects from the array.

Here is an example that removes the null and undefined values and the empty
objects from an array.

index.js
function removeEmptyObjects(array) {
  const newArray = [];

  array.forEach(element => {
    if (
      element !== null &&
      element !== undefined &&
      Object.keys(element).length !== 0
    ) {
      newArray.push(element);
    }
  });

  return newArray;
}

const arr = [{}, null, {id: 1}, null, {}, {id: 2}, {}];

const result = removeEmptyObjects(arr);

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(result);

We used the logical AND (&&) operator, so for the if block to run, all 3
conditions have to be met.

The new array doesn’t contain any null and undefined values and empty
objects.

Alternatively, you can use a basic for loop.

Remove Empty Objects from an Array using a for loop #

This is a four-step process:

  1. Declare a results variable and initialize it to an empty array.
  2. Use a for loop to iterate over the original array.
  3. Use the Object.keys() method to check if each object isn’t empty.
  4. Push the matching elements into the results array.
index.js
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = [];

for (let index = 0; index < arr.length; index++) {
  if (Object.keys(arr[index]).length !== 0) {
    results.push(arr[index]);
  }
}

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(results);

我们使用for循环来遍历对象数组。

在每次迭代中，我们使用该方法检查当前对象是否不为空
Object.keys()。

如果满足条件，我们将对象推入数组results。

您选择哪种方法是个人喜好的问题。我会使用该
Array.filter()方法，因为我发现它非常直接和直观。