Question

在我提出问题之前，我想让每个人都知道我很欣赏这样一个事实：总有一个人愿意提供帮助，而在我结束的时候，我会尽可能多地回馈社区。感谢

现在，我想了解一下如何正确利用JavaScript中的“for ... in”循环，我已经做了一些研究并尝试了一些事情，但我仍然不清楚如何正确使用它。

假设我在HTML表单中有一个随机数量的“select”标签，我不要求用户为所有这些标签选择一个选项，如果需要，可以保留一些不变的选项。但是，我需要知道他们是否选择了一个或至少一个。

我试图找出用户是否选择了其中任何一个的方法是使用“for ... in”循环。例如：

var allSelected = $("select option:selected");
var totalSelected = $("select option:selected").length;

第一个变量生成所有选定选项的数组。第二个变量告诉我在表单中有多少选定的选项（选择标签可以多于一个，每次都会更改）。现在，为了查看是否已选择任何内容，我遍历每个元素（选择的选项），并检索“value”属性。默认的“option”标签有一个值=“0”，所以如果任何选中的选项返回一个大于0的值，我知道至少选择了一个选项，但它不必按顺序排列，这是我的循环到目前为止：

for(var i = 0; i < totalSelected; i++){
  var eachOption = $(allSelected[i]).val();
  var defaultValue = 0;
  if(eachOption == defaultValue){
    ...redirect to another page
  }else if(eachOption > defaultValue){
    ... I display an alert
  }
}

我的问题是，只要“if”匹配0值，它就会将用户发送到下一页而不测试数组中的其余元素，并且用户可以选择第二个或第三个选项

我真正想做的是检查数组中的所有元素，然后采取下一步行动，在我看来这就是我能做到的，但我没有做对：

var randomValue = 25;  
for(randomValue in allSelected){
  var found = true;
  var notFound = false
  if(found){
    display an alert
  }else{
    redirect to next page
  }
}

这个循环或我正在使用的逻辑是有缺陷的（我很确定），我想要做的是测试数组中针对单个变量的所有元素并相应地采取下一个操作。

我希望这对你们有所帮助，任何帮助都会受到赞赏谢谢，
JC

Answer 1

for..in（通常）

for..in遍历对象属性的名称。人们认为它遍历数组的索引，因为数组的索引是数组对象上属性的名称，但这是一种误解。

所以：

var obj = {foo: 1, bar: 2};

foo和bar是属性的名称，因此：

var name;
for (name in obj) {
    alert(name);
}

...将显示“foo”和“bar”（无特定顺序）。

我们马上回到阵列。 :-)让我们先看一下对象。

对象可以拥有自己的属性，以及从原型对象继承的属性。上面的foo和bar属性是obj的直接属性，但是：

function Thing() {
}
Thing.prototype.foo = 1;

var t = new Thing();
t.bar = 2;

现在我们的t对象有foo和bar，但foo来自原型，而bar是其自己的财产。在for..in中，我们可以检查哪个是：

var name;
for (name in obj) {
    alert(name + "(" + (obj.hasOwnProperty(name) ? "own" : "inherited") + ")");
}

...将显示“foo（inherited）”和“bar（own）”（无特定顺序）。

对象还可以具有不可枚举的属性 - 它们不会显示在for..in循环中。这就是为什么如果对数组执行for..in，length属性不会显示，因为length被定义为非可枚举属性。标准对象上的几乎所有标准属性都是不可枚举的（包括所有指向函数的属性，如toUpperCase个实例上的String属性）。（过去只有规范中的那些可能是不可枚举的，但ECMAScript第5版现在为我们提供了拥有自己的不可枚举属性的方法。）

所以，数组。 Javascript中的数组与大多数其他语言中的数组完全不同。（一方面，它们不是连续的内存块。）Javascript中的数组是一个具有几个特殊行为的标准对象：

length属性始终设置为属性名称上方的下一个数字，具有数组对象具有的最高数值。因此，如果您的最高数组索引为2，则length将为3。
如果您更改length，则会从对象中删除名称的数字等于或高于您提供的数字length的任何属性。

那，他们从Array.prototype继承的函数几乎都是关于Javascript中数组的特殊功能。它们的所有主要功能（存储和检索值）都只是标准的Javascript对象属性行为。

您的特定循环

由于上述原因，我不会将for..in用于你的循环。我要么使用jQuery#each，要么像你一样使用无聊的老式循环。后者看起来像这样：

var allSelected = $("select option:selected");
var totalSelected = allSelected.length; // <= No need to repeat the selector query
var index;
var anySelected = false;
for (index = 0; !anySelected && index < totalSelected; ++index) {
    if (allSelected[index].value !== "0") {
        anySelected = true;
    }
}
if (anySelected) {
    // do something with the selection
}
else [
    // do something about their not having picked one
}

Answer 2

您应该知道JavaScript中的for-in语句是枚举对象属性。

如果您希望迭代覆盖类似数组的¹对象，则需要一个顺序循环（for，while，{{3} }）总是被推荐。

为什么不应该将for-in用于类似数组的对象：

无法保证迭代顺序
还枚举了继承的属性

另见：

do...while

_{[1] array-like 我的意思是任何包含顺序编号属性和length属性的对象。}

Answer 3

您的问题有两个方面。

使用“for ... in”仅循环遍历对象的属性名称， never 循环遍历数组（实数数组或更多或更多的东西）不像数组，比如jQuery对象。）
如果你正在使用jQuery，以这种方式做事是违反惯例的：

    $("select option:selected).each(function() {
      // .. "this" points to each option
    });

如果您想收集所有选择的所有设置，您可以迭代所有 <select>标记，过滤掉那些仅设置为“默认”值的标记，然后收集名称/值对数组中的所有值。

Answer 4

使用.each()

编写（我认为）您尝试实现的更简单的方法

// this is to know if we want to redirect
var redir = true;
$("select option:selected").each(function() {
  var val = $(this).val();

  if (val > 0) {
    alert('Found one!');
  }      
  if (val != 0) { 
    redir = false;
    // you can return false here if you want to stop processing the each loop too!
  } 
});

if (redir) {
  window.location = "/nextpage";
}

Answer 5

我会这样做

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">

  $(function()
  {
    function checkSelected()
    {
      var DEFAULT = "0";
      var selected = [];

      $("select option:selected").each( function()
      {
        var $option = $(this);
        var optionValue = $option.val(); 
        if ( optionValue !== DEFAULT )
        {
          selected.push( {name: $option.parent().attr( 'name' ), value: optionValue } );
        }
      });

      if ( selected.length )
      {
        $.each( selected, function( index, item )
        {
          alert( item.name + ': ' + item.value );        
        });
      } else {
        alert( 'None selected!' );
      }
    }

    // just for this demo
    $('button').click( function( event )
    {
      event.preventDefault();
      checkSelected();
    })
  });


  </script>
</head>

<body>

<select name="one">
  <option value="0">Zero</option>
  <option value="1">One</option>
</select>

<select name="two">
  <option value="0">Zero</option>
  <option value="1">One</option>
</select>

<button>Test It</button>

</body>
</html>

在javascript中正确使用“for ... in”循环？

5 个答案:

for..in（通常）

您的特定循环