社区首页 >专栏 >javascript中的for in 和 in运算符

javascript中的for in 和 in运算符

空空云

发布于 2018-09-27 03:58:05

73200

代码可运行

文章被收录于专栏：大前端_Web大前端_Web

运行总次数：0

代码可运行

之前只知道有for in循环，不清楚in运算符。for in 和 in 遍历对象在原型上增加的属性也会遍历出来。 in运算符的规则：对运算符左右两个操作数的要求比较严格。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组、对象或者new生成的对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false。 for in 和in运算符的key在对象中是对象的属性，在Array中是数组的索引

for in

var obj = {
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
};
function enumeKey(){
    for(var key in obj ){
        console.log(key);
    }
}
enumeKey() //key1 key2 key3

数组的遍历无法保证顺序，尽量避免使用，for-in循环用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。所以最好数组使用正常的for循环(还可以使用ECMA-262 标准的for each)，对象使用for-in循环。

// 对象
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上的方法，好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。

for (var i in man) {
   if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
      console.log(i, ":", man[i]);
   }
}
//另外一种写法，方法变量缓存，jquery的大部分写法
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
    if (hasOwn.call(man, i)) { // 过滤
        console.log(i, ":", man[i]);
    }
}

javascript中in运算符

注意事项：

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

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

//对于数组属性需要指定数字形式的索引值来表示数组的属性名称（固有属性除外，如length）。

// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // returns true
3 in trees        // returns true
6 in trees        // returns false
"bay" in trees    // returns false (you must specify the index number,
                  // not the value at that index)
"length" in trees // returns true (length is an Array property)

//in的右边必须是一个对象，如：你可以指定一个用String构造器生成的，但是不能指定字符串直接量的形式：

var color1 = new String("green");
"length" in color1 // returns true
var color2 = "coral";
"length" in color2 // generates an error (color is not a String object)

//如果你使用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