Question

const lerpFactor = {
    toggle: rightSide ? diff < 0 ? 0.15 : 0.1 : diff < 0 ? 0.1 : 0.15,
    title: rightSide ? diff < 0 ? 0.1 : 0.15 : diff < 0 ? 0.15 : 0.1
};

我应该如何格式化它，以便像我这样的初学者能够理解？

Answer 1

以适当的缩进开始：

const lerpFactor = {
    toggle: rightSide
      ? diff < 0
          ? 0.15
          : 0.1
      : diff < 0
          ? 0.1
          : 0.15,
    title: rightSide
      ? diff < 0
          ? 0.1
          : 0.15
      : diff < 0
          ? 0.15
          : 0.1
};

当然，此代码仍然是一团糟，无论是初学者还是很难理解的。它毫无意义（当然，主要是因为伪代码），并且有很多重复项。因此，引入适当命名的函数，您可以调用它们以降低复杂性和重复性，并进行一些布尔简化：

function getFactor(diff, invert) {
    return invert !== (diff < 0)
      ? 0.15
      : 0.1;
}
const lerpFactor = {
    toggle: getFactor(diff, !rightSide),
    title: getFactor(diff, rightSide),
};

Answer 2

toggle和title的条件是相同的，因此您可以将代码压缩为单个if / else链：

let toggle;
let title;
if (rightSide) {
  if (diff < 0) {
    toggle = 0.15;
    title = 0.1;
  } else {
    toggle = 0.1;
    title = 0.15;
  }
} else {
  if (diff < 0) {
    toggle = 0.1;
    title = 0.15;
  } else {
    toggle = 0.15;
    title = 0.1;
  }
}

const lerpFactor = { toggle, title };

另一种选择是在之后通过从title中减去toggle来分配0.25：

let toggle;
if (rightSide) {
  if (diff < 0) {
    toggle = 0.15;
  } else {
    toggle = 0.1;
  }
} else {
  if (diff < 0) {
    toggle = 0.1;
  } else {
    toggle = 0.15;
  }
}
const title = 0.25 - toggle;
const lerpFactor = { toggle, title };

如果需要，也可以将if/else的两个条件都放入toggle = 0.15中，以使用单个if：

let toggle;
if ((rightSide && diff < 0) || (!rightSide && diff >= 0)) {
  toggle = 0.15;
} else {
  toggle = 0.1;
}
const title = 0.25 - toggle;
const lerpFactor = { toggle, title };

Answer 3

可以这样重写：

var toggleValue, titleValue;

if (rightSide) {
   if (diff < 0) {
      toggleValue = 0.15;
      titleValue = 0.1;
   }
   else {
      toggleValue = 0.1;
      titleValue = 0.15;
   }
}
else
{
   if (diff < 0) {
      toggleValue = 0.1;
      titleValue = 0.15;
   }
   else {
      toggleValue = 0.15;
      titleValue = 0.1;
   }
}

const lerpFactor = {
   toggle: toggleValue,
   title:  titleValue
};

但是，有很多重复项。：（

Answer 4

首先，您可以将三元数更改为if / else：

const lerpFactor = {};
if (rightSide) {
  if (diff < 0) {
    lerpFactor.toggle = 0.15;
    lerpFactor.title= 0.1;
  } else {
    lerpFactor.toggle = 0.1;
    lerpFactor.title = 0.15;
  }
} else {
  if (diff < 0) {
    lerpFactor.toggle = 0.1;
    lerpFactor.title= 0.15;
  } else {
    lerpFactor.toggle = 0.15;
    lerpFactor.title = 0.1;
  }
}

然后可以通过删除重复的代码来简化它：

const lerpFactor = {};
if (rightSide ^ (diff < 0)) {
  lerpFactor.toggle = 0.1;
  lerpFactor.title= 0.15;
} else {
  lerpFactor.toggle = 0.15;
  lerpFactor.title= 0.1;
}

^是布尔值xor运算符的地方。

然后我们可以设置默认值来缩短代码长度：

const lerpFactor = { toggle: 0.1, title: 0.1 };
if (rightSide ^ (diff < 0)) lerpFactor.title = 0.15;
else lerpFactor.toggle = 0.15;

您可以在这里停下来，但我还将展示一种带有另一种三元形式的变体，以使其更加美观，但对新手而言则不太清楚：

const lerpFactor = { toggle: 0.1, title: 0.1 };
lerpFactor[(rightSide ^ (diff < 0)) ? 'title' : 'toggle'] = 0.15;

我应该如何解释这个三元运算符？

4 个答案: