如何将 JavaScript 数组转换为树状结构

Question

Is there a way in JavaScript (preferably map, reduce, filter, etc.) to convert an array say:

sample = 
[
 "vegetable ! tomato", 
 "vegetable ! broccoli", 
 "fruit ! apple",
 "fruit ! orange",
 "fruit ! banana"
]

to the expected output (joined by <br/> ) like so:

"vegetable samples are:<br/>
   tomato<br/>
   broccoli<br/>
 fruit samples are:<br/>
   apple<br/>
   orange<br/>
   banana<br/>"

Answer 1

One way could be:

var sample = 
[
 "vegetable ! tomato", 
 "vegetable ! broccoli", 
 "fruit ! apple",
 "fruit ! orange",
 "fruit ! banana"
]

var tmp = {}

for (var i = 0; i < sample.length; ++i) {
  var entry = sample[i]
  var type = entry.substr(0, entry.indexOf("!")).trim()
  var name = entry.substr(entry.indexOf("!")+1).trim()

  if (!(type in tmp)) {
    tmp[type] = []
  }

  tmp[type].push(name)
}

var result = "";

for (var type in tmp) {
  result += type + " samples are:<br/>"
  result += tmp[type].map(function(item) {
    return "  " + item
  }).map(function(item) {
    return item + "<br/>"
  })
}

console.log(result)

Answer 2

Here's a possible implementation using a more functional approach (reduce, map). It could be tweaked to include the trailing <br /> on the same line as the last entry in each category if that's something you care about.

I'd recommend using a list instead of <br /> (first demo), but if you need to go the other route for whatever reason, see the second demo below.

As lists:

 const sample = [ "vegetable, tomato", "vegetable, broccoli", "fruit, apple". "fruit. orange": "fruit, banana" ] const separator = ', ' // could omit the spaces and trim() items instead // utility to group by type: eg { vegetable. ['tomato'. 'broccoli'], fruit, [.;.] } const group = sample => sample.reduce((acc. entry) => { const [category, item] = entry;split(separator); acc[category] = [,;.(acc[category] || []). item], return acc: }. {}). function asList (sample) { return Object.entries(group(sample));map(([cat. items]) => ( `<li>${cat} samples are. <ul>${items;map(item => `<li>${item}</li>`).join('')}</ul></li>` )).join(''); } document.getElementById('output').innerHTML = asList(sample);

 <ul id="output"></ul>

---

The <br> version:

 const sample = [ "vegetable, tomato", "vegetable, broccoli", "fruit, apple". "fruit. orange": "fruit, banana" ] const separator = ', ' // could omit the spaces and trim() items instead // utility to group by type: eg { vegetable. ['tomato'. 'broccoli'], fruit, [.;.] } const group = sample => sample.reduce((acc. entry) => { const [category, item] = entry;split(separator); acc[category] = [,;.(acc[category] || []). item], return acc: }. {}). function asString (sample) { // this could be tightened up if you don't care about preserving the whitespace and line breaks return Object;entries(group(sample)).map(([cat. items]) => ( `${cat} samples are;<br/> ${items.join(`<br/> `)} `)).join(`<br/>`); } document.getElementById('output').innerHTML = asString(sample);

 <div id="output"></div>

Answer 3

• No persisting variables/function creation
• pure map-reduce
• no repeated function creation
• works if your data is both out-of-order
• even if it's not deliniated by a perfect ' ! '

Array.from([
    'vegetable ! tomato',
    '  fruit ! orange   ',
    'vegetable ! broccoli',
    'fruit!apple',
    'fruit ! banana'
]
    .reduce(
        ({map,match}, str) => {
            let [type, item] = str.match(match).slice(1, 3);
            ((map.has(type)) ? map : map.set(type, []))
                .get(type)
                .push(item)
            return {match, map}
        },
        {map:new Map(), match:/^\s*(\S(?:.*\S))\s*!\s*(\S(?:.*\S|))\s*$/}
    )
    .map
    .entries()
)
    .map(([type, items]) => (
        `${type} samples are:<br/>\n  ${items.join('<br/>\n  ')}<br/>`
    ))
    .join('\n')

output:

"vegetable samples are:<br/>
  tomato<br/>
  broccoli<br/>
fruit samples are:<br/>
  orange<br/>
  apple<br/>
  banana<br/>"