javascript - 循环遍历 Javascript 数组

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];
      }
})();