剖析React嵌套数据遍历：递归 vs 循环，谁是效率之王？

2023-08-19 20:55:09

React 嵌套数据遍历：循环与递归的效率比拼

嵌套数据遍历：选择循环还是递归？

在 React 中，嵌套数据遍历是处理复杂数据结构的常见任务。无论是获取对象的属性还是构建动态列表，嵌套数据遍历都至关重要。那么，当我们面对嵌套数据时，哪种遍历方式更胜一筹：循环还是递归？

循环方式：简单易懂的遍历利器

循环方式是嵌套数据遍历的常用方法，因其简单易懂而受到青睐。在大多数情况下，循环都能满足我们的需求。

const data = [
  {
    id: 1,
    name: 'John',
    children: [
      {
        id: 2,
        name: 'Mary',
      },
      {
        id: 3,
        name: 'Bob',
      },
    ],
  },
  {
    id: 4,
    name: 'Jane',
    children: [
      {
        id: 5,
        name: 'Tom',
      },
      {
        id: 6,
        name: 'Jerry',
      },
    ],
  },
];

const result = [];

for (const item of data) {
  result.push(item.name);
  for (const child of item.children) {
    result.push(child.name);
  }
}

console.log(result); // ["John", "Mary", "Bob", "Jane", "Tom", "Jerry"]

递归方式：处理复杂结构的灵活性利器

递归方式以其灵活性脱颖而出，它让我们能轻松处理复杂的数据结构，同时代码也更为简洁。

const data = [
  {
    id: 1,
    name: 'John',
    children: [
      {
        id: 2,
        name: 'Mary',
      },
      {
        id: 3,
        name: 'Bob',
      },
    ],
  },
  {
    id: 4,
    name: 'Jane',
    children: [
      {
        id: 5,
        name: 'Tom',
      },
      {
        id: 6,
        name: 'Jerry',
      },
    ],
  },
];

const result = [];

const traverse = (data) => {
  for (const item of data) {
    result.push(item.name);
    if (item.children) {
      traverse(item.children);
    }
  }
};

traverse(data);

console.log(result); // ["John", "Mary", "Bob", "Jane", "Tom", "Jerry"]