JavaScript根据条件动态设置对象属性值及语法报错解决

架构老林

2026-8-26

问题说明

需要实现根据条件动态设置对象属性值的效果：视口宽度<=1280时，对象的apple属性值为Red，否则为Yellow。
直接在对象字面量里写if...else语句时触发报错SyntaxError: missing ) after formal parameters，错误写法如下：

const firstData = {
  if (document.documentElement.clientWidth <= 1280) {
    apple: 'Red'
  } else {
    apple: 'Yellow'
  }
};

// 第二种错误写法
const secondData = {
  apple: if (document.documentElement.clientWidth <= 1280) {
    return "Red"
  } else {
    return "Yellow"
  }
};

console.log(firstData, secondData);

报错原因

两种写法都违反了JavaScript基础语法规则：

对象字面量内部仅支持键: 值格式的属性定义，不能直接写if/else这类流程控制语句
if/else是语句不是表达式，本身没有返回值，不能直接作为属性值使用；return关键字仅能在函数内部使用，直接写在对象里本身就属于语法错误。

正确实现方式

三元运算符写法（最简洁，适配简单单属性判断场景）
三元运算符是表达式，可以直接返回判断结果，直接放在属性值位置即可：

const data = {
  apple: document.documentElement.clientWidth <= 1280 ? 'Red' : 'Yellow'
};

先声明对象再赋值（适配多属性、复杂逻辑场景）
先创建空对象，在外部写判断逻辑，再给对象追加属性：

const data = {};
const viewportWidth = document.documentElement.clientWidth;
if (viewportWidth <= 1280) {
  data.apple = 'Red';
  // 其他同条件下的属性可以直接在这里追加
} else {
  data.apple = 'Yellow';
}

立即执行函数写法（不想拆分逻辑到对象外部时使用）
在属性值位置写一个立即执行的箭头函数，函数内部可以写任意复杂逻辑，最终return需要的属性值即可：

const data = {
  apple: (() => {
    const viewportWidth = document.documentElement.clientWidth;
    if (viewportWidth <= 1280) return 'Red';
    return 'Yellow';
  })()
};