最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

跟我学习javascript的for循环和for...in循环_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:45:49
文档

跟我学习javascript的for循环和for...in循环_javascript技巧

跟我学习javascript的for循环和for...in循环_javascript技巧:大家都知道在JavaScript中提供了两种方式迭代对象: for 循环; for..in循环; 一、for循环 不足: 在于每次循环的时候数组的长度都要去获取; 终止条件要明确; 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTML
推荐度:
导读跟我学习javascript的for循环和for...in循环_javascript技巧:大家都知道在JavaScript中提供了两种方式迭代对象: for 循环; for..in循环; 一、for循环 不足: 在于每次循环的时候数组的长度都要去获取; 终止条件要明确; 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTML


大家都知道在JavaScript中提供了两种方式迭代对象:

  • for 循环;
  • for..in循环;
  • 一、for循环

    不足:

    在于每次循环的时候数组的长度都要去获取;
    终止条件要明确;
    在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下:

    这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码性能,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。

    HTMLCollections指的是DOM方法返回的对象,例如:

    document.getElementsByName()
    document.getElementsByClassName()
    document.getElementsByTagName()

    还有其他一些HTMLCollections,这些是在DOM标准之前引进并且现在还在使用的。有:

    document.images: 页面上所有的图片元素
    document.links : 所有a标签元素
    document.forms : 所有表单
    document.forms[0].elements : 页面上第一个表单中的所有域

    集合的麻烦在于它们实时查询基本文档(HTML页面)。这意味着每次你访问任何集合的长度,你要实时查询DOM,而DOM操作一般都是比较昂贵的。

    这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的:

    这样,在这个循环过程中,你只检索了一次长度值。

    在所有浏览器下,循环获取内容时缓存HTMLCollections的长度是更快的,2倍(Safari3)到190倍(IE7)之间。//此数据貌似很老

    注意到,当你明确想要修改循环中的集合的时候(例如,添加更多的DOM元素),你可能更喜欢长度更新而不是常量。

    伴随着单var形式,你可以把变量从循环中提出来,就像下面这样:

    这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把i和max引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。

    最后一个需要对循环进行调整的是使用下面表达式之一来替换i++。

    i = i + 1
    i += 1
    

    JSLint提示您这样做,原因是++和–-促进了“过分棘手(excessive trickiness)”。如果你直接无视它,JSLint的plusplus选项会是false(默认是default)。

    两种变化的形式:

  • 少了一个变量(无max)
  • 向下数到0,通常更快,因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率01
  • 这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。

    二、for …in 循环—也被称为“枚举”

    for …in 循环经常用来迭代对象的属性或数组的每个元素,for…in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引。 下面直接上几个例子:

    当遍历一个对象的时候,变量 i 也就是循环计数器 为 对象的属性名 :

    执行结果为:

    name

    age

    address

    当遍历一个数组的时候,变量 i 也就是循环计数器 为 当前数组元素的索引 :

    执行结果:

    0

    1

    2

    但是,现在看来for .. in循环还挺好用啊,不过,别高兴太早,看看下面的例子:

    运行结果:

    admin

    manager

    db

    zhangsan
    咦,奇观了,怎么平白无故的冒出来一个zhangsan
    现在,再看看使用 for循环会怎样?

    vararray = ["admin","manager","db"]; 
    //给Array的原型添加一个name属性 
    Array.prototype.name = "zhangsan"; 
    for(var i =0 ; i
    
    

    运行结果:

    admin

    manager

    db
    哦, 现在明白了,for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。

    运行结果:

    admin

    manager

    db
    另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样:

    其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

    严格来说,不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度,你可以跳过它以提高些许的循环速度。但是当你对当前对象内容(和其原型链)不确定的时候,添加hasOwnProperty()更加保险些。

    格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么):

    文档

    跟我学习javascript的for循环和for...in循环_javascript技巧

    跟我学习javascript的for循环和for...in循环_javascript技巧:大家都知道在JavaScript中提供了两种方式迭代对象: for 循环; for..in循环; 一、for循环 不足: 在于每次循环的时候数组的长度都要去获取; 终止条件要明确; 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTML
    推荐度:
    标签: 技巧 in 循环
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top