数组循环全解

1. 在ES5中常用的10种数组遍历方法:

       1、for循环语句

  2、Array.prototype.forEach数组对象内置方法

  3、Array.prototype.map数组对象内置方法

  4、Array.prototype.filter数组对象内置方法

  5、Array.prototype.reduce数组对象内置方法

  6、Array.prototype.some数组对象内置方法

  7、Array.prototype.every数组对象内置方法

  8、Array.prototype.indexOf数组对象内置方法

  9、Array.prototype.lastIndexOf数组对象内置方法

  10、for...in循环语句

1. for:简洁明了,通俗易懂,可能需要多写点代码,多定义几个变量,但是为我所用,为我所爱。

「普通版」

let arr = [1, 2, 3, 4, 5];

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

  arr[i] = arr[i] * 2;

}

console.log(arr); //[2, 4, 6, 8, 10]


「加强版」

let arr = [1, 2, 3, 4, 5];

for(let i = 0; len = arr.length,i < len; i++) {

  arr[i] = arr[i] * 2;

}

console.log(arr); //[2, 4, 6, 8, 10]

2. forEach:接收两个参数,第一个参数是在每一项上运行的函数(拥有三个参数),第二个参数「可选的」是运行该函数的作用域对象(影响this的值),return不能中断函数继续执行,所以没有返回值,不能改变原数组,使用方便一般涌来代替for,但是没for性能高,而且有兼容性(IE6-8)。

let arr = [1, 2, 3, 4, 5];

arr.forEach((value, index, array) => {

  return value * 2;

});

console.log(arr); //[1, 2, 3, 4, 5]

3. map:基本用法和foreach相同,不同的是可以return返回值,但是不改变原数组,一般用来修改数组的值从而映射为一个新数组。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.map((value, index, array) => {

    return value * 2;

});

console.log(arrs); //[2, 4, 6, 8, 10]

4. filter:顾名思义是"过滤",就是去掉不想要的值,return true为想要的值,return false则为去掉的值,一般用来过滤一个数组,不改变原来的数组。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.filter((value, index, array) => {

  if (value > 2) {

    return true;

} else {

    return false;

  }

});

console.log(arrs); //[3, 4, 5]

5. reduce:可以实现一个累加器的功能,将数组的每个值(从左到右)累加起来,不同的是有四个参数,prev表示前两个值的和(没有定义初始值时为第一个值),next为后一个值。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.reduce((prev, next, index, array) => {

console.log(prev); // 1,3,6,10

console.log(next); // 2,3,4,5

  return prev + next;

});

console.log(arrs); //15

6. some:类似于filter,不同的是返回值为Boolean,不是筛选一个新的数组,而是筛选有没符合条件的值,只要有一个值满足即立刻返回true,不再继续执行,否则返回false。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.some((value, index, array) => {

  return value > 3;

});

console.log(arrs); // true

7. every:类似于some,不同的是找到符合条件的值会继续执行,如果每个值都满足条件才会返回true,否则就是false。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.every((value, index, array) => {

  return value > 3;

});

console.log(arrs); //false


let arr = [ 4, 5];

let arrs = arr.every((value, index, array) => {

  return value > 3;

});

console.log(arrs); //true

8. indexOf:数组中的这个方法和字符串中的几乎一样,都是找到一个满足条件的值就不继续执行了,返回值是满足条件值的下标,否则返回-1。

let arr = [1, 2, 3, 4, 5];

let arrs = arr.indexOf(2);

console.log(arrs); // 1

let arr = [1, 2, 3, 4, 5];

let arrs = arr.indexOf(6);

console.log(arrs); // -1

9. lastIndexOf:类似于indexOf,不同的是查找方向是从后向前。

let arr = [1, 2, 3, 4, 5, 1];

let arrs = arr.lastIndexOf(1);

console.log(arrs); // 5

let arr = [1, 2, 3, 4, 5, 1];

let arrs = arr.lastIndexOf(6);

console.log(arrs); // -1

10. for...in:主要用来遍历对象,其实数组的本质也是以key和value的键值对存在的,数组遍历的是下标,对象遍历的是key,一般用来遍历对象。

let arr = [1, 2, 3, 4, 5];

for(let i in arr) {

    console.log(i); // 0, 1, 2, 3, 4

}

let arr = {name: "lewis", age: 25};

for(let i in arr) {

    console.log(i); // name, age

}

2. 在ES6中常用的for...of数组遍历方法:

for...of: JavaScript 原有的for...in循环,只能获得对象的键名,不能直接获取键值。ES6 提供for...of循环,允许遍历获得键值,但是不能循环对象,一般用来循环数组。

let arr = [1, 2, 3, 4, 5];

for (let i in arr) {

  console.log(i); // 0, 1, 2, 3, 4

}

for (let i of arr) {

  console.log(i); // 1, 2, 3, 4, 5

}

接下来总结一下,一般的循环用for,for...in,for...of和forEach,需要映射为新数组的用map,需要筛选出想要的用filter,数值需要进行累加的用reduce,如果要找一些值用some和every,并且想知道值的具体位置的可以用indexOf和lastIndexOf,接下来就是对症下药,因地制宜了,相信你会熟练掌握并准确应用了

3. 常用的一般数组循环for,for...in,for...of和forEach/map性能对比:、


let arr = Array(100).fill(5);

console.time("for循环");

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

  arr[i] = arr[i] * 2;

}

console.timeEnd("for循环"); // for循环: 0.041ms


console.time("for...in循环");

for(let i in arr) {

  arr[i] = arr[i] * 2;

}

console.timeEnd("for...in循环"); // for...in循环: 0.126ms


console.time("for...of循环");

for(let i of arr) {

  arr[i] = arr[i] * 2;

}

console.timeEnd("for...of循环"); // for...of循环: 3532.695ms


console.time("forEach循环");

arr.forEach((value, index, arr) => {

  arr[index] = value * 2;

});

console.timeEnd("forEach循环"); // forEach循环: 0.103ms

console.time("map循环");

arr.map((value, index, arr) => {

  arr[index] = value * 2;

});

console.timeEnd("map循环"); //map循环: 0.086ms

经过多次对比取平均值可以明显的看到for循环比其他方法更快。

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

推荐阅读更多精彩内容