使用Array.filter筛选指定位数数字时返回空数组的问题排查

需求 #

创建一个函数，接收数字数组与指定数值，返回由位数匹配该数值的数字组成的数组。

原实现代码 #

function filtrarPorQuantidadeDeDigitos (array, nDigitos) {
  let solucao = array.filter(elemento => {
    elemento.toString().length === nDigitos
    console.log(elemento.toString().length == nDigitos)
  })
  return solucao
}

console.log(filtrarPorQuantidadeDeDigitos([123, 11, 158, 0], 3))

问题 #

通过Array.filter结合箭头函数，将数字转为字符串判断长度，console.log显示布尔值正确，但返回空数组。请问原因是什么？如何解决？是否有类似实现方式？

原因 #

• 箭头函数的返回值规则：当箭头函数使用花括号{}包裹代码块时，必须显式使用return语句返回值。原代码中，箭头函数内只执行了判断和日志打印，但没有返回判断结果，默认返回undefined。而Array.filter会将undefined视为false，因此没有任何元素被保留，最终返回空数组。

解决方法 #

有两种可行的修正方式：

1. 去掉花括号，利用箭头函数隐式返回：当箭头函数的代码仅为单个表达式时，可以省略花括号，表达式的结果会自动作为返回值：

function filtrarPorQuantidadeDeDigitos (array, nDigitos) {
  let solucao = array.filter(elemento => 
    elemento.toString().length === nDigitos
  )
  return solucao
}

2. 显式添加return语句：如果需要保留花括号（比如要添加日志或其他逻辑），必须手动返回判断结果：

function filtrarPorQuantidadeDeDigitos (array, nDigitos) {
  let solucao = array.filter(elemento => {
    const isMatch = elemento.toString().length === nDigitos
    console.log(isMatch)
    return isMatch
  })
  return solucao
}

类似实现方式 #

除了原有的字符串转换+filter的思路，还可以用以下方式实现：

• 数学方法计算位数（避免字符串转换）：通过对数运算计算数字的位数，注意处理0和负数的情况：

function filtrarPorQuantidadeDeDigitos (array, nDigitos) {
  return array.filter(num => {
    if (num === 0) return nDigitos === 1
    const digitCount = Math.floor(Math.log10(Math.abs(num))) + 1
    return digitCount === nDigitos
  })
}

• 使用reduce手动收集元素：通过reduce遍历数组，手动将符合条件的元素加入结果数组：

function filtrarPorQuantidadeDeDigitos (array, nDigitos) {
  return array.reduce((result, num) => {
    if (num.toString().length === nDigitos) {
      result.push(num)
    }
    return result
  }, [])
}

内容的提问来源于stack exchange，提问作者Bruno