React – 从对象中的数组创建数组

Question

初学者 React/JS 问题在这里。我有一系列条目（表单提交），每个条目都包含如下语言数组：

0: {…}

dream: Array [ "Bengali", "French" ]

feel: Array [ "Arabic", "English" ]

speak: Array [ "Afrikaans", "Armenian" ]

think: Array [ "Albanian" ]

1: {…}

dream: Array [ "English", "French" ]

feel: Array [ "German", "Italian" ]

speak: Array [ "Afrikaans", "English" ]

think: Array [ "Cantonese" ]

我想要每个类别中所有语言的数组。我知道我必须过滤每个条目并保存语言，但我不知道如何检查重复项。

目前，我可以过滤以查看使用单一语言的条目

setFilter(entries.filter((key) => key.speak.includes("Afrikaans")));

但我不知道如何创建所有语言的主列表。

Answer 1

这是你想要的吗 ？您需要减少和过滤 du 避免重复，结果您将得到一个对象    const myArray = [{      dream: [ "Bengali", "French" ],      feel: [ "Arabic", "English" ],      speak: [ "Afrikaans", "Armenian" ],      think: [ "Albanian" ]    }      ,{        dream: [ "Bengaslis", "French" ],        feel: [ "Arabsic", "English" ],        speak: [ "Afrikasans", "Armenian" ],        think: [ "Assslbanian" ]      }    ];    const result = myArray.reduce((accumulator, currentValue) => {      const dream = accumulator.dream.concat(currentValue.dream);      const think = accumulator.think.concat(currentValue.think);      const feel = accumulator.feel.concat(currentValue.feel);      const speak = accumulator.speak.concat(currentValue.speak);      accumulator.dream = dream.filter((item, pos) => dream.indexOf(item) === pos)      accumulator.feel = feel.filter((item, pos) => feel.indexOf(item) === pos);      accumulator.speak = speak.filter((item, pos) => speak.indexOf(item) === pos);      accumulator.think = think.filter((item, pos) => think.indexOf(item) === pos);      return accumulator;    })        console.log(result)

Answer 2

您可以使用Object.valuesandObject.entries来遍历数据对象。const data = {  0: {    dream: ["Bengali", "French"],    feel: ["Arabic", "English"],    speak: ["Afrikaans", "Armenian"],    think: ["Albanian"],  },  1: {    dream: ["English", "French"],    feel: ["German", "Italian"],    speak: ["Afrikaans", "English"],    think: ["Cantonese"],  }};const categoryMap = Object.values(data)  .reduce((concatedArr, item) => concatedArr.concat(Object.entries(item)), [])  .reduce((result, [category, values]) => {    result[category] = result[category] || [];    result[category] = result[category].concat(values);    return result;  }, {});console.log(categoryMap);

Answer 3

老实说，我不太理解这个问题。但我试着这样解释，让我知道：const entries = [{  dream:  [ "Bengali", "French" ],  feel:   [ "Arabic", "English"],  speak:  [ "Afrikaans", "Armenian" ],  think:  [ "Albanian" ],},{  dream:  [ "English", "French" ],  feel:   [ "German", "Italian" ],  speak:  [ "Afrikaans", "English" ],  think:  [ "Cantonese" ],}]const fields = ["dream", "feel", "speak","think"];const result = {};for(field of fields){  // create an array containing all the languages of the specific category of the for-loop (there may be duplications)  const rawArray = entries.map(item =>  item[field]).flat();  // delete duplicates  const  arrayWithoutDuplicates = rawArray.filter((item,index) => rawArray.indexOf(item) === index);    result[field] = arrayWithoutDuplicates;}console.log(result);

Answer 4

试试这个 Obj 结构var completObj=[    {     dream:[ "Bengali", "French" ],     feel:[ "Arabic", "English" ],     speak:[ "Afrikaans", "Armenian" ],     think:[ "Albanian" ]    },    {     dream:[ "English", "French" ],     feel:[ "German", "Italian" ],     speak:[ "Afrikaans", "English" ],     think:[ "Cantonese" ]    }    ]    var Afrikaans=completObj.filter((key) => key.speak.includes("Afrikaans"))            console.log('Afrikaans:'+JSON.stringify( Afrikaans))    var uniqueObj={}    completObj.map((value, index) => {      Object.entries(completObj[index]).forEach(([ObjKey, value]) => {               if (!uniqueObj[ObjKey]) {          uniqueObj[ObjKey] = new Set();        }         debugger        value.map(list => uniqueObj[ObjKey].add(list));        // uniqueObj[ObjKey].add(value)      });          });        var dream=Array.from(uniqueObj.dream)        console.log('dream unique Value:'+JSON.stringify( dream))

Answer 5

给定数据const data = [  {    dream: ["Bengali", "French"],    feel: ["Arabic", "English"],    speak: ["Afrikaans", "Armenian"],    think: ["Albanian"]  },  {    dream: ["English", "French"],    feel: ["German", "Italian"],    speak: ["Afrikaans", "English"],    think: ["Cantonese"]  }];首先将类别语言数组数组转换为类别语言集的简化对象。这些集合用于删除重复项。const reducedData = data.reduce((categories, current) => {  // Loop over the categories (dream, feel, etc..)  // and add languages to sets  Object.entries(current).forEach(([currentCategory, languages]) => {    if (!categories[currentCategory]) {      // A set will not allow duplicate entires      categories[currentCategory] = new Set();    }    // Add all languages to the set    languages.forEach(language => categories[currentCategory].add(language));  });  return categories;}, {});你现在有一个有形状的物体{  dream: Set("Bengali", "French", "English"),   feel: Set("Arabic", "English", "German", "Italian"),  speak: Set("Afrikaans", "Armenian", "English"),  think: Set("Albanian", "Cantonese"),}然后再次将其缩减为类别对象 - 语言数组。这只是将集合转换回数组。const reducedDataArray = Object.entries(reducedData).reduce(  (categories, [category, languageSet]) => {    // Convert Set back to an array    categories[category] = [...languageSet];    return categories;  },  {});结果对象形状{  dream: ["Bengali", "French", "English"],   feel: ["Arabic", "English", "German", "Italian"],  speak: ["Afrikaans", "Armenian", "English"],  think: ["Albanian", "Cantonese"],}const data = [  {    dream: ["Bengali", "French"],    feel: ["Arabic", "English"],    speak: ["Afrikaans", "Armenian"],    think: ["Albanian"]  },  {    dream: ["English", "French"],    feel: ["German", "Italian"],    speak: ["Afrikaans", "English"],    think: ["Cantonese"]  }];const reducedData = data.reduce((categories, current) => {  Object.entries(current).forEach(([currentCategory, languages]) => {    if (!categories[currentCategory]) {      categories[currentCategory] = new Set();    }    languages.forEach(language => categories[currentCategory].add(language));  });  return categories;}, {});const reducedDataArray = Object.entries(reducedData).reduce(  (categories, [category, languageSet]) => {    categories[category] = [...languageSet];    return categories;  },  {});console.log(reducedDataArray);