我正在尝试映射一个数组并在数组中找到对象的索引

Posted 2023-02-22

【中文标题】我正在尝试映射一个数组并在数组中找到对象的索引

【英文标题】：I am trying to map over an array and find the index of object within array

【发布时间】：2017-02-15 16:52:32

【问题描述】：

我有一个组件，我想在对象数组中找到索引（现在我有一个硬编码的对象数组，但稍后将使用调用来获取数据）。我想在数组的每五个位置添加一个 2 的 mdOffset。我该怎么做呢？我的代码：

export default class Winks extends Component 
  constructor () 
    super()
    this.state =
      items: [
         id:1, name: "The Kooples - white top", url:"bloomingdales.com", src: "assets/male.png" ,
         id:2, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" ,
         id:3, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" ,
         id:4, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" ,
         id:1, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" ,
         id:1, name: "The Kooples - dress",  url:"bloomingdales.com", src: "assets/male.png" ,
         id:1, name: "The Kooples - dress",  url:"bloomingdales.com", src: "assets/male.png" ,
      ]
    
  

  render () 

    var listItems = this.state.items.map.bind(this)(function(item) 
      if (this.state.items.indexOf(item) % 5 === 0 ) 
        var columns = (
          <Col md=2 mdOffset=2>
              <img className='img-responsive' src=item.src></img>
            <Row>
              <span>item.name</span>
            </Row>
            <Row className="pull-right">
              <i className="fa fa-heart"></i>
            </Row>
          </Col>
        )
      

      else 
        var columns = (
          <Col md=2>
              <img className='img-responsive' src=item.src></img>
            <Row>
              <span>item.name</span>
            </Row>
            <Row className="pull-right">
              <i className="fa fa-heart"></i>
            </Row>
          </Col>
        )
      

      return columns
    );

    return (
        <Row>
          listItems
        </Row>
    )
  

【参考方案1】：

当您映射时，您将元素的索引作为第二个参数https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Array/map

例如：

arr.map(function(item, index) 
  if (index % 5 === 0) 
    // do your stuff here
  
);

或者

arr.map(function(item, index) 
  <Col mdOffset=index % 5 === 0 ? 2 : null>

  </Col>
);

【讨论】：

如果他想要每五个元素，这不会因为索引从 0 开始而减少一个吗？ [1,2,3,4,5].forEach(function(item,index) if (index % 5 === 0) console.log(item) ) 唯一要记录的项目是第一个索引，因为 0 % 任何内容都将为 0，第 5 个项目的索引为 4，因此不通过条件

不错，是的，我检查了这个

我想我的措辞可能有误，但是 Emanual 提供的内容对我有用，我本质上希望数组的第 6 个索引或第 5 个项目做一些事情。 [1,2,3,4,5,6].forEach(function(item,index) if (index % 5 === 0) console.log(item) ) 它吐出 0 和 6是我想要的。连续 5 项，第 6 项开始新行