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]; ...
随机推荐
- 第五篇 Python内置函数
内置函数 abs() delattr() hash() memoryview() set() all() dict() help() min() setattr() any() dir() ...
- 定时器timer类
timer类 Timer(定时器)是Thread的派生类,用于在指定时间后调用一个方法. 构造方法: Timer(interval, function, args=[], kwargs={}) in ...
- Java面向对象之关键字super 入门实例
一.基础概念 (一)super关键字 super关键字的用法和this相似.this代表的是当前对象.super代表的是父类中内存空间. 子父类中是不会出现同名属性的情况. (二)继承中.成员变量问题 ...
- 封装的一个sorted_vector示例,实现了stl::set的一部分接口
STL set能保证最坏情况下的查找和插入效率,logN.但是维护红黑树开销较大.set内的元素按照一定的逻辑顺序组织,查找.插入等操作的结果都和排序规则有关. 适合STL ...
- 【AT2434】JOI 公園 (JOI Park) 最短路+贪心
题解 我的歪解 我首先想的是分治,我想二分肯定不行,因为它是没有单调性的. 我想了一下感觉它的大部分数据应该是有凸性的(例如\(y=x^2\)的函数图像),所以可以三分. 下面是我的三分代码(骗了不少 ...
- Qt 学习之路 2(68):访问网络(4)
Home / Qt 学习之路 2 / Qt 学习之路 2(68):访问网络(4) Qt 学习之路 2(68):访问网络(4) 豆子 2013年11月7日 Qt 学习之路 2 19条评论 前面几章我们了 ...
- C++ 构造函数与默认构造函数
构造函数:C++用于构建类的新对象时需要调用的函数,该函数无返回类型!(注意:是“无”! 不是空!(void)). 默认构造函数:未提供显式初始值时,用来穿件对象的构造函数. 以上是二者的定义,但是单 ...
- 2018南京icpc现场赛心得
第一次参加icpc的比赛,也是第一块奖牌,虽然只是铜,但其实打的已经很好了,稍微差一点就可以摸银了. 之前参加省赛,成为那次比赛我校唯一一个没拿奖的队伍,其实还是一直都有一些心结的,而这段时间和新的队 ...
- vue的props和$emit / 父子组件通信
props 父级: 父级组件中引用子组件,并将自己data下面的giveChild数据绑定在 giveChildData 传给子 <myChild :giveChildData=" ...
- HDU1501 简单DP
dp[i][j]:用A的前i的字符和B的前j个字符能否组成i+j长度的合法C串 O(n^2)的方法有点糟糕 /*H E A D*/ char str1[maxn],str2[maxn],str3[ma ...