Javascript 如何从对象数组中获取属性的所有值？

Question

各位 Javascript 开发人员，我希望你们今天过得愉快。我试图从我的过滤器的数组中获取对象元素的某些属性的所有动态设置值。例如var data = [    {id: 0, category: "RINGS", type: "CH"},    {id: 1, category: "NECKLACE", type: "CHE"},    {id: 2, category: "PENDANT", type: "CH"},    {id: 3, category: "BRACELET", type: "CH"},    {id: 4, category: "RINGS", type: "HBR"},    {id: 5, category: "PENDANT", type: "CHE"},  ];以及我的数据如何来自 api 的 exmaple 数组。如您所见，我知道这两个属性category&type将始终保持不变，但它们的值可能会根据用户输入数据而变化。我想为我的过滤器设置这两个对象道具的所有可用值。我如何获取某个道具的所有值，以便为自己获取某个属性的值数组，然后我可以将其分配给 React Native 中的下拉列表。结果：var category = [    { name: "Rings", id: "RINGS"},    { name: "Necklace", id: "NECKLACE"},    { name: "Pendant", id: "PENDANT"},    { name: "Bracelet", id: "BRACELET"},  ]和var type = [    { name: "CH", id: "CH" },    { name: "CHE", id: "CHE" },    { name: "HBR", id: "HBR" },  ]然后这两个数组基本上传递给过滤器，然后过滤器将用于对数据进行排序。我认为它并不太复杂，但我是 javascript 的初学者，所以请多多包涵。谢谢。

Answer 1

var data = [

  { id: 0, category: 'RINGS', type: 'CH' },

  { id: 1, category: 'NECKLACE', type: 'CHE' },

  { id: 2, category: 'PENDANT', type: 'CH' },

  { id: 3, category: 'BRACELET', type: 'CH' },

  { id: 4, category: 'RINGS', type: 'HBR' },

  { id: 5, category: 'PENDANT', type: 'CHE' }

];

const categories = [], types = [];

data.forEach((item) => {

  if (!categories.includes(item.category)) {

    categories.push(item.category);

  }

  if (!types.includes(item.type)) {

    types.push(item.type);

  }

});

const category = categories.map((item) => ({

  name: item.toLowerCase(),

  id: item

}));

const type = types.map((item) => ({ name: item, id: item }));

console.log(category);

console.log(type);

Answer 2

至少有两种方法可以做到这一点：

1. 使用Array.includes。正如上面提到的@baymax，您可以使用过滤数组includes。

2. 在 Javascript 中使用Set。查看代码。

const data = [

    {id: 0, category: "RINGS", type: "CH"},

    {id: 1, category: "NECKLACE", type: "CHE"},

    {id: 2, category: "PENDANT", type: "CH"},

    {id: 3, category: "BRACELET", type: "CH"},

    {id: 4, category: "RINGS", type: "HBR"},

    {id: 5, category: "PENDANT", type: "CHE"},

  ];

// by includes

const uniqueCategories = [];

const uniqueTypes = []

data.forEach(entry => {

  if (!uniqueCategories.includes(entry.category)){

     uniqueCategories.push(entry.category)

  }

  if (!uniqueTypes.includes(entry.type)){

     uniqueTypes.push(entry.type)

  }

})

const categoriesMap = uniqueCategories.map(category => ({name: category.toLowerCase(), id: category}));

const typesMap = uniqueTypes.map(typeEntry => ({name: typeEntry, id: typeEntry}));

// by set

const categoriesSet = new Set()

const typesSet = new Set()

data.forEach(entry => {

  categoriesSet.add(entry.category);

  typesSet.add(entry.type);

});

const uniqueCategoriesFromSet = Array.from(categoriesSet).map(category => ({name: category.toLowerCase(), id: category}));

const uniqueTypesFromSet = Array.from(typesSet).map(typeEntry => ({name: typeEntry, id: typeEntry}));

console.log(uniqueCategoriesFromSet, uniqueTypesFromSet);

console.log(categoriesMap, typesMap)