Question

假设我想做一些事情，比如检查一个元素是否分配给一个变量，因此可以生成一个缓冲区，或者创建一个新的缓冲区，如下所示：

if (element) { // may be null or an image / video DOM element
    scratchBoardContext.drawImage(element, 0, 0, width, height);
    this.buffer = scratchBoardContext.getImageData(0, 0, width, height).data;
} else {
    this.buffer = createBlankBuffer(width, height);
}

以下代码将（完全）错误，但我想知道是否可以使用类似的东西将之前的逻辑缩短为单行代码：

this.buffer = scratchBoardContext.drawImage(element, 0, 0, width, height) && scratchBoardContext.getImageData(0, 0, width, height).data || createBlankBuffer(width, height);

现在“为什么你想要一个单一的班轮”是一个不同的主题，但我很好奇是否可以这样做，因为我经常看到人们将多行代码缩短成很好的短一行，仍然可以很容易理解

根据答案，这是一种很好的格式化方式：

this.buffer = (element && scratchBoardContext.drawImage(element, 0, 0, width, height), 
    scratchBoardContext.getImageData(0, 0, width, height).data) 
    || createBlankBuffer(width, height);

我相信我做对了，可能需要调整一下。根据环境的不同，这可能更合适，但显然最好使用if / else，因为清晰度要比简洁更好。对于只有少数喜欢较短代码的合作者的小型项目，可能这种语法很有用。

Answer 1

可能，当然，因为第一个块正在做两个事情而第二个块正在做一个事情，你会必须使用难看且难以阅读的逗号运算符：

this.buffer = element
  ? (
    scratchBoardContext.drawImage(element, 0, 0, width, height),
    scratchBoardContext.getImageData(0, 0, width, height).data
  )
  : createBlankBuffer(width, height)

或者，分成一行：

this.buffer = element ? ( scratchBoardContext.drawImage(element, 0, 0, width, height), scratchBoardContext.getImageData(0, 0, width, height).data ) : createBlankBuffer(width, height);

但这是不可读的 - 我更喜欢第一个版本，甚至更好的if / else版本。

Answer 2

您可以使用ternary运算符。但是，由于您有两个语句，请确保使用comma运算符

this.buffer=(element)?(scratchBoardContext.drawImage(element, 0, 0, width, height), scratchBoardContext.getImageData(0, 0, width, height).data): createBlankBuffer(width, height);

像这样的逻辑可以写成一个单行程吗？

2 个答案: