使用对象键动态过滤数组答案

【问题标题】：Filter An Array with Object keys Dynamically使用对象键动态过滤数组
【发布时间】：2021-07-29 16:29:03
【问题描述】：

我正在尝试过滤一个数组，例如我希望它返回所有颜色、大小等，我知道您可以通过执行以下操作来过滤它：

const products = [
  {
    name: "Product A",
    attributes: [
      {
        color: "Yellow",
        size: "Small",
        price: 100,
        quantity: 30,
      },
      {
        color: "Yellow",
        size: "Medium",
        price: 150,
        quantity: 20,
      },
      {
        color: "Yellow",
        size: "Large",
        price: 200,
        quantity: 10,
      },
      {
        color: "Red",
        size: "Small",
        price: 100,
        quantity: 15,
      },
      {
        color: "Red",
        size: "Medium",
        price: 150,
        quantity: 10,
      },
      {
        color: "Red",
        size: "Large",
        price: 200,
        quantity: 5,
      },
      {
        color: "Blue",
        size: "Small",
        price: 100,
        quantity: 15,
      },
      {
        color: "Blue",
        size: "Medium",
        price: 150,
        quantity: 10,
      },
      {
        color: "Blue",
        size: "Large",
        price: 200,
        quantity: 5,
      },
    ],
  },
];

const result = data.map(({ attributes }) =>
    attributes.filter(({ color }) => color === "Red")
  );. 

console.log(result)

但是如果有 100 个属性颜色和大小怎么办，如果黄色数组将返回所有黄色数据，如何通过颜色样本将它们分开？

[
      {
        color: "Yellow",
        size: "Small",
        price: 100,
        quantity: 30,
      },
      {
        color: "Yellow",
        size: "Medium",
        price: 150,
        quantity: 20,
      },
      {
        color: "Yellow",
        size: "Large",
        price: 200,
        quantity: 10,
      },
]

对于尺寸，它将返回例如 small，它将返回所有小数据，如下所示：

[{
    color: "Yellow",
    size: "Small",
    price: 100,
    quantity: 30,
  },
  {
    color: "Red",
    size: "Small",
    price: 100,
    quantity: 15,
  },
  {
    color: "Blue",
    size: "Small",
    price: 100,
    quantity: 15,
  }]

如果我的问题不是很清楚，请告诉我，以便我澄清，感谢您的帮助

【问题讨论】：

所以developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
嗨@epascarello 感谢您的评论，您可以为我的问题提供任何示例吗？
您在这里真正要问的不是很清楚。如果您询问如何过滤，请参阅these answers。如果您询问如何使用变量动态访问对象属性（例如，"size" 与 "color"），请参阅 these answers。（他们也一起玩。）
products.attributes.filter(item => item.color === "Blue")
嗨@T.J.Crowder 我有一个想法感谢您的评论

标签： javascript arrays object filter

【解决方案1】：

这与问题的格式并不真正匹配，但它是一个有效的答案。

const array = [
  {
    color: "red",
    size: "small"
  },
  {
    color: "yellow",
    size: "small"
  },
  {
    color: "red",
    size: "large"
  }
];

function sortArrayByItemProperties(array, ...properties) {
  const map = {};
  for(let i = 0; i < properties.length; i++) {
    const property = properties[i];
    map[property] = {};
    for(let ii = 0; ii < array.length; ii++) {
      const object = array[ii];
      if(!map[property][object[property]]) map[property][object[property]] = [];
      map[property][object[property]].push(object);
    }
  }
  return map;
}

console.log(JSON.stringify(sortArrayByItemProperties(array, "color", "size")));

【讨论】：

您好，感谢您回答我所需要的内容，很抱歉提出问题，但是您可以使用 map 之类的 es6 函数吗？
of 不工作吗？老实说，我个人不使用map，我可以将其更改为普通循环，但可以吗？
不，谢天谢地，它对循环不太熟悉，我想只是要研究一下才能操纵数据
再次感谢您的帮助

【解决方案2】：

使用Array.filter 很简单。希望您期待这种输出格式。

var attributes = [{color:"Yellow",size:"Small",price:100,quantity:30},{color:"Yellow",size:"Medium",price:150,quantity:20},{color:"Yellow",size:"Large",price:200,quantity:10},{color:"Red",size:"Small",price:100,quantity:15},{color:"Red",size:"Medium",price:150,quantity:10},{color:"Red",size:"Large",price:200,quantity:5},{color:"Blue",size:"Small",price:100,quantity:15},{color:"Blue",size:"Medium",price:150,quantity:10},{color:"Blue",size:"Large",price:200,quantity:5}];

function filterBy(attr, val)
{
    return attributes.filter(item => item[attr] == val);
}

console.log(filterBy("color", "Yellow"));
console.log(filterBy("size", "Large"));
console.log(filterBy("price", 200));

【讨论】：

嘿伙计，这就是我真正想要的，非常感谢 es6 函数和动态传递的参数

【解决方案3】：

作为补充，我认为使用以下代码块动态获取属性值会很好。

const colors = []
const sizes = []
const prices = []
const quantities = []

for (product of products) {
  for (attribute of product.attributes) {
    if (colors.indexOf(attribute.color) == -1) {
      colors.push(attribute.color)
    }
    if (sizes.indexOf(attribute.size) == -1) {
      sizes.push(attribute.size)
    }
    if (prices.indexOf(attribute.price) == -1) {
      prices.push(attribute.price)
    }
    if (quantities.indexOf(attribute.quantity) == -1) {
      quantities.push(attribute.quantity)
    }
  }
}

然后就可以通过array.filter获取值了

for (product of products) {
  const result = product.attributes.filter(function(attributes) {
    return attributes.color == "Red"
  })
}

【讨论】：