如何使用父对象数组中子对象数组的唯一值有效地构造新对象数组

Question

The need is to take objects like this:

[ { "first": 
    { "children" : [{ "name": "abc", "detail":"123"},
                  { "name": "def", "detail":"456"}
                 ]
    }},
  { "second": 
    { "children" : [{ "name": "ghi", "detail":"123"},
                  { "name": "jkl", "detail":"456"}
                 ]
    }},
  { "third": 
    { "children" : [{ "name": "mno", "detail":"123"},
                  { "name": "pqr", "detail":"456"}
                 ]
    }},
  { "fourth": 
    { "children" : [{ "name": "stu", "detail":"123"},
                  { "name": "vwx", "detail":"456"}
                 ]
    }},
  { "fifth": 
    { "children" : [{ "name": "yz", "detail":"123"},
                  { "name": "abc", "detail":"456"}
                 ]
    }},
  { "sixth": 
    { "children" : [{ "name": "def", "detail":"123"},
                  { "name": "ghi", "detail":"456"}
                 ]
    }}
]

and then create a flattened array of unique values (options for a select) from the name field of the children that looks like this:

[{"value":"abc", "label":"abc"},
 {"value":"def", "label":"def"},
 {"value":"ghi", "label":"ghi"},
 {"value":"jkl", "label":"jkl"},
 {"value":"mno", "label":"mno"},
 {"value":"pqr", "label":"pqr"},
 {"value":"stu", "label":"stu"},
 {"value":"vwx", "label":"vwx"},
 {"value":"yz", "label":"yz"}
]

The code below is working, but it looks like it is inefficient because it appears to make many passes over the array:

[
  ...new Set(
     [].concat.apply([], bases.map((base) => {
       if (!base.children || base.children.length === 0) return;
       return  base.children}
     )).map((child) => child.name)
  )
].map((optName) => {return {value: optName, label: optName};})

If it is possible, how can this same result be achieved without as many iterations across the array.

Answer 1

Firstly, as a rule of thumb, you shouldn't worry too much about performance until you have a reason to do so.

Secondly, chaining the array prototype functions (eg map, forEach, filter) will require multiple iterations by design.

Thirdly, there's no reason to assume multiple iterations is slower than a single iteration if the work done within the iterations is the same anyways. Ie incrementing an index and comparing it with an array length isn't going to be the bottleneck compared to pushing objects into arrays and check set entries.

Here's a (IMO) cleaner snippet to extract unique names from your array:

 let bases = [{ children: [{ name: "abc", detail: "123" }, { name: "def", detail: "456" } ] }, { children: [{ name: "abc" , detail: "123" }, { name: "xyz" , detail: "456" } ] }, {} ]; let output = bases .flatMap(b => b.children || []) .map(c => c.name) .filter((v, i, a) => a.indexOf(v) === i) // filter unique values .map(name => ({ value: name, label: name, })); console.log(output);

Now if you really want to do all this in a single iteration, that too is possible, but harder to read:

 let bases = [{ children: [{ name: "abc", detail: "123" }, { name: "def", detail: "456" } ] }, { children: [{ name: "abc" , detail: "123" }, { name: "xyz" , detail: "456" } ] }, {} ]; let output = []; let seenNames = {}; for (base of bases) { if (!base.children) continue; for (child of base.children) { let name = child.name; if (seenNames[name]) continue; seenNames[name] = true; output.push({ value: name, label: name, }); } } console.log(output);

Answer 2

You could take Array#flatMap for getting a flat representation of data for using unique values and map new objects.

 var data = [{ first: { children: [{ name: "abc", detail: "123" }, { name: "def", detail: "456" }] } }, { second: { children: [{ name: "ghi", detail: "123" }, { name: "jkl", detail: "456" }] } }, { third: { children: [{ name: "mno", detail: "123" }, { name: "pqr", detail: "456" }] } }, { fourth: { children: [{ name: "stu", detail: "123" }, { name: "vwx", detail: "456" }] } }, { fifth: { children: [{ name: "yz", detail: "123" }, { name: "abc", detail: "456" }] } }, { sixth: { children: [{ name: "def", detail: "123" }, { name: "ghi", detail: "456" }] } }], result = Array.from( new Set(data .flatMap(Object.values) .flatMap(({ children }) => children.map(({ name }) => name)) ), value => ({ value, label: value }) ); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }