JavaScript对象中如何正确为color属性设置条件表达式？

云上老周

2026-5-25

修复JavaScript对象属性的条件赋值错误

嘿，你这里的问题是把if语句和三元运算符混在一起用啦——JavaScript的对象字面量里，属性值得是表达式（能返回具体值的代码），而if是语句，没法直接放在属性值的位置上。

正确的写法有两种：

1. 用标准的三元运算符（最简洁）

直接把三元表达式作为color的属性值，这是最适合这种简单二选一逻辑的写法：

const child_el = { 
  height: sub_height, 
  top: sizes.top, 
  color: sizes.top === 1 ? 0 : 1, // 这里用严格相等===更稳妥，避免类型隐式转换
};

这里要注意：三元运算符的格式是条件 ? 满足条件时的值 : 不满足时的值，不需要加if关键字，它本身就完成了条件判断的逻辑。

2. 先计算好值再赋值（适合复杂逻辑）

如果之后你的条件逻辑变复杂了，比如要加更多分支，先把color的值单独计算好再放进对象会更清晰：

// 用if-else计算color值
let colorValue;
if (sizes.top === 1) {
  colorValue = 0;
} else {
  colorValue = 1;
}

// 或者用三元先存好值
// const colorValue = sizes.top === 1 ? 0 : 1;

const child_el = { 
  height: sub_height, 
  top: sizes.top, 
  color: colorValue, 
};