循环遍历 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

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

不往下循环
你必须有机会 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 - 三元运算符return 0（我们必须将media设置为零，因为没有索引==的媒体3)
如果false - 三元运算符return media+1值。

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

Answer 2

递增要环绕的值的常用技巧是使用 % 运算符。对于递减，你只需要暴力破解它并检查负值：

 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 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 个数组

Cycling through Javascript Array

javascript

arrays

if-statement