用于动态计算的公式。slice（）-Javascript

我想动态地将数组元素渲染到指定数量的列中

给定一个数组

const sessions=[10,10,5]

和

const trials=[1,2,3，…，25]

，其中sessions.length是列数，trials是数据

    <div class="column-1">
      {
          trials.slice(0, 10).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>
    <div class="column-2">
      {
          trials.slice(10, 20).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>
    <div class="column-3">
      {
          trials.slice(20, 25).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>

---

这是计算

x

和

y

所需的操作

sessions.map((s, idx, sessions) => {
   const x = sessions.slice(0, idx).reduce((acc, val) => acc + val, 0);
   const y = x + s;
   return (
      <div class=`column-${idx+1}`>
         {
            trials.slice(x, y).map(t => {
               return <p>{t} seconds</p>
            }
         }
      </div>
   )
}

sessions.map（（s，idx，sessions）=>{
const x=sessions.slice（0，idx）.reduce（（acc，val）=>acc+val，0）；
常数y=x+s；
返回(
{
trials.slice（x，y）.map（t=>{
返回{t}秒

}
}
)
}

*第一次回调中的

sessions

将是sessions数组。我使用

reduce

方法来计算切片的开始位置。

---

*

在

.map（）

数组运行时，只需保持

会话总数的运行总数

let x = 0;

sessions.map((s, idx) => {
    <div class=`column-${idx+1}`>
      {
          trials.slice(x, x = x + s).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>
}

设x=0；
sessions.map（（s，idx）=>{
{
trials.slice（x，x=x+s）.map（t=>{
返回{t}秒

}
}
}


如果不喜欢在表达式的位置使用赋值的结果，请使用第二个变量，并在标记之前进行计算

let x = 0;
let y = 0;

sessions.map((s, idx) => {
    x = y;
    y = y + s;

    <div class=`column-${idx+1}`>
      {
          trials.slice(x, y).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>
}

设x=0；
设y=0；
sessions.map（（s，idx）=>{
x=y；
y=y+s；
{
trials.slice（x，y）.map（t=>{
返回{t}秒

}
}
}
在地图外创建
x
，初始化为
0
，然后
试用。切片（x，x=x+s）
我不打算发布答案，因为那不是真正的JS，我不知道它是什么语言（可能是React或其他什么？）但是现在我觉得我应该给出一个可接受的答案，所以我假设它通常使用JS语义。不，你真的不需要在每次迭代时重新计算值。你无论如何都在迭代，所以只要有一个保持运行总数的变量，就像我在答案下面的注释中所示。
let x = 0;
let y = 0;

sessions.map((s, idx) => {
    x = y;
    y = y + s;

    <div class=`column-${idx+1}`>
      {
          trials.slice(x, y).map(t => {
            return <p>{t} seconds</p>
          }
      }
    </div>
}