如何简化更新playerListQuery中where字段的JavaScript代码？

问题场景 #

现有如下代码，需要在updateSearch函数中仅修改playerListQuery里嵌套的where字段，但当前写法嵌套展开过多，希望找到更简洁的实现方式：

let playerListQuery = {
  variables: { // 注：原代码此处误用=，修正为:
    input: {
      pagination,
      order: { field: PlayerOrderField.CreatedAtDesc },
      where: {
        // some others...
      },
    },
  }
};

function updateSearch(value) {
  if (!value) return;

  playerListQuery.variables = {
    ...playerListQuery.variables,
    input: {
      ...playerListQuery.variables.input,
      where: {
        ...playerListQuery.variables.input.where,
        or: [
          { nameContains: searchValue }, // 注：原代码此处应为参数value，疑似笔误
          {
            teamHas: [
              {
                or: [
                  { nameContains: searchValue },
                  { addressContains: searchValue },
                ],
              },
            ],
          },
        ],
      },
    },
  };
}

简洁实现方案 #

方案1：直接修改嵌套属性（允许修改原对象时首选）

如果业务场景允许直接修改原对象（不需要保持原对象引用不可变），可以跳过所有对象展开操作，直接定位目标字段赋值：

function updateSearch(value) {
  if (!value) return;

  // 直接修改where中的or字段，省去多层解构
  playerListQuery.variables.input.where.or = [
    { nameContains: value },
    {
      teamHas: [
        { or: [{ nameContains: value }, { addressContains: value }] }
      ]
    }
  ];
}

这是最简洁的写法，完全避免冗余的对象展开，只更新需要修改的层级。

方案2：提前解构赋值（需要保持对象不可变时）

如果必须生成新对象（比如React状态更新这类不可变场景），可以通过提前解构变量，减少重复的嵌套路径书写：

function updateSearch(value) {
  if (!value) return;

  // 提前解构各层级对象，减少重复路径
  const { variables } = playerListQuery;
  const { input } = variables;
  const { where } = input;

  playerListQuery.variables = {
    ...variables,
    input: {
      ...input,
      where: {
        ...where,
        or: [
          { nameContains: value },
          { teamHas: [{ or: [{ nameContains: value }, { addressContains: value }] }] }
        ]
      }
    }
  };
}

这种写法通过变量提取，让代码结构更清晰，同时减少了重复的冗长路径书写。

注意事项 #

原代码存在两处小问题：

1. 对象字面量中错误使用=，应改为:
2. 函数内部使用了未定义的searchValue，需替换为函数参数value

内容的提问来源于stack exchange，提问作者Fred Hors