常用数组遍历方法:

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. django使用auth模块进行身份认证

    https://docs.djangoproject.com/zh-hans/2.0/topics/auth/default/#authentication-in-web-requests djang ...

  2. Google的C++代码规范

      英文版:http://google-styleguide.googlecode.com/svn/trunk/cppguide.xml 中文版:http://zh-google-styleguide ...

  3. python—Celery异步分布式

    python—Celery异步分布式 Celery  是一个python开发的异步分布式任务调度模块,是一个消息传输的中间件,可以理解为一个邮箱,每当应用程序调用celery的异步任务时,会向brok ...

  4. 在Delphi中获取和修改文件的时间

    转载自 http://www.cnblogs.com/jieke/archive/2013/01/11/2855782.html 本文介绍了在Delphi中利用系统函数和Windows API函数调用 ...

  5. C语言中静态断言的使用

    编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作异常处理的高级形式,用于代码调试. #define _CRT_SECURE_NO_WARNINGS //关闭安全监察 ...

  6. python3+Django1.11+mysql5.7 MySQL DB API Drivers

    The Python Database API is described in PEP 249. MySQL has three prominent drivers that implement th ...

  7. centos 安装搜狗

    原文:https://www.cnblogs.com/blueherb/p/9521827.html 1.通过centos的搜狐到百度下载linux fo sougou 注:找到下载路径(定义为A) ...

  8. php Apache No input file

    RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 变为 RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]

  9. Android配置横屏资源与Activity生命周期

    屏幕旋转会改变设备配置(device configguration).设备设置的特征有:屏幕方向.屏幕像素密度.屏幕尺寸.键盘类型.底座模式以及语言等.    当屏幕发现旋转时(设备配置更改),And ...

  10. vue项目用webpack打包后跨域问题

    在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...