我被告知不要使用。。。在JavaScript中使用数组。为什么不呢?
当前回答
for in语句本身并不是一个“坏习惯”,但是它可能被错误地使用,例如,用于迭代数组或类似数组的对象。
for-in语句的目的是枚举对象财产。该语句将出现在原型链中,也会枚举继承的财产,这有时是不需要的。
此外,规范并不能保证迭代的顺序,这意味着如果要“迭代”数组对象,那么使用此语句无法确保财产(数组索引)将按数字顺序访问。
例如,在JScript(IE<=8)中,即使在Array对象上,枚举的顺序也定义为创建了财产:
var array = [];
array[2] = 'c';
array[1] = 'b';
array[0] = 'a';
for (var p in array) {
//... p will be "2", "1" and "0" on IE
}
此外,谈到继承的财产,例如,如果您扩展Array.prototype对象(像MooTools这样的一些库),那么财产也会被枚举:
Array.prototype.last = function () { return this[this.length-1]; };
for (var p in []) { // an empty array
// last will be enumerated
}
正如我之前所说的,迭代数组或类似数组的对象,最好的方法是使用顺序循环,例如普通的旧for/while循环。
如果只想枚举对象自己的财产(未继承的属性),可以使用hasOwnProperty方法:
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
// prop is not inherited
}
}
有些人甚至建议直接从Object.prototype调用该方法,以避免在有人向我们的对象添加名为hasOwnProperty的属性时出现问题:
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
// prop is not inherited
}
}
其他回答
因为。。。in通过持有数组的对象枚举,而不是数组本身。如果我向数组原型链中添加了一个函数,那么它也将包含在内。即。
Array.prototype.myOwnFunction = function() { alert(this); }
a = new Array();
a[0] = 'foo';
a[1] = 'bar';
for(x in a){
document.write(x + ' = ' + a[x]);
}
这将写入:
0 = foo 1 = bar myOwnFunction = function() { alert(this); }
而且,由于您永远无法确定不会向原型链中添加任何内容,因此只需使用for循环来枚举数组:
for(i=0,x=a.length;i<x;i++){
document.write(i + ' = ' + a[i]);
}
这将写入:
0 = foo 1 = bar
正在使用。。。虽然我可以猜到为什么有人告诉你:
1.)已经有一个更高阶的函数或方法用于数组,但具有更多的功能和更精简的语法,称为“forEach”:array.protocol.forEach(函数(元素、索引、数组){});
2.)数组总是有长度的,但对于。。。in和forEach不会对任何“undefined”值执行函数,只对定义了值的索引执行函数。因此,如果只分配一个值,这些循环将只执行一次函数,但由于数组是枚举的,因此它的长度将始终达到具有定义值的最高索引,但在使用这些循环时,该长度可能会被忽略。
3.)循环的标准将执行函数的次数与您在参数中定义的次数相同,并且由于数组是编号的,因此定义您希望执行函数的数量更有意义。与其他循环不同,for循环可以为数组中的每个索引执行函数,无论是否定义了值。
本质上,您可以使用任何循环,但您应该记住它们是如何工作的。了解不同循环重复的条件及其各自的功能,并认识到它们或多或少适合不同的场景。
此外,使用forEach方法可能比使用for。。。一般来说,在循环中,因为它更容易编写并且具有更多的功能,所以您可能希望养成只使用此方法和标准的习惯,而不是使用您的调用。
请参见下面的内容,前两个循环只执行一次console.log语句,而标准for循环执行指定次数的函数,在本例中,array.length=6。
var arr = [];
arr[5] = 'F';
for (var index in arr) {
console.log(index);
console.log(arr[index]);
console.log(arr)
}
// 5
// 'F'
// => (6) [undefined x 5, 6]
arr.forEach(function(element, index, arr) {
console.log(index);
console.log(element);
console.log(arr);
});
// 5
// 'F'
// => Array (6) [undefined x 5, 6]
for (var index = 0; index < arr.length; index++) {
console.log(index);
console.log(arr[index]);
console.log(arr);
};
// 0
// undefined
// => Array (6) [undefined x 5, 6]
// 1
// undefined
// => Array (6) [undefined x 5, 6]
// 2
// undefined
// => Array (6) [undefined x 5, 6]
// 3
// undefined
// => Array (6) [undefined x 5, 6]
// 4
// undefined
// => Array (6) [undefined x 5, 6]
// 5
// 'F'
// => Array (6) [undefined x 5, 6]
因为如果你不小心的话,它会迭代属于原型链上对象的财产。
您可以使用。。在中,只需确保使用hasOwnProperty检查每个属性。
虽然这个问题没有特别提到,但我想补充一点,有一个很好的理由永远不要使用。。。在中使用NodeList(就像从querySelectorAll调用中获得的那样,因为它根本看不到返回的元素,而只在NodeListneneneba属性上迭代。
在单个结果的情况下,我得到:
var nodes = document.querySelectorAll(selector);
nodes
▶ NodeList [a._19eb]
for (node in nodes) {console.log(node)};
VM505:1 0
VM505:1 length
VM505:1 item
VM505:1 entries
VM505:1 forEach
VM505:1 keys
VM505:1 values
这解释了为什么我的for(节点中的节点)node.href=newLink;正在失败。
一个重要的方面是。。。in-only迭代包含在对象中的财产,该对象的可枚举属性属性设置为true。因此,如果尝试使用for对对象进行迭代。。。然后,如果任意财产的可枚举属性为false,则可能会丢失这些属性。很有可能更改普通Array对象的可枚举属性属性,以便不枚举某些元素。虽然一般来说,属性属性倾向于应用于对象中的函数财产。
可以通过以下方式检查财产的可枚举属性属性的值:
myobject.propertyIsEnumerable('myproperty')
或获取所有四个属性属性:
Object.getOwnPropertyDescriptor(myobject,'myproperty')
这是ECMAScript 5中提供的一个特性——在早期版本中,无法更改可枚举属性属性的值(它总是设置为true)。
推荐文章
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- Java 8流和数组操作
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?
- 在JS/jQuery中触发按键/按键/按键事件?