请大伙讨论下面2个版本的代码哪个更好？

Question

RT，或者可以提供更好的版本（允许依赖三方库

function version1(condition){
  if(condition || condition === 0){
    console.log('version1允许'+condition+'执行')
  }else{
    console.log('version1不允许'+condition+'执行')
  }
}

function version2(condition){
  if(condition !== null && condition !== undefined && condition !== ''){
    console.log('version2允许'+condition+'执行')
  }else{
    console.log('version2不允许'+condition+'执行')
  }
}

version1(null)
version1(undefined)
version1('')
version1(0)
version1('anything')

console.log('============')

version2(null)
version2(undefined)
version2('')
version2(0)
version2('anything')

Answer 1

function version1(condition){
  let flag = [null, undefined , '']
  if(!flag.includes(condition)){
    console.log('version1允许'+condition+'执行')
  }else{
    console.log('version1不允许'+condition+'执行')
  }
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

从可读性和代码健壮性的角度来看，version2 更好，因为它能够清楚地表达出在什么情况下应该允许执行，避免了类型转换带来的潜在问题。

Answer 3

补充一个空值的概念

我们一般称 null 和 undefined 为空值
false、0、-0、0n、''、null、undefined 和 NaN 为假值，在布尔判断中这些都为false，假值是包含空值的
假值以外的都是真值

空值可以通过 a == null 来判断，等价于 condition === null || condition === undefined

空值也可以通过 a ?? '非空值' 来进行空值合并，等价于 (condition === null || condition === undefined) || '非空值'

那么过滤空值和字符串就可以采用 a != null && a !== ''
还可以采用 (a ?? '') !== ''

Answer 4

function isFalsy(value) {
  return value === null || value === undefined || value === "";
}

function version2(condition) {
  if (!isFalsy(condition)) {
    console.log("version2允许" + condition + "执行");
  } else {
    console.log("version2不允许" + condition + "执行");
  }
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

第二个，具体可以借鉴现在各种构建工具用的 only-allow 这个库的思路。

但是正常业务里面不需要那么严谨，第一个就够用了，毕竟数据来源都是受控的。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 6

condition !== null && condition !== undefined && condition !== '' 改成 !!condition 试试

Answer 7

我的理解是，楼主想要去掉虚值，如下代码何尝不好

const version3 = (condition)=>{
  if(!condition){
    console.log('version3允许'+condition+'执行')
  }else{
    console.log('version3不允许'+condition+'执行')
  }
}

Answer 8

针对这两个方法，可以进行进一步的优化。

可以使用“真值表达式”或者“真值检测”，在JS中，当一个值不是以下任何一项时，都被认为是真值：false、0、空字符串''、null、undefined和NaN。因此，可以直接对输入的值进行真值检测，而无需进行更复杂的条件判断。

function version3(condition) {
  if (condition) {
    console.log('version3允许' + condition + '执行');
  } else {
    console.log('version3不允许' + condition + '执行');
  }
}

Answer 9

个人觉得第一种全面一些，因为会涉及其他类型隐式转换为 布尔类型，第二种方式也可以，只是要列举的情况比较多了，例如 condition = NaN | -1 等等怎么办。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 10

我也喜欢第一种，简单明了

Answer 11

都不好。

1. if...else...太啰嗦
2. version2的头两个条件可以用!condition来替代，!a检查所有虚值，但包括0

function v3(x){
    return (x || x === 0) ? "允许" : "不允许"
}

function v4(x){
    return (!x && x !== 0) ? "不允许" : "允许"
}

console.log('缺参数', v3(), v3() === v4())
console.log(undefined, v3(undefined), v3(undefined) === v4(undefined))
console.log(null, v3(null), v3(null) === v4(null))
console.log('', v3(''), v3('') === v4(''))
console.log(0, v3(0), v3(0) === v4(0))
console.log(100, v3(100), v3(100) === v4(100))
console.log('string', v3('string'), v3('string') === v4('string'))

Answer 12

从代码可读性、简洁性和执行效果的角度来看，version1 更好。从执行上效果 version1 使用了更少的代码来实现相同的功能。如果你希望进一步优化代码，可以考虑使用三元运算符，使代码更加简洁：

function version3(condition) {
  console.log((condition || condition === 0 ? '允许' : '不允许') + condition + '执行');
}

version3(null);
version3(undefined);
version3('');
version3(0);
version3('anything');

这个版本的代码，代码更加简洁。

Answer 13

第二种好点，这是写js都会遇到一个判断false的问题了，
第一种如果是0时就不好处理了，所以还是第二种比较好。

Answer 14

如果加上TS，规定只能传入数字或者字符串，第一种就可以满足，没有加的话，不知道具体传入的类型，这些函数又有可能会传入对象，或者NaN之类的，健全一点的话还是加上类型检测，类似这种：

if (typeof condition == 'number') {
        return true;
}
if (typeof condition == 'string') {
    if (condition) return true;
}
...//