zoukankan      html  css  js  c++  java
  • JavaScript奇技淫巧之遍历数组

    正常的for循环就不提了,直接进入正题。如下:

    //示例1
    for(var i=0,a;a=["jack","tom","lily","andy"][i++];){
    	console.log(a);
    }
    //示例2
    var ary = ["jack","tom","lily","andy"];
    for(var i=0,a;a=ary[i++];){
    	console.log(a);
    }
    

    从Firebug控制台能看到依次输出jack ,tom ,lily ,andy。这里有个问题,示例1不知是否会每次都产生一个数组对象实例,如果是,数组很大时可能会有性能问题。


    这个技巧关键是这句

    a = ary[i++];

    JS中数组实际上也是一个普通的Object。属于索引数组且并非“连续分配”内存的,因此索引方法并不会带来很高的效率。
    索引数组、关联数组和静态数组、动态数组

    中括号[i++]依然是一个普通对象取属性操作而已,试试看

    var ary = ["jack","tom","lily","andy"];
    for(var a in ary) {
        console.log(a);
    }

    Firebug控制台输出0,1,2,3。证明了0,1,2,3的确是数组ary的属性。

    既然是ary的属性,那么是否可以通过点运算符(.)来存取呢?试试看

    for(var j=0;j<ary.length;j++) {
       console.log(ary.j);//undefined
    }
    


    为什么示例1,2中用中括号[]存取就可以了呢?因为中括号ary[0],ary[1],ary[2],ary[3]里的0,1,2,3是字符串类型的。如下:

    for(var atr in ary) {
    	console.log(atr + ":" + typeof atr);
    }

    输出如下:
    0:string
    1:string
    2:string
    3:string

    鲜为人知的是用中括号[]存取时,JS引擎内部隐式的将数字转成了字符串。 而作为[]存取时属性可以不遵循JS标识符规则(纯数字不能作为变量命名)。如

    var obj = {};
    obj.11 = 11; // 非法
    obj['11'] = 11; // 合法
    

     

    警示:这个for循环的缺陷是当数组元素是null,undefined,0,false等时会造成循环终止。要很清楚了解数组内存放的元素,否则会埋下BUG的伏笔


    相关:

    变量声明时命名与变量作为对象属性时命名区别

  • 相关阅读:
    关于影像颜色替换
    DevExpress TreeList控件的复选框
    深刻理解Vue中的组件
    【Vue】组件的基础与组件间通信
    vue语法糖
    vue中prop传值时加不加v-bind(冒号:)
    Vue从入门到实战
    vue-router实现原理
    Vue学习笔记——Vue-router
    Vue-router 学习笔记
  • 原文地址:https://www.cnblogs.com/snandy/p/1970502.html
Copyright © 2011-2022 走看看