如何映射 javascript 数组的 i 和 i+1 值？

Posted 2023-02-22

【中文标题】如何映射 javascript 数组的 i 和 i+1 值？

【英文标题】：How to map i and i+1 values of a javascript array?

【发布时间】：2019-11-24 00:14:45

【问题描述】：

我想使用地图在 javascript 地图中显示第 i 个值和第 i+1 个值，以在轮播中显示一组两张卡片。

以下是我正在使用的代码，我想对其进行修改以获得所需的结果：

testimonialContent.map((testimonial, i) => 
  return (
    <Carousel.Item className=classes.carousel_item>
      <div className=classes.root>
        <div className=classes.testimonial_card>
          testimonial[i]
        </div>
        /* Second card */
        <div className=classes.second_card>
          testimonial[i+1]
        </div>
      </div>
    </Carousel.Item>

感谢任何帮助或建议。谢谢。

【问题讨论】：

您的代码块有未闭合的括号和大括号。

【参考方案1】：

您可以使用reduce() 合并数据。

注意： (index % 2 === 0) 是您指定 nth 孩子的地方（例如：2 在这种情况下）

稍后在您的 render 方法中使用 destructuring in map()。

const sampleData = ['first', 'second', 'third', 'fourth', 'fifth']

class App extends React.Component 
  render() 
    console.log("rendered");
    
    const edited = [].concat(sampleData).reduce((unique, value, index) => 
      if (index % 2 === 0) 
        return [...unique, [value]];
      
      unique[unique.length - 1].push(value);
      return unique;
    , [])
    
    return (
      <div>
        edited.map(([item1, item2]) => 
          <div className='block'>
            item1 && <div className='odd'>item1</div>
            item2 && <div className='even'>item2</div>
          </div>
        )
      </div>
    );
  


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.block 
  border: 1px solid gray;


.odd 
  color: red;


.even 
  color: blue;

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：

我想同时显示第 i 个和第 i+1 个值。这个显示一次只有一个项目。我希望同时显示两个元素。

@anup 我更新了。这是你要找的吗？

【参考方案2】：

使用整个数组而不是当前迭代

地图的每次迭代中的证言都是一个对象。而testimonialContent 是整个数组。

testimonialContent.map((testimonial, i) => 
  return (
    <Carousel.Item className=classes.carousel_item>
      <div className=classes.root>
        <div className=classes.testimonial_card>
          testimonial[i]
        </div>
        /* Second card */
        <div className=classes.second_card>
          testimonialContent[i+1] // this is the line to change
        </div>
      </div>
    </Carousel.Item>

但是这里感觉有些不对劲。我想你可能有一个x y problem

为什么要将下一个迭代用作当前迭代？最后一项将失败，因为它不存在，并且永远不会显示第一个 testimonialContent 的值，因为您总是从索引 1 开始。

我会重新考虑您在这里所做的事情，也许会采取另一种方法。

【讨论】：

不应该testimonial[i] 只是testimonial？

@Kobe 作者要求从他的代码中获得下一个推荐，它是使用正确数组的精确副本

我说的是第一次提到推荐？ tesitmonial[i] 将未定义。

【参考方案3】：

testimonial 不是数组，而是该数组中的当前迭代项。对于“下一个”项目，您可以使用数组testimonialContent。

从评论中我了解到您希望实际生成 n/2 行，以便每个项目只出现一次。在这种情况下，使用普通的.map() 并不好，因为它会生成尽可能多的行，而您只需要一半的行数。相反，您可以使用Array.from 生成一个行数为一半（向上舍入）的数组，并使用该方法的回调参数。

Array.from(length: (testimonialContent.length+1)>>1, (_, i) => 
  return (
    <Carousel.Item className=classes.carousel_item>
      <div className=classes.root>
        <div className=classes.testimonial_card>
          testimonialContent[i*2]
        </div>
        /* Second card */
        <div className=classes.second_card>
          testimonialContent[i*2+1] || ""
        </div>
      </div>
    </Carousel.Item>
  )
)

【讨论】：

我喜欢你的解决方案，它有效，但有一个问题，我在一个轮播项目中得到 A 和 B，在另一个轮播项目中得到 B 和 C。我希望它在一个轮播项目中是 A 和 B，在另一个轮播项目中是 C 和 D，依此类推。感谢您的解决方案。

最好将此信息添加到您的问题中。我相应地更新了我的答案。

【参考方案4】：

请参阅您的第一个 div 中的 testimonial 实例以及您的第二个 div 中 testimonialContent 数组中第 i 个 +1 位置上的元素。

testimonialContent.map((testimonial, i) => 
  return (
    <Carousel.Item className=classes.carousel_item>
      <div className=classes.root>
        <div className=classes.testimonial_card>
          testimonial
        </div>
        /* Second card */
        <div className=classes.second_card>
          testimonialContent[i+1]
        </div>
      </div>
    </Carousel.Item>