Javascript：使用地图在每个循环中迭代多个项目

IT技术 javascript reactjs typescript ecmascript-6
2021-05-17 07:32:24

typescript也有效

假设我有一个这样的数组

const array = ['one', 'two', 'three', 'four', 'five']

我想生产一些看起来像的组件

  <div>
    one
    two
  </div>
  <div>
    three
    four
  </div>
  <div>
    five
  </div>

如果我想使用 map 函数，据我所知，我必须写一些类似的东西

{
  let saved
  array.map((item) => {
    if (saved === ''){
      let temp = saved
      saved = ''
      return (  
        <div>{`${item} ${temp}`}</div>
      )
    }else{
      saved = item
    }
  })
}

但我想稍微清理一下这段代码。我正在寻找一种方法，我可以使用 map 函数（或 forEach）来迭代一次在 2+ 项之间移动的数组，以便将上面的代码缩短为如下所示的内容，并产生相同的结果.

array.map((item1, item2) => <div>{`${item1} ${item2}`}</div>)
4个回答

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
let arr=chunk([1, 2, 3, 4, 5], 2);

arr.map(item=> item.length>1 ? `<div>${item[0]}${item[1]}</div>` : `<div>${item[0]}</div>` )

按照此链接使用 lodash 块方法

只使用for带有 i+2 而不是 i++的循环？

const displayValue = () => {
    let content;

    for(let i = 0; i <= array.length; i+2){
      content += <div>{array[i]} {i+1 <= array.length ? array[i+1] : ''}</div>
    }

    return content;
  };

不知道您的用例，但这是想法。例如，如果您的数组包含 5 个元素，请注意 i+1 可能超出范围。

let htmlString = ``

let biArray = [['one', 'two'], ['three', 'four']]

biArray.map(function(elem) {

    htmlString = [...htmlString, `<div>${elem[0]} ${elem[1]}</div>`]
    // console.log(htmlString)

})

您可以使用切片方法将数组分成部分。试试这个

const displayChunk=(arr)=>
{
  let newArr=[];
  for(let i=0;i<arr.length;i+=2)
  {
    newArr.push(arr.slice(i,i+2));
  }
return newArr.map(el=><div>{el[0]}</div>{el[1]? <div>{el[1]}</div>:""})


 }
其它你可能感兴趣的问题
上一篇组合流星+react+react-引导程序所需的包 下一篇npm run test - 生命周期中的不安全烫发