遍历数组，我们通常使用map方法

  1. // 在实际开发中，如果数据涉及到增删改查了，key值我们通常使用业务id,而不是使用数组下标
  2. import React from 'react';
  4. class App extends React.Component {
  5.   render() {
  6.     let arr = ['a', 'b', 'c', 'd'];
  7.     return (
  8.       <ul>
  9.         {
  10.           arr.map((item, index) => {
  11.             return <li key={index}>{item}</li>
  12.           })
  13.         }
  14.       </ul>
  15.     )
  16.   }
  17. }

遍历对象，两种方法（for…in循环做成自运行函数、Object.entries(obj)将对象转换成数组再使用map方法）

  1. // for 循环只是流程控制语句，而非表达式，也就是for循环运算完也不会有结果。
  2. // 那怎么把 for循环做成一个表达式呢，这样才会有结果
  3. // 做成自运行函数就可以了
  5. class App extends React.Component {
  6.   render() {
  7.     let obj = {
  8.       a: 1,
  9.       b: 2,
  10.       c: 3
  11.     }
  12.     return (
  13.       <ul>
  14.         {
  15.           // for(const key in obj) {
  16.             // if(obj.hasOwnProperty(key)) {
  17.                // const value = obj[key];
  18.             // }
  19.           // }
  20.           (() => {
  21.             let domArr = [];
  22.             for(const key in obj) {
  23.               if(obj.hasOwnProperty(key)) {
  24.                 const value = obj[key]
  25.                 domArr.push(<li key={key}>{value}</li>)
  26.               }
  27.             }
  28.             return domArr;
  29.           })()
  30.         }
  31.       </ul>
  32.     )
  33.   }
  34. }
  36. // Object.entries() 把对象转换成数组
  37. class App extends React.Component {
  38.   render() {
  39.     let obj = {
  40.          a: 1,
  41.       b: 2,
  42.       c: 3
  43.     }
  44.     return (
  45.       <ul>
  46.         {
  47.           Object.entries(obj).map(([key, value], index) => {// item是一个小数组，把item解构，写法是[key, value]
  48.             return <li key={key}>{value}</li>
  49.           }) 
  50.         }
  51.       </ul>
  52.     )
  53.   }
  54. }

遍历字符串（将字符串转换成数组再使用map方法）

  1. class App extends React.Component {
  2.   render() {
  3.     let str = 'hello world'
  4.     return (
  5.       <ul>
  6.         {
  7.           str.split('').map((item, index) => {
  8.             return <li key={index}>{item}</li>
  9.           })
  10.         }
  11.       </ul>
  12.     )
  13.   }
  14. }

遍历数字（将数字也转换成数组再使用map方法）

  1. class App extends React.Component {
  2.   render() {
  3.     let num = 5;
  4.     return (
  5.       <ul>
  6.         {
  7.           new Array(num).fill('').map((item, index) => {
  8.             <li key={index}>{item}</li>
  9.           })
  10.         }
  11.       </ul>
  12.     )
  13.   }
  14. }

结论

综上可知，react当中，数据的遍历，不论是对象还是字符串或者其他的数据结构都是先转换为数组，再使用map循环去遍历。