常用数组遍历方法:

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. 生成HTML测试报告

    HTMLTestRunner是Python标准库unittest单元测试框架的一个扩展,可以生成易于使用的HTML测试报告,这个扩展很简单,只有一个HTMLTestRunner.py,下载地址:htt ...

  2. [51nod]1229 序列求和 V2(数学+拉格朗日差值)

    题面 传送门 题解 这种颓柿子的题我可能死活做不出来-- 首先\(r=0\)--算了不说了,\(r=1\)就是个裸的自然数幂次和直接爱怎么搞怎么搞了,所以以下都假设\(r>1\) 设 \[s_p ...

  3. HTML的相关路径与绝对路径的问题---通过网络搜索整理

    问题描述:    在webroot中有个index.jsp 在index.jsp中写个表单. 现在在webroot中有个sub文件夹,sub文件夹中有个submit.jsp想得到index.jsp表单 ...

  4. linux 下PATH环境变量

    环境变量简介 什么是环境变量呢?简要的说,就是指定一个目录,运行软件的时候,相关的程序将会按照该目录寻找相关文件. 在linux系统下,如果你下载并安装了应用程序,很有可能在键入它的名称时出现&quo ...

  5. Flask之flask-script 指定端口

    简介 Flask-Scropt插件为在Flask里编写额外的脚本提供了支持.这包括运行一个开发服务器,一个定制的Python命令行,用于执行初始化数据库.定时任务和其他属于web应用之外的命令行任务的 ...

  6. vue控制父子组件渲染顺序

    在父组件中,如下图渲染子组件,那如何在父组件中加入一些数据获取逻辑且能控制子组件渲染呢. 就是像在上图中红框圈起来的那样,挂个 ok(其他你自己定义的也可以) 参数,同时在父组件的任何生命周期中去改变 ...

  7. vim大法

    $Linux vi/vim编辑器常用命令与用法总结 (一)vi/vim是什么?Linux世界几乎所有的配置文件都是以纯文本形式存在的,而在所有的Linux发行版系统上都有vi编辑器,因此利用简单的文字 ...

  8. Android应用中添加Log4j的示例

    [2016-06-30]最新的log4j已经集成在DR_support_lib库中 具体请看: https://coding.net/u/wrcold520/p/DR_support_lib/git/ ...

  9. jdk8涉及到的接口、类及方法

    bi是binary的简写,二元的,表示两个参数 unary,一元的,表示一个参数 1.函数式接口Supplier T get(),不接收参数,有返回值 IntSupplier,int getAsInt ...

  10. html5使用local storage存储的数据在本地是以何种形式保存的

    html5使用local storage存储的数据是如何保存在本地的?(我使用的是chrome浏览器,chrom浏览器是用sqlite来保存本地数据的) Html5 的local storage 是通 ...