zoukankan      html  css  js  c++  java
  • 【记】Javascript遍历对象属性的方法

        遍历对象中的每一个属性,实例是遍历HTML5中的canvas.getContext('2d')的方法并列出了相应方法或属性的名称和类型。同时,代码中包含了属性排序,便于查找。鉴于目前HTML5没有成为标准,因此各个浏览器之间存在一些差异。可以通过这个方法得到所有属性,然后分别到网上去查具体做什么的。比较方便也比较直观

    <html>
    <head>
    <title></title>
    </head>
    <body>
    <audio controls="controls" id="aac">   
        <source src="test.mp3">   
    </audio>
    <canvas id="myCanvas" width="20" height="10"></canvas>
    <script type="text/javascript">
    /*
    function a(myObject){
        document.write("<br>");
        var t=new Array();
        for (prop in myObject)
        {
            alert(prop);
            document.write("属性 '" + prop + "' 为 " + myObject[prop]);
            document.write("<br>");
        }
    }
    */
    function getMethod(obj){
        
    var resultArr=new Array();
        
    for(p in obj){
            
    var tempArr={};
            tempArr.name
    =p;
            tempArr.type
    =typeof(obj[p]);
            resultArr.push(tempArr);
        }
        resultArr
    =sortA(resultArr);
        
    return resultArr;
    }
    function sortA(arr){
        
    for(var i=0;i<arr.length;i++){
            
    for(var j=i;j<arr.length;j++){
                
    if(arr[i].name>arr[j].name){
                    
    var temp=arr[i];
                    arr[i]
    =arr[j];
                    arr[j]
    =temp;
                }
            }
        }
        
    return arr;
    }
    function print(arr){
        document.write(
    '<table border="1"><tr><th>name</th><th>type</th></tr>');
        
    for(var i=0;i<arr.length;i++){
            document.write(
    "<tr>")
            document.write(
    "<td>"+arr[i].name+"</td><td>"+arr[i].type+"</td>");
            document.write(
    "</tr>");
        }
        document.write(
    "</table>")
    }
    //print(getMethod(document.getElementById('myCanvas')));
    print(getMethod(document.getElementById('myCanvas').getContext("2d")));
    //getMethod(document.getElementById('aac'));
    </script>
    </body>

    </html> 

    getMethod方法是遍历一个对象所有属性的方法,sortA对所有属性进行了排序并通过print显示。在代码中的注释掉的print方法是显示其他对象的属性。

    上面的代码在Chromes上的结果,可以看到所有的属性呦


  • 相关阅读:
    Qt 处理相机图像实时显示引入队列,防止数据读写冲突导致卡顿、崩溃
    OpenCV -- ffmpeg 视频输入输出VideoCapture和VideoWriter的使用
    OpenCV -- 伪彩 applyColorMap
    C++中内存拷贝函数(C++ memcpy)//深拷贝 浅拷贝
    逻辑运算符&&和&的区别、| 和 || 的区别
    openCV -- namedWindow( )函数用法总结
    var a="" 与a=" ",的区别;
    创建Node.js应用
    JS数值精度函数
    js字符串截取函数slice()、sunstring()、substr()
  • 原文地址:https://www.cnblogs.com/echoloyuk/p/2336866.html
Copyright © 2011-2022 走看看