for,forEach数组字符串 / 对象键名for...in / 对象取值for...of / 循环里用this / 函数不可以用i要自定义索引 / break打破 / continue持续

for循环

        最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组


for ( 初始值 ; 结束条件 ; 循环变化值或自增 ) { 执行语句 };

        初始值-->判断-->执行语句-->循环变化值-->判断-->执行语句-->判断-->跳出循环

        for(var i = 0; i < *.length; i++){

                用this代表触发当前事件的元素

        }


for里用了一个函数,里面可以用i

        for(var i=0;i<aInput.length;i++){

                aInput[i].index=i;        //这里的i并没有放在函数里所以可以是递增的数值

        aInput[i].onclick=function(){

                this.value=this.index;        //这里是事先赋值的i值所以这里并不影响使用

        }

}

        想建立“匹配”"对应"关系,就用索引值


forEach

        从ES5开始 Javascript内置了forEach方法 用来遍历数组,foreach 方法没办法使用 break 语句跳出循环,或者使用return从函数体内返回

arr.forEach(function(ele,index,arr){    },thisValue)

        对数组中的每一个元素,执行一次提供的函数

         - callback(ele)  函数

                    - ele :循环过程中的每一位元素

                    - index: 当前循环的元素对应的下标值

                    - arr : 调用forEach的当前数组

          - thisArg: 控制当前callback中的this指向(一般写document)

                            该方法返回值是undefined


for...in循环

        for(var key in obj){ }

        对象obj,for获取不到长度和内容,需要用for...in循环

        循环设计之初,是给普通以字符串的值为key的对象使用的。而非数组,for - in也可用来循环数组,但一般并不推荐

        1.index 值 会是字符串(String)类型

        2.循环不仅会遍历数组元素,还会遍历任意其他自定义添加的属性,如,objArr上面包含自定义属性,objArr.name,那这次循环中

           也会出现此name属性

        var obj ={x:20,y:30,z:40}       //   对象

            for(var v in obj){               // 声明一个key变量用于代表obj里的key,名字随便起,var key in obj是整句

                    console.log(v)               // 0 1 2   length 

                    console.log(obj[v])         //  20  30  40

        }


        var arr = [10,20,30,40]         //   数组,一般建议for循环

            for(var v in arr){         

                    console.log(v)               // 0 1 2 3  length      

                    console.log(arr[v])         //  10 20  30  40

        }


for...of循环

        1.可以避免所有 for-in 循环的陷阱

        2.不同于 forEach(),可以使用 break, continue 和 return

        3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象

        4.它也支持字符串的遍历

        5.for-of 并不适用于处理原有的原生对象

                    for...in:以原始插入的顺序迭代对象的可枚举属性

                    for...of:根据迭代对象的迭代器具体实现迭代对象数据

        但是可以循环一个拥有enumerable属性的对象。


for in 和 for of的区别

循环对象
循环数组


给数组添加属性

for in 的特点

        结合上面的两个例子,分析得出:

        for ... in 循环返回的值都是数据结构的键值名

        遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。

        for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如——例3

        特别情况下, for ... in 循环会以任意的顺序遍历键名

                总结一句:for in循环特别适合遍历对象

for of 特点

        for of 循环用来获取一对键值对中的值,而 for in 获取的是键名

        一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。

        例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable

                for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

        提供了遍历所有数据结构的统一接口

哪些数据结构部署了 Symbol.iteratoer属性了呢?

        只要有 iterator 接口的数据结构,都可以使用 for of循环。

                数组 Array

                Map

                Set

                String

                arguments对象

                Nodelist对象, 就是获取的dom列表集合

        以上这些都可以直接使用 for of 循环。 凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(...)、和解构赋值等操作。

        我也想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of


break 打破

        终止当前循环,包括break之后的代码也会被停止运行,并跳出循环

        for双循环加break,不能停止双循环



continue  持续

        终止当前循环,包括continue之后的代码也会被停止,但不是跳出循环,循环会在之后,继续执行


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,961评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,444评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,009评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,082评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,101评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,271评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,738评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,395评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,539评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,160评论 3 317
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,749评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1 256
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2 341

推荐阅读更多精彩内容