如何在一行中用条件运算符编写多个赋值？

Question

我想知道如何将这些条件赋值写在一行中。

我的 React 项目中的代码：

const activeBox = calendarTab ? 'schedule-box active-box' : 'schedule-box';
const engagementBox = engagement ? 'schedule-box active-box' : 'schedule-box';
const scheduleBox = weekSchedule ? 'schedule-box active-box' : 'schedule-box';

Answer 1

在线解决

使用对象Destructuring assignment and Object.fromEntries()

const calendarTab = true;
const engagement = false;
const weekSchedule = false;
  
const { activeBox, engagementBox, scheduleBox } = Object.fromEntries(
  [calendarTab, engagement, weekSchedule].map((item, idx) => [
    [`activeBox`, `engagementBox`, `scheduleBox`][idx],
    item ? "schedule-box active-box" : "schedule-box"
  ])
);
  
console.log(activeBox);
console.log(engagementBox);
console.log(scheduleBox);

您可以定义一个关系列表以使其更简单

const data = [
  { id: "calendarTab", value: true, attr: "activeBox" },
  { id: "engagement", value: false, attr: "engagementBox" },
  { id: "weekSchedule", value: false, attr: "scheduleBox" }
];

const result = Object.fromEntries(
  data.map(x => [
    x.attr,
    x.value ? "schedule-box active-box" : "schedule-box"
  ])
);

console.log(result.activeBox);
console.log(result.engagementBox);
console.log(result.scheduleBox);

正常执行不在一行中：

const calendarTab = true;
const engagement = false;
const weekSchedule = false;

const aqClass = value => {
  return value ? "schedule-box active-box" : "schedule-box"
}
const activeBox = aqClass(calendarTab);
const engagementBox = aqClass(engagement);
const scheduleBox = aqClass(weekSchedule)

console.log(activeBox);
console.log(engagementBox);
console.log(scheduleBox);

Answer 2

我用过Array#destructuring with Backtick。如果条件为真，则添加 "active-box"。

const isActive = (condition) => condition ? "active-box" : "";

const [activeBox, engagementBox, scheduleBox] = [
      `schedule-box ${isActive(calendarTab)}`,  // This value goes to activeBox variable
      `schedule-box ${isActive(engagement)}`,  // This value goes to engagementBox variable
      `schedule-box ${isActive(weekSchedule)}` // This value goes to scheduleBox variable
]

希望这对您有所帮助。

如何在一行中用条件运算符编写多个赋值？

How to write multiple assignments with conditional operator in one line?

javascript

conditional-operator

logical-operators

reactjs