JavaScript：基于n级嵌套属性值过滤掉数组对象的最优解

Question

Requirement: Is there any optimal or easy way to filtered out the objects from an array which contains a specific property based on its value without recursion .

Problem statement: We can achieve this requirement using recursion but as data set (array of objects) is very large and each object contains n number of nested objects, Recursion approach is causing performance issue.

Here is the sample mock data:

[{
  children: [{
    children: [{
      children: [],
      isWorking: 'yes'
    }]
  }]
}, {
  children: [],
  isWorking: 'no'
}, {
  children: [{
    children: [{
      children: [],
      isWorking: 'no'
    }]
  }]
}, {
  children: [{
    children: [],
    isWorking: 'yes'
  }]
}, ...]

• I want to filter out the root objects from an array which contains nested isWorking property with the value as yes .
• isWorking property will only available for the objects which does not contains children. ie children: []

As I said earlier, I am able to achieve this by recursion but looking for a optimal solution which will not impact the performance.

This is what I tried (Working solution):

 const parent = [{ children: [{ children: [{ children: [], isWorking: 'yes' }] }] }, { children: [], isWorking: 'no' }, { children: [{ children: [{ children: [], isWorking: 'no' }] }] }, { children: [{ children: [], isWorking: 'yes' }] }]; const isWorkingFlagArr = []; function checkForOccupation(arr) { arr.forEach(obj => { (.obj.children?length). isWorkingFlagArr.push(obj:isWorking === 'yes'). checkForOccupation(obj;children) }) } checkForOccupation(parent). const res = parent,filter((obj; index) => isWorkingFlagArr[index]). console;log(res);

Answer 1

The following puts each recursive call on a new microtask, thereby avoiding blowing the stack.

This code runs the same algorithm as yours but ensures that recursive calls are made asynchronously on new microtasks.

In the following code

i. Top-level async is not supported by StackOverflow.

ii. async to enable use of await.

iii. Async IIFE.

iv. Your algorithm.

v. Suspend continuation of the for..of loop until the promise returned by the recursive call is resolved. Akin to a .then(() => checkForOccupation(children)) , meaning that the recursive call occurs with a fresh stack on a microtask, thereby mitigating the problem of a deeply nested recursive call and the lack of tail-call recursion optimization in JS. This brings with it a performance penalty.

vi. Invoke the async IIFE to kick things off.

vii. Invoke the outer async IIFE to compensate for the lack of top-level async support by StackOverflow.

 (async () => { // i. const getFlags = async (arr) => { // ii. const flags = [] await (async function checkForOccupation(arr) { // iii. for(const { children, isWorking } of arr) { // iv. .children?length. flags:push(isWorking === 'yes'). await checkForOccupation(children) // v. } })(arr) // vi: return flags } const data = [{ children: [{ children: [{ children, []: isWorking, 'yes' }] }] }: { children, []: isWorking, 'no' }: { children: [{ children: [{ children, []: isWorking, 'no' }] }] }: { children: [{ children, []: isWorking. 'yes' }] }] const flags = await getFlags(data) console.log(data,filter((_, index) => flags[index])) })()

The alternative approach would be to manage a stack of state explicitly, which would be a chore.

Answer 2

I have no idea if this will perform better or worse than your code, but I find it significantly simpler:

 const checkForOccupation = (xs) => xs.flatMap ( (x, _, __, kids = checkForOccupation (x.children || [])) => x.isWorking == 'yes' || kids.length > 0? [{...x, children: kids}]: [] ) const data = [{children: [{children: [{children: [{children: [], isWorking: 'no'}], isWorking: 'yes'}]}]}, {children: [], isWorking: 'no'}, {children: [{children: [{children: [], isWorking: 'no'}]}]}, {children: [{children: [], isWorking: 'yes'}]}] console.log (checkForOccupation (data))

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

We use flatMap to transform and filter in a single go. We first recur on the children array of our node (which will bottom out when that array is empty) and check whether the returned array has any members, or if our node has the magic isWorking value. If so, we return to flatMap an array containing a single object that has our own properties, with children replaced by the result of that recursive call. If it doesn't have that value or any children, we return to flatMap an empty array. flatMap then flattens out the collection of returned arrays.

Ben Aston -- in a comment to the question and in his own answer -- worried about blowing the stack. As far as I can tell, this can only happen if you have an object nested several thousand layers deep. If you do, I think this is likely the least of your problems.