javascript - 创建 "Next"和 "Previous"按钮以使用索引浏览数组？

Question

我正在尝试实现“下一个”和“上一个”按钮来帮助我浏览数组中的项目。

我使用数组中项目的索引来获取下一个或上一个项目。

示例:

  arrA =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

当前对象的id由以下表示

var selectedID = _id

下一个和上一个函数

  next(){
      var idx = arrA.map(x => x._id).indexOf(selectedID);

      if (idx === arrA.length - 1){
       //return first item
          var next_name = arrA[0].name;
      } else {
        var next_name = arrA[idx + 1].name
  }


  previous(){
      var idx = arrA.map(x => x._id).indexOf(selectedID);

        if (idx === arrA[0]){
         // return  last item
            var prev_name = arrA[arrA.length -1].name;
        } else{
          var prev_name = arrA[idx -1].name
  }

}

预期的结果是，当我单击任一按钮时，它应该将我带到下一个或上一个项目，但实际结果是它不停地循环数组。

Answer 1

当使用模 (%) 时，一切都会变得更加简单。它允许您在列表中前进(向前或向后)，而不必担心您是否位于开头或结尾。

const arr =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

let currentIndex = 0;
let currentId = arr[0]._id;

// initial log
log();

function next(){
  move();
}

function previous(){
  move(false);
}

function move(advance = true){
  currentIndex = (currentIndex + (advance ? 1 : -1) + arr.length) % arr.length;
  currentId = arr[currentIndex]._id;
  log();
}

function log(){
  console.log("Index: " + currentIndex, "Id: " + currentId);
}

<button onclick="previous();">Previous</button>
<button onclick="next();">Next</button>