zoukankan      html  css  js  c++  java
  • Javascript 里的 in

      写js的时候需要遍历一个对象的属性,把属性名和属性值都提出来,之前没遇到这种需求,查了一下可以用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]);
        }
    }
    

    数组也可以这样遍历,但不推荐,因为不能保证顺序,而且如果在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()更加保险些。

    --------------------------------------------------------------------------------------------------------------------------------------------------------------

    javascript中in关键字还有下面的作用

    定义:

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

    注意事项:

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

    如:
    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
  • 相关阅读:
    如何实现浏览器内多个标签页之间的通信?
    vue组件库的基本开发步骤(源代码)
    vue组件库的基本开发步骤
    Websocket原理
    TCP和UDP的区别
    一句话概括 tcp三次握手
    简单说一下你对http和https的理解
    .Ajax(async异步与sync同步)
    get和post请求方式的区别
    面试易忽略状态码
  • 原文地址:https://www.cnblogs.com/onlywujun/p/3513451.html
Copyright © 2011-2022 走看看