javascript - 需要帮助在 JavaScript 中格式化数组

Question

我有一个具有以下格式的 JavaScript 数组：

[
    {
     "header": true,
     "id": "0",
     "name": "dairy",
   },
    {
     "category": "dairy",
     "header": false,
     "id": "-LSlje6ESGALGpckMhb7",
     "name": "milk",
   },
    {
     "category": "dairy",
     "header": false,
     "id": "-LSm9EpFg5DhW036aUle",
     "name": "cheese",
   },
    {
     "header": true,
     "id": "3",
     "name": "dessert",
   },
    {
     "category": "dessert",
     "header": false,
     "id": "-LSm9MLZkrnvtPySw5U6",
     "name": "cake",
   },
    {
     "category": "dessert",
     "header": false,
     "id": "-LSmAQ0rdDLrpz0TSPuD",
     "name": "pie",
   },
    {
     "header": true,
     "id": "6",
     "name": "fruit",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSlazVIGAKLakxAIa8G",
     "name": "apple",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSlb5GH6xZz-DpNVS22",
     "name": "pear",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSwWJldY1nxQrotyv-V",
     "name": "strawberry",
   },
    {
     "header": true,
     "id": "10",
     "name": "meat",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSljXQzfXthJbOA54Ah",
     "name": "fish",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSmA2-R9pOY8abAUyST",
     "name": "steak",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSmAJ4J4gIfVQ8sgPDa",
     "name": "pork",
   },
 ]

我想要做的是映射这个数组，并将其转换为以下格式：

[
  {
    title: nameOfFirstHeader,
    data: items.slice(indexOfFirstHeader, indexOfSecondHeader),
  },
  {
    title: nameOfSecondHeader,
    data: items.slice(indexOfSecondHeader, indexOfThirdHeader),
  },
  {
    title: nameOfThirdHeader,
    data: items.slice(indexOfThirdHeader, indexOfFourthHeader),
  },...and so on
]

所以基本上在原始数组中找到的每个“标题”都会有一个对象部分。每个对象部分数据属性将包含在第一个标题和第二个标题之间找到的项目，依此类推，直到没有更多标题。我真的不知道我怎么能做到这一点。这是对我正在使用的模块的引用：https ://github.com/saleel/react-native-super-grid#sectiongrid-example

谢谢！

标签： javascriptdictionary

Answer 1

我想这可能是你想要完成的......

var grouped = items.reduce((acc,obj)=>{
   let {header, name} = obj;

   if (header) return [...acc, { title:name, data:[] }] // either first matching header or new match. Add fresh 'header' object
   if (!acc.length) return acc;        //not header and none have passed. Do nothing

   let allButLast = acc.slice(0, acc.length-1),
       lastElem = acc[acc.length-1];  // not a header, but there is an existing match. Add it to last match's data array

   return [
      ...allButLast, 
      {
         ...lastElem, 
         data:[...lastElem.data, obj]
      }
  ]
},[])

但是为此目的信任数组的顺序似乎是不可靠的。匹配可能会更可靠，isHeader.name === notHeader.category以减少对您正在迭代的数据顺序的假设。像这样...

var grouped = items.reduce((acc,obj)=>{
   let {header, name, category} = obj;

   if (header) return [...acc, { title:name, data:[] }];
   if (!acc.length) return acc;        

   return acc.map((elem)=>{
      if (elem.title !== category) return elem; 
      return {
        ...elem,
        data: [ ...elem.data, obj]
      };
   })
},[])