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

Question

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

1. 如果值是字符串，则它必须显示在<p>标签中。
2. 如果该值是一个数组，它必须显示在一个表格中。
3. 如果该值是一个对象，它必须再次显示在卡片中。

下面的代码仅显示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;

Answer 1

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

Answer 2

在 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
}