Javascript карта, перебирающая несколько элементов из одного и того же массива за цикл

Question

Typescript также работает

---

Допустим, у меня есть такой массив

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

И я хочу создать некоторые компоненты, которые будут выглядеть

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

Если бы я хотел использовать функцию карты, насколько мне известно, мне пришлось бы написать что-то вроде

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

Но я бы хотел немного очистить этот код . Я ищу способ, которым я могу использовать функцию карты (или forEach) для итерации по массиву, перемещаясь по 2+ элементам за раз, чтобы приведенный выше код можно было сократить до чего-то вроде ниже и получить тот же результат .

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

Answer 1

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>` )

Используйте метод loda sh chunk по этой ссылке

Answer 2

Просто используйте for l oop с 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;
  };

Не знаю вашего варианта использования, но вот идея. Просто будьте осторожны с i + 1, который может быть вне границ, например, если ваш массив содержит 5 элементов.

Answer 3

Вы можете просто использовать метод нарезки, чтобы разделить массив на части. Попробуйте это

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>:""})


 }

Answer 4

let htmlString = ``

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

biArray.map(function(elem) {

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

})