从 Javascript 中的数组中删除空值

作者

从数组中删除空值

Remove Null Values from an Array in Javascript

要从数组中删除所有空值：

  1. 使用该Array.filter()方法遍历数组。
  2. 检查每个元素是否不等于null。
  3. 该filter()方法返回一个仅包含满足条件的元素的新数组。
索引.js
// ✅ Remove null values from an array
const arr = ['one', null, 'two', 0, null, undefined, 'three', null];

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

console.log(results); // 👉️ [ 'one', 'two', 0, undefined, 'three' ]

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

// ✅ Remove null and undefined values from an array

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

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

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

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

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

我们显式检查每个元素是否不等于以null仅向新数组添加非空元素。

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

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

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

从数组中删除所有虚假值

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

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

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

console.log(results); // 👉️ [ 'one', 'two', 'three' ]

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

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

索引.js
const arr = [null, NaN, 'one', null, 'two', 0, null, undefined, 'three', null];

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

console.log(results); // 👉️ [ 'one', 'two', 'three' ]

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

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

const arr = ['one', null, 'two', 0, null, undefined, 'three', null];

const result = removeNull(arr);
console.log(result); // 👉️ [ 'one', 'two', 0, undefined, 'three' ]

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

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

使用 Array.forEach() 从数组中删除所有空值

要从数组中删除所有空值：

  1. 声明一个results变量并将其设置为一个空数组。
  2. 使用该forEach()方法遍历数组。
  3. 检查每个元素是否不等于null。
  4. 将满足条件的元素压入results数组。
索引.js
const arr = ['one', null, 'two', null, 'three', null];

const results = [];

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

console.log(results); // 👉️ ['one', 'two', 'three']

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

null在每次迭代中，我们在将当前元素推入results数组之前检查它是否不等于。

新数组只包含原始数组的非空元素。

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

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

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

  return newArray;
}

const arr = ['one', null, 'two', null, 'three', null];

const result = removeNull(arr);
console.log(result); // 👉️ [ 'one', 'two', 'three' ]

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

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

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

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

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

console.log(results); // 👉️ [ 'one', 'two', 'three' ]

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

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

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

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

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

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

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

console.log(results); // 👉️ [ 'one', 'two', 0, 'three' ]

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

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

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

您还可以使用基本循环从数组for中删除所有值。null

使用循环null从数组中删除所有值for

null要从数组中删除所有值：

  1. 声明一个results变量并将其初始化为一个空数组。
  2. 使用for循环遍历原始数组。
  3. 检查每个元素是否不等于null。
  4. 将匹配的元素压入results数组。
索引.js
const arr = ['one', 'two', null, undefined, 0, 'three', null, undefined];

// ✅ Remove null values from an array

const results1 = [];

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

// 👇️ [ 'one', 'two', undefined, 0, 'three', undefined ]
console.log(results1);

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

// ✅ Remove null and undefined values from an array

const results2 = [];

for (let index = 0; index < arr.length; index++) {
  if (arr[index] !== null && arr[index] !== undefined) {
    results2.push(arr[index]);
  }
}

// 👇️ [ 'one', 'two', 0, 'three' ]
console.log(results2);

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

在每次迭代中，我们检查当前元素是否不等于null。

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

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

–