JavaScript中常见基础遍历问题

什么是遍历

遍历: 通俗来说就是把数组中的每个元素从头到尾都访问一次,并对每一元素或满足条件的某些元素进行操作(类似我们每天早上学生的点名,同时让谁谁谁去干些什么事情)。

今天我们来说一下基础的遍历问题

一般我们在js的基础学习中常会碰到到下面几种类型的数据

数组/字符串/对象

第一种利用for循环

最简单也是最清晰、也是代码量最大的,就是通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];

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

    console.log(arr[i]);

}

//red green blue


第二种就是For in

For in

在数组中

for(var i in arr)I 是下标

var arr = ['red','green', 'blue']

for(index in arr){

console.log(index)

}

//0 1 2


但在对象中for(var i in obj)这里的下标i是键名(字符串)

var obj = {name:xiaoming,age:18}

for(item in obj){

console.log(item)

}

//name age


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

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

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

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

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

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

for…in 无法遍历伪数组

下面是js获取的Dom对象伪数组使用for in遍历打印出的结果

第三种是ES6新增方法For…of

for(var v of arr)v 是属性值

for of并不能遍历对象

for of 特点

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

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

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

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

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

也不能遍历伪数组

下面是js获取的Dom对象伪数组使用for of遍历打印出的结果


深度总结一下:只要有 iterator 接口的数据结构,都可以使用 for of循环。

常见的有下面几种

数组 Array

Map结构

Set结构

String

arguments对象

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

有的时候我们想让对象可以使用 for of循环怎么办?

可以使用 Object.keys() 获取对象的 key值集合后,再使用 for of进行循环遍历操作

第四种map

.map(fun())映射‘遍历’ 有返回值

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。无法遍历伪数组

var numbers = [1, 2, 3];

var res = numbers.map(function (n) {

  return n + 1;

});

res// [2, 3, 4]

numbers

// [1, 2, 3]


上面代码中,numbers数组的所有成员依次执行参数函数,运行结果组成一个新数组返回,原数组没有变化。。

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

[1, 2, 3].map(function(value, index, arr) {

  return value* index;

});

// [0, 2, 6]


上面代码中,map方法的回调函数有三个参数,value为当前成员的值,index为当前成员的位置,arr为原数组([1, 2, 3])

第五种forEach

.forEach() 遍历 无返回值

forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。

这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法。

forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。

function log(value, index, array) {

  console.log('[' + index + '] = ' + value);

}

[2, 5, 9].forEach(log);

// [0] = 2

// [1] = 5

// [2] = 9


注意:

forEach方法无法中断执行,总是会将所有成员遍历完。如果希望符合某种条件时,就中断遍历,要使用for循环。

arr.forEach(function(value, index, arr) {

            if (arr[index] === 2) return;

            console.log(arr[index]);

        })

        //1 3


var arr = [1, 2, 3];

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

  if (arr[i] === 2) break;

  console.log(arr[i]);

}

//1


注意:

forEach虽然可以遍历伪数组 但是最好不要使用forEach去遍历伪数组

总结:

凡是部署了interator接口的数据格式,都能用for of来遍历

for of的出现,为了统一遍历的方式

真数组的遍历方式 for(var I in arr)\for(var v in arr)\for循环\while循环\map方法\forEach方法

对象的遍历方式 for(var I in obj) Object.keys()

伪数组的遍历方式最好使用for循环

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

推荐阅读更多精彩内容