JavaScript 中 for 循环和 for-in 循环之间的区别
difference between for loop and for-in loop in javascript
我发现 javascript 中的 for loop 和 for-in 循环之间存在差异。
当我定义一个新数组时:
var a=new Array();
然后我输入一些值,但不是连续的,例如:
a[0]=0;a[1]=1;a[4]=4;
当我使用 for(i=0;i<5;i++)
获取值并使用警报显示它时,它与使用 for(i in a)
不同。
前一个将显示索引 2,3 中的元素,其中显示"未定义",而 for-in 将仅显示索引 0、1 和 4。谁能告诉我为什么?
for (... in ...)
通常用于遍历对象的属性(javaScript 用于关联数组的属性),而典型的 for
循环用于顺序数组。
在您的示例中,您实际上是在创建一个键为 0、1 和 4 的关联数组。 如果你想要一个真正的javaScript数组,你会使用a.push(0)
,a.push(1)
等。为了按顺序将值添加到数组的末尾。
对于顺序数组,语法for (var i = 0; i < arr.length; i++)
使从 0 到 1 的计数i
小于数组的长度。 这将允许i
逐个等于数组中的每个索引,从而允许您访问该数组中的每个元素。
但是,对于关联数组,键是非顺序的,因此使变量计数"从 0 到 1 小于数组长度"不会产生所需的结果。 在您的示例中,它接近工作,因为手动创建的键恰好是 0、1 和 4,它们几乎是顺序的。
如果你想拥有一个带有非顺序键的数组 - "非连续"如 0、1、4 等。--你可能应该使用对象,而不是数组,例如
var obj = {};
obj[0] = 0;
obj[1] = 1;
obj[4] = 4;
然后使用 for (... in ...)
循环将是正确的语法。
For 循环遍历它们,直到 i 达到 5,因此 i = 0,1,2,3,4,5 并遍历所有内容。但随着...In 循环不仅循环访问您定义的 0,1,4 不是 0 到 5 的属性。
来自 MDN:
注:为..in 不应用于迭代索引顺序很重要的数组。
数组索引只是具有整数名称的可枚举属性,在其他方面与常规 Object 属性相同。不能保证...in 将按任何特定顺序返回索引,并将返回所有可枚举属性,包括具有非整数名称的属性和继承的属性。
由于迭代顺序取决于实现,因此迭代数组可能不会以一致的顺序访问元素。因此,最好使用带有数字索引的 for 循环(或 Array.forEach 或 for...的循环),当迭代访问顺序很重要的数组时。
for-in 循环枚举变量的可枚举属性。对于数组,"0"、"1"和"4"将作为可枚举属性添加到数组上。因此,for-in 循环在 "i" 中只得到 0、1 和 4。
for 循环使用 i = 0 到 5。 因此,您尝试访问 2 和 3 处的值,这些值显然是未定义的。
语法
for (var k in obj)
实际上是一个 for-each 循环。它循环访问对象的属性。你应该熟悉 JavaScript 对象。对象是键到值的映射。
因此,for-each 循环对于对象非常有用。但是,在遍历数组时,最好使用常规的 for 循环。
下面是用于对象属性的 for-each 循环的示例:http://jsfiddle.net/nbtLpw0z/。
我正在使用for-in循环,因为它是一个较短的形式,但有时你可能希望控制迭代变量。例如,如果你想迭代偶数索引,你需要使用法线 for 循环:
for (var i = 0; i < myarray.length; i+=1) {...}
这同样适用,例如,如果要向后迭代:
for (var i = myarray.length-1; i >= 0; i--) {...}
当然,对于对象,for-in 循环允许您在迭代变量中获取属性名称。
var obj = {year: 2014, city: "Surat"}
for (var propn in obj) alert(propn + " = " + obj[propn]);
在您的示例中,我会使用 for-in,因为您正在执行简单的迭代。此外,我认为在未优化的 Javascript 编译器/解释器中,for-in 循环会更快,因为变量增量是在内部完成的。
对于初学者来说,在数组上使用for in
循环是没有意义的,因为JavaScript中的数组只能有有序的数字索引。因此,您可以在 0
范围和array.length - 1
之间的任何索引处访问数组 唉,如果你想使用 for in 循环来迭代数组,你当然可以,但是,常规的 for 循环更合适。
当您没有有序的数字索引时,将使用for in
循环。JavaScript 对象实际上是一个有序哈希表。您可以使用返回对象键的 in
运算符访问 JavaScript 对象的键,并且通过访问该键处的对象,您可以获取值。
例如:
var obj = {
hello: "world",
world: "hello"
};
常规的 for 循环不起作用,因此您需要使用 for in
循环。
for(var i in obj) console.log(obj[i]);
对象也不会返回足够精确以迭代整个对象的 length 属性,因此 for in
循环是绝对必要的。
另请注意,通过将值分配给数组,而不是按照下一个自由元素存在的顺序分配值,将自动将undefined
放入您跳过的元素中。
在您的示例中,数组如下所示:
[0, 1, undefined × 2, 4]
for-each
循环遍历对象属性,而for
循环用于数组。在您的情况下,您可以使用push()
来获得相同的结果。
var a = []; //recommended way of declaring arrays over `new Arrays()`
a.push(0);
a.push(1);
a.push(4);
//usual for-loop
for (var i = 0; a.length > i; i++) //recommended
console.log('a[', i, ']=', a[i]);
console.log('---------------------');
// for-each loop
for (var k in a) //not recommended
console.log('a[', k, ']=', a[k]);
console.log('---------------------');
Open console...
var person = {
'name': 'Adam'
};
for (var k in person)
console.log('person.' + k, '=', person[k]);
console.log('----------------------');
person.age = 26; //new property
for (var k in person)
console.log('person.' + k, '=', person[k]);
console.log('----------------------');
person['gender'] = 'Male'; //again a new property
for (var k in person)
console.log('person.' + k, '=', person[k]);
console.log('----------------------');
person.name = 'Will'; //updating property
for (var k in person)
console.log('person.' + k, '=', person[k]);
console.log('----------------------');
Open console...
在引擎盖下,for-in循环只不过是一个for循环。对于 (x 中的 i) 分解为 -
for(i=0;i<x.length;i++) {
if(x[i] != undefined)
console.log(x[i]);
}
读过并听到了正常的 for 循环:for(var i = 0; i < arr.length; i++)
更快。但我会说使用for of
:
var arr = [1,2,3], obj = {x: 1, y:2};
for(var value of arr) console.log(value) // 1, 2, 3
for(var key in obj) console.log(key) // x, y
for(var key of Object.keys(obj)) console.log(key) // x, y
您可以使用Object.keys(obj)
将对象的键转换为数组并对其调用Array.prototype
方法
你的 "for" 循环查看数组索引的所有值,因为这正是你要求它做的。因此,它查看 a[0] 并找到一个值,然后是 a[1](相同的交易),然后它转到 a[2] 并意识到您从未初始化过 a[2] 的值,因此它是未定义的。a[3] 也是如此,最后 a[4] 有一个值,所以它找到了它。
这种类型的"for"循环将检查每个索引是否定义。
一个"为...在..."循环将仅检查初始化的值。您的数组有 3 个已初始化的值,因此它会检查这些值。它将按索引顺序向您显示它们,但索引实际上不会影响它正在查看的内容。因此,如果您将"a[1]"更改为"a[3]",将"a[4]"更改为"a[10]",则当您使用"for ...在..."圈。
- 定时循环,使用Javascript在2个循环之间间隔x秒
- Javascript”;对于循环“;i-5和i=-5之间的差异
- 在不同数据选项之间循环迭代对象
- jquery .each 循环来执行每个数组项,它们之间有延迟
- 第一个元素和最后一个元素之间的连续循环
- 在帖子的网格循环之间插入Javascript(Adsense)
- foreach循环每次迭代之间的延迟
- 我如何向这个脚本添加一个点击按钮循环URL函数(按给定顺序在URL之间切换),或者这可能吗
- 在javascript for循环的迭代之间应用延迟
- 如何在数组中循环,等待每个项目之间的时间
- JavaScript中的嵌入循环和嵌套循环之间有区别吗
- 循环字符串以查找字符集之间的文本
- JavaScript 中 for 循环和 for-in 循环之间的区别
- [0]和getElementsByClassName上所有循环之间的中间地带
- Chrome浏览器事件循环与节点事件循环之间是否存在显著差异
- 这两个 for 循环之间的区别
- 如何添加在animate.css中编码的css动画循环之间的间隔
- 如何使jQuery的每个循环之间的延迟.每个函数
- 为什么复杂循环和多循环之间会有如此巨大的性能差异?
- 谁能解释一下这两个循环之间的区别