javascript 如何简化这两个JS函数的编码?

tvz2xvvm  于 2023-02-21  发布在  Java
关注(0)|答案(5)|浏览(132)

背景:下面的代码工作正常,我能够使用这两个函数并返回预期值。
问:有没有办法简化下面的函数编码?

red_messages_disabled_p1() {
    let s = this.status;
    if (s.red_messages[0] === null) {
        return 'none';
      } else {
        return 'inline-block';
      }
  },

  red_messages_disabled_p2() {
    let s = this.status;
    if (s.red_messages[1] === null) {
        return 'none';
      } else {
        return 'inline-block';
      }
  },

我试过什么了?我试过想弄明白,但是没有头绪,我想这是不可能再简化了,对吗?
期待?我期待可能有简化的方式为这个编码.

v6ylcynt

v6ylcynt1#

第一种选择:

red_messages_disabled_p(i) {
  return this.status.red_messages[i-1] === null ? 'none' : 'inline-block';
}

第二种选择:

red_messages_disabled_p(i) {
  return this.status.red_messages[i-1] ? 'inline-block' : 'none';
}
yjghlzjz

yjghlzjz2#

避免代码重复。两个函数包含相同的逻辑。因此,将该逻辑移到一个单独的方法中,如下所示:

class MyClass {
    status = {red_messages: []}

    redMsgDisplayStyle(msg) {
        if (msg === null) {
            return 'none';
        }
        return 'inline-block';
    }

    red_messages_disabled_p1() {
        return this.redMsgDisplayStyle(this.status.red_messages[0])
    }

    red_messages_disabled_p2() {
        return this.redMsgDisplayStyle(this.status.red_messages[1])
    }
}

这不仅简化了代码,而且在您决定将来更改逻辑时,也使代码不易出错。
此外,用三元运算符替换if-else可能不是一个好主意,因为:1)它实际上并没有简化逻辑,只是语法不同; 2)三元运算符可读性较差。

tcbh2hod

tcbh2hod3#

使用参数化函数

red_messages_disabled(index) {
  let s = this.status;
  if (s.red_messages[index] === null) {
    return 'none';
  } else {
    return 'inline-block';
  }
}

red_messages_disabled_p1() {
  return this.red_messages_disabled(0);
};

red_messages_disabled_p2() {
  return this.red_messages_disabled(1);
};
yws3nbqq

yws3nbqq4#

使用三元运算符

red_messages_disabled_p1() {
  let s = this.status;
  return s.red_messages[0] === null ? 'none' : 'inline-block';
}

red_messages_disabled_p2() {
  let s = this.status;
  return s.red_messages[1] === null ? 'none' : 'inline-block';
}
ee7vknir

ee7vknir5#

对于这个问题已经有很多很好的答案了,但是我想提交我自己的解决方案。

const redMessageDisabled => (index) {
    return (s.red_messages[index] === null)?"none":"inline-block";
}

但是,我认为您可以将s.red_messages[index]传递给函数

const redMessageDisabled => (data) {
    return (data === null) ? "none" : "inline-block";
}

相关问题