javascript中的for in 和 in运算符

之前只知道有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

javascript对象运算符

  • in 判断左侧运算数是否为右侧运算数的成员
  • instanceof 判断对象是否属于某个类或构造函数
  • new 根据构造函数创建一个新的对象,并初始化该对象
  • delete 删除指定对象的属性,数组元素或变量
  • .及[] 存取对象和数组元素,如果把key赋值为变量var,只能用[var]
  • () 函数调用,改变运算符优先级等
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值