js数组遍历的方法

第一种:

for循环 :

var arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

这种方法每循环一次就必须检查一下数组长度,所以我们可以对其进行优化一下。

var arr = ["a", "b", "c"];
var length = arr.length;
for (var i = 0; i < length; i++) {
    console.log(arr[i]);
}

这样就可以减少读取长度的时间,但是如果不用判断终止条件,就会变得更快了

var arr = ["a", "b", "c"];
var i = arr.length;
while(i--){
    console.log(arr[i]);
}

第二种:

for-in 循环:

var arr = ["a", "b", "c"];
var arr1 = {
    name : 'ly',
    age : 20,
};
for (var obj in arr1) {
    console.log(arr1[obj]);
    console.log(obj);
}
for (var i in arr) {
    console.log(arr[i]);
    console.log(i);
}

里面的obj实际上就是name,age,i就为arr的索引值,对应于arr的下标。for-in 需要分析出arr1 的每个属性,这个操作性能开销很大。用在 key 已知的数组上是非常不划算的。所以尽量不要用 for-in,除非你不清楚要处理哪些属性,例如 JSON 对象这样的情况。

第三种:

forEach:数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱

var arr = ["a", "b", "c"];
arr.forEach(
    function demo(item,count) {
        console.log(item + " " + count);
    }
);

forEach 无法遍历对象;
forEach 无法使用 break,continue 跳出循环,且使用 return 是跳过本次循环;
可以添加第二个参数,为一个数组,回调中的 this 会指向这个数组,若没有添加,则是指向 window;

forEach变种:由于foreach是Array型自带的,对于一些非这种类型的,无法直接使用(如NodeList),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。

Array.prototype.forEach.call(arr,function(el){  

});

第四种:

for-of:先说一下for-in和for-of的区别。
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。Map,set–无下标,无法使用索引进行遍历
为了统一集合类型,ES6标准引入了新的iterable类型,
Array、Map和Set都属于iterable类型。
==具有iterable类型的集合可以通过新的for … of循环来遍历。==
一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。for in 遍历数组时会为把数组索引作为键值。

var arr = [1,2,3,4];
arr.value = "val";
for(var i in arr){
    console.log(i+" "+arr[i]);
}
console.log(arr); //[1, 2, 3, 4, value: "val"]
alert(arr);//[1, 2, 3, 4]
var arr = [1,2,3,4];
arr.value = "val";
for(var i of arr){
    console.log(i); //1,2,3,4
}

第五种:

every():
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意:
every() 不会对空数组进行检测。
every() 不会改变原始数组。

var arr = [1, 2, 3];
var demo = arr.every(function(item){
    return item > 0;
});
console.log(demo);

第六种:

filter():
返回一个新数组。每一项返回值为true的都放入新数组中

var arr = [1, 2, 3];
var demo = arr.filter(function(item){
    return item > 1;
});
console.log(demo);

第七种:

map():
返回一个新数组。哪一个有返回值就把哪一项添加进新数组

var arr = [1, 2, 3];
var demo = arr.map(function(item){
    return item > 1;
});
console.log(demo);//false,true,true

第八种:

some():
如果每一项都返回false结果是false;
如果有一项返回true,那么立刻停止遍历返回true
和every()相反

var arr = [1, 2, 3];
var demo = arr.some(function(item){
    return item > 1;
});
console.log(demo); //true
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值