如何根据viewStatus过滤product数组并匹配status.json指定字段

步骤1：定义不同视图对应的保留字段 #

根据viewStatus确定需要保留的字段集合：

const getKeepFields = (viewStatus) => {
  switch(viewStatus) {
    case 'grid':
      return ['color', 'height'];
    case 'inline':
      return ['color', 'size', 'capacity'];
    default:
      return []; // 默认不保留任何字段，可按需调整
  }
};

步骤2：递归处理product数组（支持多层子数组） #

由于product可能包含嵌套子数组，需要递归遍历每个元素，对对象进行字段过滤：

const filterProduct = (product, keepFields) => {
  return product.map(item => {
    // 若为数组，递归处理子数组
    if (Array.isArray(item)) {
      return filterProduct(item, keepFields);
    }
    // 若为对象，仅保留指定字段
    if (typeof item === 'object' && item !== null) {
      return keepFields.reduce((acc, field) => {
        if (item.hasOwnProperty(field)) {
          acc[field] = item[field];
        }
        return acc;
      }, {});
    }
    // 非数组非对象的元素直接返回
    return item;
  });
};

步骤3：整合使用 #

结合viewStatus调用函数，得到过滤后的结果：

// 假设已获取status、product、viewStatus变量
const keepFields = getKeepFields(viewStatus);
const filteredProduct = filterProduct(product, keepFields);

// 输出结果
console.log(filteredProduct);

对你现有代码的说明 #

你之前的代码仅实现了数据打印，未完成字段过滤需求。上述方案解决了两个核心问题：

• 递归处理多层嵌套的子数组结构
• 根据视图状态动态保留指定字段

当viewStatus === 'grid'时，过滤后的结果会仅保留每个对象中的color和height字段，符合预期要求。

内容的提问来源于stack exchange，提问作者Gleb Pristupa