Question

在React应用程序中，为了遍历嵌套数组，我使用的方法如下：

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

但是，我觉得它看起来并不好，我想改用ES6发生器。

类似的东西：

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

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

更新1： 我在嵌套数组中有一些其他值，我想得到它作为输出。如果我在同一个区块中使用两次屈服，这样可以吗？我的意思是在下面代码的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

您可以尝试使用嵌套数组，我也正在尝试这些。所以，请彻底测试一下。

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

也与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); 
// }

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

1 个答案: