js去掉数组中非数字内容

如何从 JavaScript 数组中过滤出数字元素

在 JavaScript 中，数组经常包含不同类型的数据，可能是数字、字符串或其他类型的元素。有时，我们需要从一个混合类型的数组中筛选出所有的数字元素。本文将通过一个实例，演示如何使用 JavaScript 的 Array.prototype.filter 方法和 isNaN 函数来实现这一目标。

目标

假设我们有一个包含不同数据类型的数组 checkedKeys，我们希望过滤掉所有非数字的元素，仅保留数字内容。下面是我们的数据示例：

const checkedKeys = [
  'PROJECT', '1896801984109608961', '9876543210987654329', '9876543210987654331',
  '9876543210987654327', '9876543210987654330', '9876543210987654328', '9876543210987654326',
  'STATION', '9876543210987654335', '9876543210987654333', '9876543210987654336', 
  '9876543210987654334', '9876543210987654332', 'DEVICE_TYPE', '9876543210987654338', 
  '9876543210987654339', '9876543210987654340', '9876543210987654337', 'DEVICE', 
  '9876543210987654344', '9876543210987654342', '9876543210987654345', '9876543210987654343', 
  '9876543210987654341', 'FILE', '9876543210987654346', '9876543210987654347', 'REPORT', 
  'TICKET', '9876543210987654349', '9876543210987654350', '9876543210987654348'
];

该数组包含了几种类型的数据，包括数字字符串、普通字符串（如 ‘PROJECT’, ‘STATION’ 等）以及其他标识符。我们希望提取出所有数字字符串，并将其存入新的数组中。

解决方案

我们可以通过 JavaScript 的 filter() 方法来过滤出数组中的数字。filter() 方法创建一个新数组，其中包含所有符合条件的元素。我们结合 isNaN() 函数来判断一个元素是否为数字，isNaN() 函数会返回 false 如果给定的值是数字，否则返回 true。

步骤

1. 使用 filter() 方法遍历数组
   filter() 方法接受一个回调函数，对数组中的每个元素执行该回调。回调函数应返回一个布尔值，true 表示该元素应保留，false 表示该元素应被移除。

2. 检查元素是否为数字
   使用 isNaN() 函数检查元素是否为有效的数字。如果元素是数字，isNaN() 会返回 false，我们希望保留这些元素。

实现代码

const checkedKeys = [
  'PROJECT', '1896801984109608961', '9876543210987654329', '9876543210987654331',
  '9876543210987654327', '9876543210987654330', '9876543210987654328', '9876543210987654326',
  'STATION', '9876543210987654335', '9876543210987654333', '9876543210987654336', 
  '9876543210987654334', '9876543210987654332', 'DEVICE_TYPE', '9876543210987654338', 
  '9876543210987654339', '9876543210987654340', '9876543210987654337', 'DEVICE', 
  '9876543210987654344', '9876543210987654342', '9876543210987654345', '9876543210987654343', 
  '9876543210987654341', 'FILE', '9876543210987654346', '9876543210987654347', 'REPORT', 
  'TICKET', '9876543210987654349', '9876543210987654350', '9876543210987654348'
];

// 过滤出仅包含数字的元素
const filteredCheckedKeys = checkedKeys.filter(key => !isNaN(key));

console.log(filteredCheckedKeys);

代码解释

• checkedKeys.filter(key => !isNaN(key))
  这行代码通过 filter() 方法过滤出所有数字。key => !isNaN(key) 是一个箭头函数，它对每个元素进行检查，判断该元素是否是一个有效的数字。如果 isNaN(key) 返回 false（表示该元素是数字），那么这个元素就会被保留在新数组中。

结果

执行上述代码后，filteredCheckedKeys 数组将只包含数字内容：

[
  '1896801984109608961', '9876543210987654329', '9876543210987654331', '9876543210987654327',
  '9876543210987654330', '9876543210987654328', '9876543210987654326', '9876543210987654335',
  '9876543210987654333', '9876543210987654336', '9876543210987654334', '9876543210987654332',
  '9876543210987654338', '9876543210987654339', '9876543210987654340', '9876543210987654337',
  '9876543210987654344', '9876543210987654342', '9876543210987654345', '9876543210987654343',
  '9876543210987654341', '9876543210987654346', '9876543210987654347', '9876543210987654349',
  '9876543210987654350', '9876543210987654348'
]

通过使用 Array.prototype.filter() 方法和 isNaN() 函数，我们可以轻松地从一个包含多种类型元素的数组中筛选出数字元素。这种方法简单高效，适用于需要从复杂数据集中提取特定类型元素的场景。在实际开发中，这种技术可以广泛应用于数据处理、清洗和筛选操作。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。