如何遍历包含数组、对象和字符串的对象答案

【问题标题】：How to Iterate through an Object which has an array, object and string in it如何遍历包含数组、对象和字符串的对象
【发布时间】：2021-02-10 04:41:38
【问题描述】：

我试图通过循环对象来显示卡片内的数据：

如果值是 String，它必须显示在 <p> 标记中。
如果值是数组，它必须显示在表格中。
如果值是对象，它必须再次显示在卡片中。

下面的代码只显示value1，因为检查字符串的if语句返回值并且for循环在那里停止。有没有什么办法可以通过循环来完成我上面提到的所有类型？

import React, { Component } from 'react';
import { Card, Table } from "react-bootstrap";

const obj1 = {
    "title1": "value1",
    "title2": ["value2", "value3", "value4"],
    "title3": {
    "title4": "value5",
    "title5": "value6"
    }
    };

class Parse extends Component {

    parseHandler = (data) => {
        let arr = Object.values(data);
        for(let i in arr) {
            if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
                return (
                    Object.values(arr[i]).map(arrData => {
                        return (
                            <Card>
                                <Card.Body>
                                    <p>{arrData}</p>
                                </Card.Body>
                            </Card>
                        )
                    })
                )
            } if(Array.isArray(arr[i])) {
                return (
                arr[i].map(arrData2 => {
                    return (
                        <Table>
                            <tr>
                                <td>{arrData2}</td>
                            </tr>
                        </Table>
                        )
                    }    
                ))
            } if(typeof arr[i] === 'string') {
                return (
                    <p>{arr[i]}</p>
                )
            }
        }
    }

    render() { 
        return ( 
            <Card>
                {this.parseHandler(obj1)}
            </Card>
         );
    }
}
 
export default Parse;

【问题讨论】：

标签： javascript reactjs nested-for-loop

【解决方案1】：

当在 for 循环中添加 return 语句时，它将中断循环。鉴于您的代码实现，您可能想要创建一个content 数组。您会将值推送到数组中。最后你会返回数组：

parseHandler = (data) => {
  const arr = Object.values(data);
  const content = [];
  for(let i in arr) {
      if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
          content.push(
              Object.values(arr[i]).map(arrData => {
                  return (
                      <Card>
                          <Card.Body>
                              <p>{arrData}</p>
                          </Card.Body>
                      </Card>
                  )
              })
          )
      }else if(Array.isArray(arr[i])) {
          content.push(
          arr[i].map(arrData2 => {
              return (
                  <Table>
                      <tr>
                          <td>{arrData2}</td>
                      </tr>
                  </Table>
                  )
              }    
          ))
      }else if(typeof arr[i] === 'string') {
          content.push(
              <p>{arr[i]}</p>
          )
      }
  }
  return content
}

【讨论】：

【解决方案2】：

数组是“对象”类型。您应该使用返回 true 或 false 的 Array.isArray(arr[i]) 来了解它是数组还是对象。

【讨论】：