Question

我有一个javascript数组，mediaSizes如下：['xs','md','lg']。

我正在使用变量media来引用数组中的特定索引。因此媒体可以是0,1或2.因此mediaSizes[media]应该输出xs，md或lg。

我有向上和向下箭头，供用户循环浏览此数组。但是，当用户点击向上箭头并且media值为2时，我希望用户循环回到xs。同样，如果用户按下xs上的向下箭头，我希望它们循环到大。

我有以下if else声明，但它似乎不起作用：

  var mediaSizes = ['xs','md','lg'];

  var media = 0;

  $scope.mediaDisplay = mediaSizes[media];

  $scope.changeMedia = function(direction) {
    if (media > 2 || media < 0) {
      media = 0;
    } else { 
      if (direction == 'up') {
        media ++;
        $scope.mediaDisplay = mediaSizes[media];
      } else {
        media --;
        $scope.mediaDisplay = mediaSizes[media];
      }
    }   
  }

现在，我决定将media值设置为0，以使其正常工作。必须有一种更简单的方法来循环0,1,2 ......

Answer 1

增加要包围的值的常用技巧是使用%运算符。对于递减，您只需强制它并检查负值：

 var mediaSizes = ['xs','md','lg'];

  var media = 0;

  $scope.mediaDisplay = mediaSizes[media];

  var changeMedia = function(direction) {
      if (direction === 'up') {
          media = ++media % mediaSizes.length;
      } else {
          if (--media < 0) media += mediaSizes.length;
      }
      $scope.mediaDisplay = mediaSizes[media];
  }

%运算符在递增时很方便，因为它会保证0和operand - 1之间的值。因此media % mediaSizes.length将始终是数组的合法索引，并且当您增加媒体时，它将适用于环绕。

不幸的是，%运营商没有为负数做你想做的事情，所以如果我们找到负数，我们必须做一些不同的事情。在这种情况下，我只是选择添加mediaSizes.length，这将导致-1回绕到最后一个索引。

仅供参考，请注意我使用的是mediaSizes.length而不是任何硬编码的常量，因此即使您向阵列添加了更多的mediaSizes，此代码也能继续正常运行。这是更强大的代码的原则之一，可以自动处理其他地方的更改。

对于代码清洁度，这可能是一个很好的地方来捕获闭包中的一些变量，使它们远离全局范围：

var changeMedia = (function() {
      var mediaSizes = ['xs','md','lg'];
      var media = 0;
      $scope.mediaDisplay = mediaSizes[media];

      return function(direction) {
          if (direction === 'up') {
              media = ++media % mediaSizes.length;
          } else {
              if (--media < 0) media += mediaSizes.length;
          }
          $scope.mediaDisplay = mediaSizes[media];
      }
})();

Answer 2

您的代码在几个方面不正确。

不会循环
您必须具有范围的mediaDisplay属性，而不是某些全局mediaDisplay对象。 UPD ：已修复
不正确的递增和递减。例如，如果当前media == 2并且用户正在进行up方向，那么您正在递增该值（media ++），然后尝试获取mediaSizes[3]当然不存在。

请改用此代码：

var mediaSizes = ['xs','md','lg'];

var media = 0;

$scope.mediaDisplay = mediaSizes[media];

var changeMedia = function(direction) {
    switch (direction) {
        case 'up':
            media = media === 2 ? 0 : media+1;
            break;
        case 'down':
            media = media === 0 ? 2 : media-1;
            break;
    }
    $scope.mediaDisplay = mediaSizes[media];
};

<强> UPD 那么media = media === 2 ? 0 : media+1 - 我们在这里使用ternary opertator。

首先检查media是否=== 2.

如果true - 三元运算符返回0（我们必须将media设置为零，因为没有索引为== 3的媒体）
如果false - 三元运算符返回media+1值。

递减的逻辑几乎相同，但在这种情况下，我们检查media === 0而不是media === 2。

Answer 3

怎么样：

  if (direction == 'up') {
    media ++;
    if(media > 2){
       media = 0;
    }
    var mediaDisplay = mediaSizes[media];
  } else {
    media --;
    if(media < 0){
       media = 2;
    }
    var mediaDisplay = mediaSizes[media];
  }

循环访问Javascript数组

3 个答案: