文档章节

js遍历数组和遍历对象的区别(动态生成ul li)

leona_lily
 leona_lily
发布于 2015/04/07 10:17
字数 284
阅读 18
收藏 0

JavaScript:

<script>
    //----------------for用来遍历数组对象--
    var i,myArr = [1,2,3];
    for (var i = 0; i < myArr.length; i++) {
        console.log(i+":"+myArr[i]);
    };
    //---------for-in 用来遍历非数组对象
    var man ={hands:2,legs:2,heads:1};
    //为所有的对象添加clone方法,即给内置原型(object,Array,function)增加原型属性,该方法很强大,也很危险
    if(typeof Object.prototype.clone ==="undefined"){
        Object.prototype.clone = function(){};    
    }
    //    for(var i in man){
        if (man.hasOwnProperty(i)) { //filter,只输出man的私有属性
            console.log(i,":",man[i]);
        };
    }
    //输出结果为print hands:2,legs:2,heads:1

    for(var i in man) {//不使用过滤
        console.log(i,":",man[i]);
    }    
    //输出结果为
    //hands : 2 index.html:20
    //legs : 2 index.html:20
    //heads : 1 index.html:20
    //clone : function (){} 
    for(var i in man) {
        if(Object.prototype.hasOwnProperty.call(man,i)) { //过滤
            console.log(i,":",man[i]);
        }
    }

   //输出结果为print hands:2,legs:2,heads:1

</script>
html:

<htmL>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
    <script type="text/javascript">
    window.onload = function(){
        var arrLi = {我的朋友:['哇哈哈','乐百氏','农夫山泉'],同学:['咖啡','果汁','果酒']};
        var n = -1
        for(var i in arrLi){
            n++;
            document.body.innerHTML += '<ul>'+i+'</ul>';
            var ul = document.getElementsByTagName('ul');
            for (var j = 0; j < arrLi[i].length; j++) {
                ul[n].innerHTML += '<li>'+arrLi[i][j]+'</li>';
            };
        }
    }
    </script>
</head>
<body>

</body>
</htmL>



© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 99
码字总数 43341
作品 0
朝阳
程序员
私信 提问
jquery遍历之children()与find()的区别

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。 .find(selector)方法是返回匹配元素集合中每...

柒月-小妖精
2013/01/10
0
1
JavaScript(十八):DOM对象

一、 认识DOM DOM(Document Object Model,文档对象模型):定义访问和处理HTML文档的标准方法。DOM 将 HTML 文档呈现为带有 元素、属性和文本的树结构(节点树)。 先来看看下面代码: 将 ...

Agnes2017
10/11
0
0
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋

【基础】数组基本操作 数组的常见基本操作分为:赋值,查长度,添加push,删除delete,遍历for-in等。简单数组是一维的,但是实际工作中,数组总是与对象结合使用,叫:数组对象。 类型操作分...

柴高八斗之父
2017/08/29
0
0
今日份面试题整理2018-08-21

1.以下关于盒子模型描述正确的是:( ) A.标准盒子模型中:盒子的总宽度 = 左右margin + 左右border + 左右padding + width B.IE盒子模型中:盒子总宽度 = 左右margin + 左右border + wi...

littleyu
08/21
0
0
解读30个提高Web程序执行效率的好经验

  其实微博是个好东西,关注一些技术博主之后,你不用再逛好多论坛了,因为一些很好的文章微博会告诉你,最近看到酷勤网推荐的一篇文章《30个提 高Web程序执行效率的好经验》,文章写得不错...

幸福2胖纸
2013/09/30
0
1

没有更多内容

加载失败,请刷新页面

加载更多

移动端Appium自动化测试框架的优势

众所周知,现在市面上的移动端操作系统已被Android和IOS占领,其中Android的份额更是在80%以上。那么面对市面上林林总总的自动化测试框架和工具,为什么说Appium在自动化测试框架的统治级优势...

程序猿拿Q
3分钟前
0
0
设计模式 之 观察者模式

设计模式 之 观察者模式 场景 场景比较简单,当一个对象的状态发生改变时,自动通知所有依赖(或观察)它的对象。 比如:发布/订阅 原理:发布者存储N个订阅者的对象信息,当发布者发布消息时...

GMarshal
7分钟前
0
0
linux 常用

netstat -tunlp |grep 8080 查看8080 占用 netstat -tunlp 用于查看所有的端口号的进程情况

west_coast
11分钟前
1
0
Bytom信息上链教程

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 很多了解比原链的都知道,比原链是专注信息和数字资产在链上交互和流转的...

比原链Bytom
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部