开发者问题收集

React / Javascript for 循环-超过数组长度时从 idx 0 开始

2020-04-02
1243
javascript arrays reactjs loops for-loop

我希望你们中的一个人能够帮助我解决一个 javascript / react 问题。 我正在构建一个 web 应用程序，您作为用户可以在其中创建带有歌词 id 的歌单。这意味着当打开歌单时，您可以查看该歌单中引用的每一首歌词。在窗口底部，我有一个上一个和下一个按钮，允许您查看列表中的下一首或上一首歌词。

我的问题是，当到达歌词列表的末尾/最后一个索引号并尝试单击下一个时，for 循环中断并且我的页面崩溃。我想要它做的是，当达到歌词数组的长度并且您尝试超过时，for 循环再次从索引 0 重新启动。我尝试了多种方法和理论，但似乎找不到任何可行的方法。

这是我拥有的歌词 ID 数组。 

['Id1', 'Id2', 'Id3', 'Id4']

这是我的函数，用于检查当前索引号/当前正在查看的歌词 ID。此函数返回当前索引号。 

function checkLyricIdx() {
        let setlistLength = setlist.lyrics.length;
        for (var i = 0; i < setlistLength; i++) {
            if (setlist.lyrics[i] === chosenLyricId) {
                return i;
            }
        }
 }

这是“查看下一首歌词”函数，它首先检查当前索引号，然后使用下一个歌词 ID 更新状态（通过增加 idx 号来实现）。 

async function viewNextLyric(e) {
        e.preventDefault();
        let currentIndex = await checkLyricIdx();
        setChosenLyricId(setlist.lyrics[currentIndex + 1]);
    }

查看上一首歌词 ID 的函数与上面的几乎相同，我只是将 currentIndex 减 1。

只是为了澄清我的问题。我如何重做这个函数，以便在超出数组长度时不会中断？我希望当尝试超出数组的长度时，它会重新启动到索引 0 / 您再次查看列表。当我到达最后一个歌词 ID 并尝试单击下一个时，应用程序崩溃并显示以下内容：

TypeError：undefined 不是对象（评估“chosenLyricId.length”）

2个回答

如果希望索引从任一端换行，请使用模数运算。 

const dataArray = ['id1', 'id2', 'id3', 'id4', 'id5', 'id6', 'id7'];

const wrapIndex = (arr, index) => index % arr.length;

for (let i = 0; i < 50; i++) {
  console.log('Iteration', i, 'index', wrapIndex(dataArray, i), dataArray[wrapIndex(dataArray, i)]);
}

如果需要，您也可以绑定它。 

const dataArray = ['id1', 'id2', 'id3', 'id4', 'id5', 'id6', 'id7'];

const bound = (min, max, val) => Math.max(min, Math.min(val, max));

const boundIndex = (arr, index) => bound(0, arr.length - 1, index);

for (i = -3; i < 10; i++) {
  console.log('Iteration', i, 'index', boundIndex(dataArray, i), dataArray[boundIndex(dataArray, i)]);
}
Drew Reese
2020-04-02

您可以像这样修改 viewNextLyric 函数 

async function viewNextLyric(e) {
    e.preventDefault();
    let currentIndex = await checkLyricIdx();
    setChosenLyricId(setlist.lyrics[(currentIndex + 1) % setlist.lyrics.length]  );
}

这样，当您位于最后一个索引并单击下一个时，它会增加索引并执行模数运算，结果为 0。

您的 viewPreviousLyric 函数也需要修改 

async function viewPreviousLyric(e) {
    e.preventDefault();
    let currentIndex = await checkLyricIdx();
    setChosenLyricId( currentIndex === 0? setlist.lyrics[setlist.lyrics.length-1] : setlist.lyrics[currentIndex - 1]  );
}

或 

async function viewPreviousLyric(e) {
    e.preventDefault();
    let currentIndex = await checkLyricIdx();
    setChosenLyricId( currentIndex === 0? setlist.lyrics[0] : setlist.lyrics[currentIndex - 1]  );
}

取决于您希望上一个功能如何工作。

Kuncheria
2020-04-02