常用数组遍历方法:

1、原始for循环

var a = [1,2,3];
for(var i=0;i<a.length;i++){
console.log(a[i]); //结果依次为1,2,3
}

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

var a = [1,2,3];
a.forEach(function(value,key,arr){
console.log(value) // 结果依次为1,2,3
console.log(key) // 结尾依次为0,1,2
console.log(arr) // 三次结果都为[1,2,3]
})

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

  map和forEach不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,并且最终会返回一个新的被改变过值之后的数组(map如果不用return就和forEach一样了),由于这个特性,map一般用来处理需要修改某一个数组的值。map和forEach在其他的方面都是一样的,也不能return结束循环等特性

var a = [1,2,3];
var b = a.map(function(value,key,arr){
console.log(value) // 结果依次为1,2,3
console.log(key) // 结尾依次为0,1,2
console.log(arr) // 三次结果都为[1,2,3]
return value+1;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 2, 3, 4 ]

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

  filter和map不同,map目的是为了改变值,而filter目的是为了去掉不要的值,在循环的时候如果返回的是false那么就表示本次循环的不添加该值,返回true则相反是表示要添加到新建的数组中

var a = [1, 2, 3];
var b = a.filter(function (value, key, arr) {
console.log(value) // 结果依次为1,2,3
console.log(key) // 结尾依次为0,1,2
console.log(arr) // 三次结果都为[1,2,3]
return value != 3; //return 为布尔表达式
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 1,2 ]

5、数组内置方法Array.prototype.some

  存在满足表达式的元素则返回true,不存在满足表达式的元素则返回false

var a = [1,2,3];
var b = a.some(function(value,key,arry){
console.log(value); // 结果依次为1,2
console.log(key); // 结果依次为0,1
console.log(arry); // 两次次结果都为[1,2,3]
return value===2;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为true

6、数组内置方法Array.prototype.every

  所有元素都满足表达式返回true,否则返回false

var a = [1,2,3];
var b = a.every(function(value,key,arry){
console.log(value); // 结果依次为1,2
console.log(key); // 结果依次为0,1
console.log(arry); // 两次次结果都为[1,2,3]
return value==2;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为false

7、数组内置方法Array.prototype.indexOf

var a = [1,2,3];
var b = a.indexOf(2);
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为1

数组内置方法Array.prototype.lastIndexOf

var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a); // 结果为[ 1, 2, 3, 1 ]
console.log(b); // 结果为3

9、循环语句for...in

  for...in遍历数组的时候是遍历数组的下标值,而在遍历对象的时候遍历的是key值,所以猜想,数组在JS中,本质上也是一个以键值对形式存在的对象

var a = [1,2,3];
for(var key in a){
console.log(key); //结果为依次为0,1,2
} var obj = {
a: 'aa',
b: 'bb',
c: 'cc'
};
for (var key in obj) {
console.log(key); //结果为依次为a,b,c
console.log(obj[key]); //结果为依次为aa,bb,cc
}

10、ES6循环for...of语句,只能循环数组,不能循环对象

var a = [1,2,3];
for(var value of a){
console.log(value) // 结果依次为1,2,3
}

11、数组内置方法Array.prototype.find

var ages = [3, 10, 18, 20];

function checkAdult(age) {
return age >= 18;
} function myFunction() {
console.log(ages.find(checkAdult)); // 结果为18
}

JS数组遍历方法的更多相关文章

  1. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  2. js数组遍历方法总结

    数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...

  3. JS数组遍历方法集合

    就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...

  4. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

  5. js数组遍历和对象遍历

    针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...

  6. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  7. 数组遍历方法forEach 和 map 的区别

    数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html

  8. js几种数组遍历方法.

    第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...

  9. 浅谈JS的数组遍历方法

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...

随机推荐

  1. 趣图:TCP 与 UDP 的差别

      趣图:程序猿和运维狗的工作日常…… 趣图:Java 和 PHP 之间的战斗

  2. Spring boot进阶-配置Controller、interceptor...

    1.配置SpringBootApplication(对spring boot来说这是最基本) package io.github.syske.springboot31; import org.spri ...

  3. 将php命令加入cenos环境变量

    0.修改/etc/profile文件使其永久性生效,并对所有系统用户生效,在文件末尾加上如下两行代码 1.PATH=$PATH:/usr/local/webserver/php/bin:/usr/lo ...

  4. [Swift实际操作]九、完整实例-(4)在项目中使用CocoaPod管理类库和插件

    本文将为你演示,如何使用CocoaPod第三方类库管理工具,在项目中安装未来需要使用的类库.首先创建一份文本文件.可以使用一个脚本创建文件,你可以采用自己的方式是创建一份文本文件,接着在文件名称上点击 ...

  5. Linux上安装Hadoop集群(CentOS7+hadoop-2.8.3)

    https://blog.csdn.net/pucao_cug/article/details/71698903 1下载hadoop 2安装3个虚拟机并实现ssh免密码登录 2.1安装3个机器 2.2 ...

  6. 八大排序算法的python实现(六)归并排序

    代码: #coding:utf-8 #author:徐卜灵 def merge(left,right): i,j = 0,0 result = [] while i < len(left) an ...

  7. linux系统安全及应用——端口扫描

    NMAP是一款强大的网络扫描安全监测工具,通过扫描网络中不需要的服务端口来关闭这些服务,提高安全性.官网是http://nmap.org/,linux安装光盘中自带软件nmap-5.51.3.el6. ...

  8. Python数组(二)

    一.函数list 可将任何序列(如字符串)作为list的参数.list实际上是一个类,而不是函数. test=['java','C#','C','C++'] print(list(test)) ——& ...

  9. Qt 学习之路 2(61):使用 SAX 处理 XML

    Qt 学习之路 2(61):使用 SAX 处理 XML  豆子  2013年8月13日  Qt 学习之路 2  没有评论 前面两章我们介绍了使用流和 DOM 的方式处理 XML 的相关内容,本章将介绍 ...

  10. 请设计实现一个商城系统开发v2.0【代码优化】

    #!/usr/bin/env python 优化的部分:1.改用字典取键,来调用函数[原来是用if-else判断] [补充]:也可以用列表,按索引取,可以在列表最前面加一个“”任意元素,凑成一个.就和 ...