如何将两段仅price字段有差异的JavaScript代码合并为一段？

你有两段逻辑高度相似的JavaScript代码，仅price字段的取值来源不同：

if (value === "up") {
  for (const key in data) {
    fetchedData.push({
      id: data[key].id,
      name: data[key].name,
      image: data[key].image,
      location: data[key].location,
      price: data[key].price,
    });
  }
}

if (value === "down") {
  for (const key in data) {
    fetchedData.push({
      id: data[key].id,
      name: data[key].name,
      image: data[key].image,
      location: data[key].location,
      price: data[key]["fixed-price"],
    });
  }
}

你尝试用if (value === "up" || value === "down")包裹循环并在内部加条件判断但未成功，以下是几种可行的合并方式：

方案1：循环内直接判断price取值 #

合并外层条件后，在构造对象时通过三元运算符根据value选择price的来源：

if (value === "up" || value === "down") {
  for (const key in data) {
    fetchedData.push({
      id: data[key].id,
      name: data[key].name,
      image: data[key].image,
      location: data[key].location,
      price: value === "up" ? data[key].price : data[key]["fixed-price"]
    });
  }
}

方案2：先定义price键名再统一取值 #

先根据value确定要读取的字段名，再在循环中统一取值，代码更简洁：

if (value === "up" || value === "down") {
  const priceKey = value === "up" ? "price" : "fixed-price";
  for (const key in data) {
    fetchedData.push({
      id: data[key].id,
      name: data[key].name,
      image: data[key].image,
      location: data[key].location,
      price: data[key][priceKey]
    });
  }
}

方案3：用展开运算符简化对象构造（可选） #

如果data[key]的公共字段较多，可以用展开运算符复用已有字段，减少重复代码：

if (value === "up" || value === "down") {
  const priceKey = value === "up" ? "price" : "fixed-price";
  for (const key in data) {
    const item = data[key];
    fetchedData.push({
      ...item,
      price: item[priceKey]
    });
  }
}

注意：这种方式会把data[key]的所有字段都复制到新对象中，若存在不需要的字段则不建议使用。

内容的提问来源于stack exchange，提问作者C Z