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

9nvpjoqh  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(117)
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
};

我应该如何格式化它,以便像我这样的初学者可以理解?

p8h8hvxi

p8h8hvxi1#

从适当的缩进开始:

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),
};
ogsagwnx

ogsagwnx2#

toggletitle的条件是相同的,所以你可以将代码压缩成一个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,通过从0.25中减去toggle

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 };
ecbunoof

ecbunoof3#

可以这样重写:

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
};

但有很多重复的地方:(

9vw9lbht

9vw9lbht4#

首先,可以将三进制改为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;

相关问题