在javascript中正确使用"for ... in"循环?

jnk*_*ois 11 javascript

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

现在,我想得到一些关于如何正确利用JavaScript中的"for ... in"循环的指示,我已经做了一些研究并尝试了一些事情,但我仍然不清楚如何正确用它.

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

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

var allSelected = $("select option:selected");
var totalSelected = $("select option:selected").length;
Run Code Online (Sandbox Code Playgroud)

第一个变量生成所有选定选项的数组.第二个变量告诉我在表单中有多少选定的选项(选择标签可以多于一个,每次都会更改).现在,为了查看是否已选择任何内容,我遍历每个元素(选择的选项),并检索"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
  }
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,只要"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
  }
}
Run Code Online (Sandbox Code Playgroud)

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

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

T.J*_*der 20

for..in(一般)

for..in循环遍历对象属性的名称.人们认为它遍历数组的索引,因为数组的索引数组对象的属性的名称,但是这是一个误解.

所以:

var obj = {foo: 1, bar: 2};
Run Code Online (Sandbox Code Playgroud)

foo并且bar是属性的名称,因此:

var name;
for (name in obj) {
    alert(name);
}
Run Code Online (Sandbox Code Playgroud)

...将显示"foo"和"bar"(没有特别的顺序).

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

对象可以具有自己的属性,以及从原型对象继承的属性.以上foobar属性是直接属性obj,但是:

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

var t = new Thing();
t.bar = 2;
Run Code Online (Sandbox Code Playgroud)

现在,我们的t对象有foobar,而是foo来自于原型,而bar为自己的财产.在a中for..in,我们可以检查哪个是:

var name;
for (name in obj) {
    alert(name + "(" + (obj.hasOwnProperty(name) ? "own" : "inherited") + ")");
}
Run Code Online (Sandbox Code Playgroud)

...将显示"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
}
Run Code Online (Sandbox Code Playgroud)


CMS*_*CMS 5

您应该知道for-inJavaScript 中的语句是为了枚举对象属性.

当你要遍历一个数组类1个对象,顺序循环(for,while,do...while)始终建议.

为什么不应该使用for-in类似数组的对象:

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

也可以看看:

[1] 类似于数组,我指的是包含顺序编号属性和length属性的任何对象.


gna*_*arf 2

一种更简单的方法来编写(我认为的)您尝试使用的实现.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";
}
Run Code Online (Sandbox Code Playgroud)