Javascript 根据不同对象数组中的属性和值筛选对象数组

我有两组数组，一组用于表的标题列，另一组用于表的行

const headers = [
  {
    text: 'Dessert (100g serving)',
    align: 'left',
    sortable: false,
    value: 'name',
    visible: true
  },
  { text: 'Calories', value: 'calories', visible: true },
  { text: 'Fat (g)', value: 'fat', visible: true },
  { text: 'Carbs (g)', value: 'carbs', visible: true },
  { text: 'Protein (g)', value: 'protein', visible: true },
  { text: 'Iron (%)', value: 'iron', visible: true }
]

const desserts = [
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    iron: '1%'
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    iron: '1%'
  },
  {
    name: 'Eclair',
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    iron: '7%'
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    iron: '8%'
  }
]

我试图实现的是让用户能够决定他们希望在表中查看哪些数据列

const headers = [
  {
    text: 'Dessert (100g serving)',
    align: 'left',
    sortable: false,
    value: 'name',
    visible: true
  },
  { text: 'Calories', value: 'calories', visible: true },
  { text: 'Fat (g)', value: 'fat', visible: true },
  { text: 'Carbs (g)', value: 'carbs', visible: true },
  { text: 'Protein (g)', value: 'protein', visible: true },
  { text: 'Iron (%)', value: 'iron', visible: true }
]

const desserts = [
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    iron: '1%'
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    iron: '1%'
  },
  {
    name: 'Eclair',
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    iron: '7%'
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    iron: '8%'
  }
]

我使用的是Vue.js，因此我尝试设置一组复选框，每个复选框都是作为headers集合中的一个标头的v-bind

我使用以下方法进行此操作：

computed: {
  filteredHeaders () {
    return this.headers.filter(header => header.visible)
  }
}

computed: {
  ...
  filteredItems () {
    return this.desserts.filter(dessert => {
      return this.filteredHeaders.some(header => {
        return Object.keys(header).some(prop => {
          return dessert[prop] != header[prop] && header.visible
        })
      })
    })
  }
}

这和预期的一样，霍拉！表列标题将根据使用复选框选择的列进行更改

我一直在尝试根据所选列或FilteredHeader过滤行数据或甜点

我尝试了以下方法：

computed: {
  filteredHeaders () {
    return this.headers.filter(header => header.visible)
  }
}

computed: {
  ...
  filteredItems () {
    return this.desserts.filter(dessert => {
      return this.filteredHeaders.some(header => {
        return Object.keys(header).some(prop => {
          return dessert[prop] != header[prop] && header.visible
        })
      })
    })
  }
}

即使没有抛出错误，filteredItems的结果仍然是原始甜点的结果，并且当visible被复选框集合设置为false时应排除的属性仍然显示

---

我相信我很接近，但正如俗话所说，接近并不能让我得到那支雪茄

此方法应大致达到您的目标：

常量头=[{ 正文：甜点100克， 对齐：左， 可排序：false， 值：name， 可见：正确 }, { 正文：卡路里， 价值：卡路里， 可见：正确 }, { 文本：Fat g， 价值：脂肪， 可见：正确 }, { 文本：Carbs g， 价值：碳水化合物， 可见：正确 }, { 文本：蛋白质g， 价值：蛋白质， 可见：正确 }, { 文本：铁%， 价值：铁， 可见：正确 } ]; 常数甜点=[{ 名称：冷冻酸奶， 卡路里：159， 脂肪：6.0， 碳水化合物：24， 蛋白质：4.0， 铁：1% }, { 名称：冰淇淋三明治， 卡路里：237， fat:9.0， 碳水化合物：37， 蛋白质：4.3， 铁：1% }, { 姓名：Eclair， 卡路里：262， 脂肪：16.0， 碳水化合物：23， 蛋白质：6.0， 铁：7% }, { 姓名：纸杯蛋糕， 卡路里：305， 脂肪：3.7， 碳水化合物：67， 蛋白质：4.3， 铁：8% } ]; 常量filterRows=行，标题=>{ //映射到要筛选的行的完整列表 return rows.maprow=>{ //创建要返回的新行以避免变异 常量filteredRow={}； //循环遍历每个标题并复制与该标题值对应的行值 headers.forEachheader=>{ filteredRow[header.value]=行[header.value]； }; //返回已复制和筛选的行 回流过滤器； }; }; console.LogFilterRowsDessers，标题； console.logfilterrowsdesters[{ 文本：铁%， 价值：铁， 可见：正确

---

}];我会接受这个答案，因为这是最容易理解的。仅供参考，以下是我对解决方案的实施-