从 JavaScript 中的数组中删除未定义的值

作者

从数组中删除未定义的值

Remove Undefined Values from an Array in JavaScript

从数组中删除所有未定义的值：

  1. 使用该Array.filter()方法遍历数组。
  2. 检查每个值是否不等于undefined并返回结果。
  3. 该filter()方法将返回一个不包含任何
    undefined值的新数组。
索引.js
// ✅ Remove all undefined values from an array
const arr = ['a', undefined, 'b', undefined, 'c', undefined];

const results = arr.filter(element => {
  return element !== undefined;
});

console.log(results); // 👉️ ['a', 'b', 'c']

// ---------------------------------------------------

// ✅ Remove all undefined and null values from an array

const arr2 = [null, 'a', undefined, 'b', null, undefined, 'c', undefined];

const results2 = arr2.filter(element => {
  return element !== undefined && element !== null;
});

console.log(results2); // 👉️ ['a', 'b', 'c']

我们传递给
Array.filter()
方法的函数会被数组中的每个元素调用。

如果函数返回真值，则该元素将添加到新数组中。

我们明确检查每个元素是否不等于undefined以排除所有
undefined值。

该filter()方法不会更改原始数组的内容。它返回一个只包含满足条件的元素的新数组。

我们经常要做的事情是falsy从数组中删除所有值。

JavaScript 中的虚假值是：false, 0, "", null, undefined, NaN。

从数组中删除所有虚假值

要从数组中删除所有虚假值：

  1. 使用该Array.filter()方法遍历数组。
  2. 在每次迭代中，返回当前元素。
  3. 该filter()方法将返回一个新数组，该数组仅包含原始数组的真值。
索引.js
// ✅ Remove all falsy values from an array
const arr = ['a', NaN, '', undefined, 'b', , undefined, 0, 'c', null, NaN];

const results = arr.filter(element => {
  return element;
});

console.log(results); // 👉️ ['a', 'b', 'c']

该filter()方法必须确定每个元素的值是真值还是假值，因为它只会将真值添加到results数组中。

您可以想象每个元素都被传递给Boolean()构造函数，只有真实元素返回true并包含在新数组中。

索引.js
const arr = ['a', '', 'b', , undefined, 0, 'c', null, NaN];

const results = arr.filter(element => {
  return Boolean(element);
});

console.log(results); // 👉️ ['a', 'b', 'c']

如果您必须undefined经常从数组中删除所有值，请定义一个可重用的函数。

索引.js
function removeUndefined(array) {
  return array.filter(element => {
    return element !== undefined;
  });
}

const arr = ['a', undefined, 'b', undefined, 'c', undefined];

// 👇️ [ 'a', 'b', 'c' ]
console.log(removeUndefined(arr));

该removeUndefined()函数接受一个数组并undefined
从数组中删除所有值。

另一种方法是使用Array.forEach()方法。

使用#从数组中删除所有未定义的值Array.forEach()

从数组中删除所有未定义的值：

  1. 创建一个空数组来存储结果。
  2. 使用该forEach()方法遍历数组。
  3. 检查每个元素是否不等于undefined。
  4. 如果满足条件，则将元素推入结果数组。
索引.js
const arr = ['a', undefined, 'b', undefined, 'c', undefined];

const results = [];

arr.forEach(element => {
  if (element !== undefined) {
    results.push(element);
  }
});

console.log(results); // 👉️ ['a', 'b', 'c']

我们传递给
Array.forEach()
方法的函数会针对数组中的每个元素进行调用。

在将当前元素推入数组之前，我们有条件地检查它是否不等于。 undefinedresults

该results数组不包含任何undefined值。

如果您必须经常这样做，请创建一个可重用的函数。

索引.js
function removeUndefined(array) {
  const newArray = [];

  array.forEach(element => {
    if (element !== undefined) {
      newArray.push(element);
    }
  });

  return newArray;
}

const arr = ['a', undefined, 'b', undefined, 'c', undefined];

const results = removeUndefined(arr);

console.log(results); // 👉️ [ 'a', 'b', 'c' ]

该函数将数组作为参数并undefined从数组中删除所有值。

从 JavaScript 中的数组中删除空（无效）元素

从数组中删除所有空元素：

  1. 使用该filter()方法遍历数组。
  2. 检查每个元素是否不等于null和undefined。
  3. 该filter()方法将返回一个仅包含原始数组的非空元素的数组。
索引.js
const arr = ['a', , 'b', , undefined, 0, 'c', null];

const results = arr.filter(element => {
  return element !== null && element !== undefined;
});

console.log(results); // 👉️ ['a', 'b', 0, 'c']

我们传递给Array.filter()方法的函数被数组中的每个元素调用。

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

在示例中，我们从数组中删除所有空元素null和元素。undefined

请注意，空元素会自动删除，因为该函数永远不会用空元素调用。

请注意，我们使用了逻辑 AND&&运算符，它仅true在两个条件都返回时才返回true。

您的用例可能不同，例如，您还需要排除所有空字符串和NaN值。&&在这种情况下，使用(and) 运算符添加附加条件。
索引.js
const arr = ['a', '', 'b', , undefined, 0, 'c', null, NaN];

const results = arr.filter(element => {
  return (
    element !== null &&
    element !== undefined &&
    element !== '' &&
    !Number.isNaN(element)
  );
});

console.log(results); // 👉️ ['a', 'b', 0, 'c']

我们从数组中删除了所有空的、 undefined、null、空字符串或元素。NaN

我们使用了逻辑 AND&&运算符，因此必须满足所有条件才能将元素包含在results数组中。

您可以使用逻辑 AND&&运算符根据需要链接任意多个条件。

–