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 的示例數組。 正如您所看到的，我知道的兩個屬性category和type將始終保持不變，但它們的值可能會根據用戶輸入數據而變化。

我想為我的過濾器設置這兩個對象道具的所有可用值。 我如何獲取某個道具的所有值以獲取某個屬性的值數組，然后我可以將其分配給 React Native 中的 Dropdown。

結果：

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)