JavaScript如何从数组中排除非指定项并修改对应字段名称与值

正确实现代码 #

const obj = {
  myProduct: [
    { name: "PRODUCT_PRICE", value: "234.324" },
    { name: "PRODUCT_NAME", value: "Insurance" },
    { name: "PRODUCT_TYPE", value: "Life" },
    { name: "PRODUCT_TERM", value: "Long" },
    { name: "PRODUCT_ID", value: "AP3232343JKD" },
    { name: "PRODUCT_ENABLED", value: "TRUE" },
  ],
};

// 补充预期需要保留的两个属性到白名单
const allowedNames = [
  'PRODUCT_NAME',
  'PRODUCT_TYPE',
  'PRODUCT_TERM',
  'PRODUCT_ID',
  'PRODUCT_ENABLED'
];

const updateCertainProperties = {
  PRODUCT_ID: "app.productID",
  PRODUCT_ENABLED: "app.product.enabled"
};

const productName = "testProduct_3234dfasfdk3msldf23";

// 先筛选保留项，再批量修改属性
const processed = obj.myProduct
  .filter(item => allowedNames.includes(item.name))
  .map(item => {
    const res = { ...item };
    // 替换匹配的name
    if (updateCertainProperties[res.name]) res.name = updateCertainProperties[res.name];
    // 修改产品名
    if (res.name === 'PRODUCT_NAME') res.value = productName;
    return res;
  });

console.log(processed);

运行上述代码输出结果和你给出的预期完全一致。

原代码问题汇总 #

• filter方法不会修改原数组，你调用后没有接收返回值，筛选逻辑完全不生效
• 在map回调中直接返回整个obj.myProduct数组，最终得到的是一个长度和原数组一致、每个元素都是原数组的嵌套结构，逻辑完全错误
• 初始的allowedNames白名单漏掉了预期输出里要保留的PRODUCT_NAME和PRODUCT_ENABLED，筛选后会丢失这两项
• 直接修改原数组的元素属性，会污染原始数据，建议拷贝后修改新对象避免副作用

内容的提问来源于stack exchange，提问作者Mike Marsh