const arr = [5ce易塔云建站-模板下载,web开发资源,技术博客
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},5ce易塔云建站-模板下载,web开发资源,技术博客
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},5ce易塔云建站-模板下载,web开发资源,技术博客
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}5ce易塔云建站-模板下载,web开发资源,技术博客
];5ce易塔云建站-模板下载,web开发资源,技术博客
const row = [];5ce易塔云建站-模板下载,web开发资源,技术博客
//使用普通forEach()方法进行遍历，可以得到item和index值。5ce易塔云建站-模板下载,web开发资源,技术博客
arr.forEach(5ce易塔云建站-模板下载,web开发资源,技术博客
    (item, index) => {row.push(item.name)}5ce易塔云建站-模板下载,web开发资源,技术博客
);

arr.map((item, i)=>{5ce易塔云建站-模板下载,web开发资源,技术博客
    row.push(item.name);5ce易塔云建站-模板下载,web开发资源,技术博客
    console.log(i);5ce易塔云建站-模板下载,web开发资源,技术博客
})

for(let [item, i] of arr){5ce易塔云建站-模板下载,web开发资源,技术博客
    row.push(item.name);5ce易塔云建站-模板下载,web开发资源,技术博客
    console.log(i);//   无法得到i或报错5ce易塔云建站-模板下载,web开发资源,技术博客
}

for(let [element, index] of new Map(arr.map((item, i) => ([item, i])))){5ce易塔云建站-模板下载,web开发资源,技术博客
    console.log(element, index);5ce易塔云建站-模板下载,web开发资源,技术博客
    row.push(element.name)5ce易塔云建站-模板下载,web开发资源,技术博客
}

const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
class HTMLJSX extends React.Component{
  render () {
    const item = this.props.item;
    const price = this.props.price;
    return(
        <li>
          <span>{item}</span>
          <em>{price}</em>
        </li>
    )
  }
}
class List extends React.Component{
  render () {
    const rows = [];
    const productLists = this.props.products;
    productLists.forEach(
        (item,i) => {
          rows.push(
              <HTMLJSX item={item.name} price={item.price} key={i}/>  //两种方法都可以进行虚拟DOM的遍历
              // <li key={i}>
              //   <span>{item.name}</span>
              //   <em>{item.price}</em>
              // </li>
          );
        }
    )
    console.log(rows);
    return(
        <ul>
          {/*因为rows上面返回的是虚拟机DOM，所以可以直接在JSX里渲染了。*/}
          {rows}
        </ul>
    )
  }
}