JS数组遍历方法
常用数组遍历方法:
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数组遍历方法的更多相关文章
- 浅谈6种JS数组遍历方法的区别
本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- js数组遍历方法总结
数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...
- JS数组遍历方法集合
就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
- js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...
- ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)
目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...
- 数组遍历方法forEach 和 map 的区别
数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html
- js几种数组遍历方法.
第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...
- 浅谈JS的数组遍历方法
用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...
随机推荐
- 采样器----Debug Sampler
Debug Sampler可以产生所有JMeter变量和属性的样本,可以在View Tree Result的响应中查看变量的值,此取样器在调试脚本阶段可以很方便的看到变量的值,在正式运行脚本的过程中应 ...
- The method identifyUser(Arrays.asList("group001"), String, new HashMap<>()) is undefined for the type AipFace
在使用百度云的人脸识别sdk时遇到了这个错误,网上百度不到解决的方法,当我浏览百度云的时候发现了这个 于是考虑到版本可能更新,出现了新的函数代替旧的函数,于是去查文档,文档链接如下 https://c ...
- EF进阶篇(二)——CRUD
前言 不写前言了... 内容 我们都知道我们修改的实体状态添加到上下文里面,然后上下文根据实体状态生成相应的SQL执行脚本,去隐式执行到数据库中.(屏幕前的你暂且这样理解吧,因为小编语文没有学好,太通 ...
- 魔方方法之--类的构造(__init__,__new__)和析构(__del__)方法
构造方法(参见小甲鱼入门教程) __ init__()方法:类的初始化方法,初始化类对象时被调用,需要的时候再调用它 注意点:这个方法的返回值必须是None class Rectangle(): de ...
- OEL6.8安装虚拟带库模拟器
最近在虚拟机下搭建了一个OSB备份环境,其中使用到了虚拟带库,以下是虚拟带库的配置过程,简要记录之. 1.下载虚拟带库的源码(mhvtl-2016-03-10.tgz). 2.解压缩源码. # cd ...
- Qt 学习之路 2(76):QML 和 QtQuick 2
Home / Qt 学习之路 2 / Qt 学习之路 2(76):QML 和 QtQuick 2 Qt 学习之路 2(76):QML 和 QtQuick 2 豆子 2013年12月18日 Qt ...
- day44--浮动和清浮动基本小结
浮动和清浮动 一:浮动 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普 ...
- Moving docker images location to different partition
By default docker will put all the data including images under /var/lib/docker(At least on Debian). ...
- 动态规划 70.climbing Stairs
1. 记忆化搜索 - 自上向下的解决问题:使用vector来保存每次计算的结果,如果下次再碰到同样的需要计算的式子就不需要重复计算了. 2. 动态规划 - 自下向上的解决问题 解法一:自顶向下 解法二 ...
- 计算hashCode通用计算公式
1.java计算公式 @Override public int hashCode() { //设置初始值 ; //假设有效域为: name,age,idCardNo,incomeAnnual,sex, ...