您的位置:首页 > Web前端 > JavaScript

JS数组遍历方法

2018-02-01 19:42 323 查看

常用数组遍历方法:

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
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: