Inc/dec逻辑遍历多个数组值并在数组中存储位置

Question

我有一个包含2个数组up和down的对象，这些值应该链接到向上和向下键，向上勾选你应该通过up数组移动，如果你向下勾选你应该通过任何up勾选值(如果up勾选发生了)通过down数组，反之亦然。

我已经设法创建了一个版本，但有一些问题得到undefined在我认为是上下之间的交叉点。有人可能会给我一些建议，如何使这个更强大，并解决undefined问题?我的计数器应该从-1开始还是应该怎么做?

JS

var prices = {
    "up" : [
      {"r": 10.25, "f" : "10.25"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
        {"r": 7.50, "f" : "7.50"},
        {"r": 7.75, "f" : "7.75"},
        {"r": 8.00, "f" : "8.00"},
        {"r": 8.25, "f" : "8.25"},
        {"r": 8.50, "f" : "8.50"},
        {"r": 8.75, "f" : "8.75"},
        {"r": 9.00, "f" : "9.00"},
        {"r": 9.25, "f" : "9.25"},
        {"r": 9.50, "f" : "9.50"},
        {"r": 9.75, "f" : "9.75"} 
    ]
};
var $btns = $('.js-btn');
var counter = -1;
$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');
    if(dir === 'up') {
        if(counter >= -1) {
            console.log(prices[dir][++counter]);
        } else {
            console.log(prices['down'][prices['down'].length + counter++]);
        }   
    }
    if(dir === 'down') {
        if(counter <= -1) {
            console.log(prices[dir][prices[dir].length + counter--]);
        } else {
            console.log(prices['up'][--counter]);
        }
    }
});

JS Fiddle http://jsfiddle.net/kyllle/7Lznj00w/

Answer 1

为了确保数组访问是有效的，您希望数组索引在[0, arr.length-1]范围内。如果你试图访问一个无效索引的JavaScript数组，你将得到undefined

您可以将upIndex和downIndex初始化为0(列表中的第一个元素)。现在假设您想要up数组中的下一个元素。您可以按照如下方式更新upIndex

upIndex = (upIndex + 1) % prices.up.length

%运算符给出除法后的余数(因此3 % 2是1，因为3/2留下1的余数)。所以如果你已经在up的最后一个索引，它会从头开始。上的最后一个索引是9，上。长度为10，所以upIndex = (9 + 1) % 10 = 0，确保您始终保持在数组的边界内。

Answer 2

console.clear();
var prices = {
    "up" : [
      {"r": 10.25, "f" : "10.25"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
    	{"r": 7.50, "f" : "7.50"},
        {"r": 7.75, "f" : "7.75"},
        {"r": 8.00, "f" : "8.00"},
        {"r": 8.25, "f" : "8.25"},
        {"r": 8.50, "f" : "8.50"},
        {"r": 8.75, "f" : "8.75"},
        {"r": 9.00, "f" : "9.00"},
        {"r": 9.25, "f" : "9.25"},
        {"r": 9.50, "f" : "9.50"},
        {"r": 9.75, "f" : "9.75"} 
    ]
};
var $btns = $('.js-btn');
var counter = -1;
$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');
    
    if(dir === 'up') {
/*use return; to stop or reset counter = -1 | 0*/
if(!prices[dir][counter+1])return;
         counter++;
        if(counter >= -1) {
            console.log(prices[dir][counter]);
        } else {
        	console.log(prices['down'][prices['down'].length + counter]);
        }   
    }
    
    if(dir === 'down') {
/*use return; to stop or reset counter = -1 | 0*/
if(!prices[dir][counter-1])return;
        counter--;
        if(counter <= -1) {
            console.log(prices[dir][prices[dir].length + counter]);
        } else {
            console.log(prices['up'][counter]);
        }
        
    }
});

* {
  -webkit-font-smoothing: antialiased;
}
body {
    padding: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button class="btn btn-success btn-block  js-btn" data-dir="up">Up</button>
    <button class="btn btn-danger btn-block  js-btn" data-dir="down">Down</button>
</div>