IT博客汇 | javaScript in操作符及for-in循环

javaScript in操作符及for-in循环

admin发表于 2015-09-01 09:37:13

for-in循环
功能：遍历对象属性，把属性名和属性值都提出来

var obj = {
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
};
function EnumaKey(){
    for(var key in obj ){
        alert(key);
    }
}
function EnumaVal(){
    for(var key in obj ){
        alert(obj[key]);
    }
}
EnumaKey(obj)
//key1 key2 key3
 
EnumaVal(obj)
//value1 value2 value3

数组也可以这样遍历，但不推荐，因为不能保证顺序，而且如果在Array的原型上添加了属性，这个属性也会被遍历出来。
for-in循环应该用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。
从技术上将，你可以使用for-in循环数组（因为JavaScript中数组也是对象），但这是不推荐的。因为如果数组对象已被自定义的功能增强，就可能发生逻辑错误。另外，在for-in中，属性列表的顺序（序列）是不能保证的。所以最好数组使用正常的for循环，对象使用for-in循环。
有个很重要的hasOwnProperty()方法，当遍历对象属性的时候可以过滤掉从原型链上下来的属性。
思考下面一段代码：

// 对象
var man = {
   hands: 2,
   legs: 2,
   heads: 1
};
 
// 在代码的某个地方
// 一个方法添加给了所有对象
if (typeof Object.prototype.clone === "undefined") {
   Object.prototype.clone = function () {};
}

在这个例子中，我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方，在对象原型上增加了一个很有用的名叫 clone()的方法。此原型链是实时的，这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法，你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤，会导致clone()函数显示出来，在大多数情况下这是不希望出现的。

// 1.
// for-in 循环
for (var i in man) {
   if (man.hasOwnProperty(i)) { // 过滤
      console.log(i, ":", man[i]);
   }
}
/* 控制台显示结果
hands : 2
legs : 2
heads : 1
*/
 
// 2.
// 反面例子:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
   console.log(i, ":", man[i]);
}
/*
控制台显示结果
hands : 2
legs : 2
heads : 1
clone: function()
*/

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样：

for (var i in man) {
   if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
      console.log(i, ":", man[i]);
   }
}

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法，你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
    if (hasOwn.call(man, i)) { // 过滤
        console.log(i, ":", man[i]);
    }
}

严格来说，不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度，你可以跳过它以提高些许的循环速度。但是当你对当前对象内容（和其原型链）不确定的时候，添加hasOwnProperty()更加保险些。

in操作符用来判断某个属性属于某个对象
可以是对象的直接属性，也可以是通过prototype继承的属性。

对于一般的对象属性需要用字符串指定属性的名称

var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // returns true
"model" in mycar // returns true

如果你使用delete操作符删除了一个属性，再次用in检查时，会返回false，如：

var mycar = {make: "Honda", model: "Accord", year: 1998};
delete mycar.make;
"make" in mycar;  // returns false
 
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
3 in trees; // returns false

如果你把一个属性值设为undefined，但是没有使用delete操作符，使用in检查，会返回true.

var mycar = {make: "Honda", model: "Accord", year: 1998};
mycar.make = undefined;
"make" in mycar;  // returns true
 
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
3 in trees; // returns true

参考：
http://www.cnblogs.com/onlywujun/p/3513451.html

Feed enhanced by Better Feed from Ozh