为何检查extraUsers对象数组非空字符串的函数返回false而非预期true？

问题场景 #

需要验证用户输入信息（包括extraUsers数组中的用户）的所有字符串均不为空，示例数据如下：

const userInfo = {
  firstName: 'Jimmy',
  lastName: 'Hendrix',
  extraUsers: [{
    firstName: 'Bob',
    lastName: 'Michael'
  }],
};

编写了如下检查函数，预期返回true（因为所有字符串非空），但实际输出false：

function checkForEmptyStrings() {
  return (
    userInfo.extraUsers.every((extraUser) => {
      Object.values(extraUser).every((x) => x !== '')
    })
  );
}

console.log(checkForEmptyStrings()) // 输出false

单独打印内层Object.values(extraUser).every((x) => x !== '')结果为true。

原因 #

问题出在箭头函数的返回值处理上：

• 当箭头函数使用大括号{}包裹代码块时，必须显式使用return语句返回值，否则默认返回undefined。
• 外层every的回调函数中，内层every的结果没有被返回，导致每个extraUser对应的回调返回undefined。
• 而every方法会把undefined判定为false，因此整个userInfo.extraUsers.every(...)最终返回false。

修复方案 #

有两种方式可以解决：

方式1：去掉内层箭头函数的大括号，隐式返回结果 #

function checkForEmptyStrings() {
  return (
    userInfo.extraUsers.every((extraUser) => 
      Object.values(extraUser).every((x) => x !== '')
    )
  );
}

方式2：显式添加return语句 #

function checkForEmptyStrings() {
  return (
    userInfo.extraUsers.every((extraUser) => {
      return Object.values(extraUser).every((x) => x !== '')
    })
  );
}

修改后再执行，函数会正确返回true。

内容的提问来源于stack exchange，提问作者Max S.