ReactJS - 使用 ES6 生成器的嵌套元素的递归方法

Question

在 React 应用程序中，为了循环遍历 嵌套数组，我使用了这样的方法：

recursiveMethod = () => {
 // some code... 
this.recursiveMethod();
}

但是，我认为它看起来不太好，我想改用 ES6 生成器。

类似：

function* genFunc() {
  ...
  yield; 
  ...
}

但我不确定代码样式应该是什么样子。我需要一个可以在其他方法中使用的函数。例如，最后返回一个数组的函数。我想在 render(){...} 等其他方法中调用该函数并获取结果数组。

更新 1： 我在嵌套数组中有一些其他值，我想将其作为输出。如果我在同一个块中使用两次 yield 可以吗？我的意思是在下面代码的 else{} 块中：

if (condition) {
      yield element;
    } else {
      yield element;
      yield* traverseNested(element);
    }

更新 2 我的意思是其他值：

[{
   key1: value1,
   key2: value2,
   key3: { iterMe : {
            otherKey: otherValue,
            otherKey: otherValue,
            iterMe : { iterMe : {...} }}
    }
   },{},{},{}]

Answer 1

你可以试试这个嵌套数组，我也在试验这些。所以，请彻底测试一下。

• 首先检查数据是否存在
• 现在，遍历数组
• 如果遇到数组以外的任何内容，则生成该值
• Else 使用数据子集生成函数，类似于递归函数

也适用于 React WORKING DEMO

注意：这会以深度优先方式遍历嵌套数组。

const k = [10, [20], [[1, [2, 3, 4]]]];

function* traverseNested(data){
  if (!data) { return; }

  for(var i=0; i<data.length; i++) {
    var element = data[i];

    element instanceof Array 
     ?
     yield* traverseNested(element)
     : 
     yield element    
  }
}

let iter = traverseNested(k);
let res = iter.next()

while(!res.done){
  console.log(res.value);
  res = iter.next();
}

// Or this for .. of iterator can also be used
// for (let res of iter) { 
//   console.log(res); 
// }