js中遍历数组的方法

2019/12/15

for循环

for循环在使用上没有其他限制，但是代码上写起来复杂一点儿。

var array = [1,2,3];
//一般写法
for(var i = 0; i < array.length; i++) {
    console.log(array[i]);//元素值
    console.log(i);//元素对应的索引
}
//优化写法
for(var i = 0,len=array.length; i < len; i++) {
    console.log(array[i]);//元素值
    console.log(i);//元素对应的索引
}

两种写法的耗时对比：

var  array = [];
for(var i = 0; i < 10000; i++) {
    array.push(i);
}
console.time('for');
for(var i = 0; i < array.length; i++) {}
console.timeEnd('for'); //耗时1ms

console.time('for optimize');
for(var i = 0,len=array.length; i < len; i++) {}
console.timeEnd('for optimize'); //耗时0.2ms

for in

for in 一般会用于遍历对象，会遍历原型链上的属性，即会深度遍历，可以遍历数组，但不建议使用该方法。

var array = [1,2,3];
for (var i in array) {
    console.log(i);//注意，这样获取的索引时字符串格式
    console.log(array[i]);
}

耗时：

var  array = [];
for(var i = 0; i < 10000; i++) {
    array.push(i);
}
console.time('for in');
for (var i in array) {}
console.timeEnd('for in'); //耗时0.3ms

forEach

forEach遍历数组很方便，但是缺点是不能使用break、continue

var array = [1,2,3];
array.forEach(function(value,index,array){
    console.log(value);//元素值
    console.log(index);//元素对应的索引
    console.log(array);
    break;//报错
    continue;//报错
});

耗时：

var  array = [];
for(var i = 0; i < 10000; i++) {
    array.push(i);
}
console.time('forEach');
array.forEach(function(value,index,array){})
console.timeEnd('forEach'); //耗时0.15ms

for of

for of 是es6中新增的api，既具备了for in 和forEach在语法上的简练，
又避免的深度遍历和不能使用break的缺点，是比较方便的一种方法，推荐使用

let array = [1,2,3];
for (const i of array) {
    console.log(i);//元素值
    console.log(array.indexOf(i));//元素对应的索引
}

map

map这个方法不会操作原数组，会返回一个新数组;和forEach一样，也是不能使用break、continue

var array = [1,2,3];
var array1 = array.map(function(value,index,array){
    value = value + 1;
    console.log(value);//元素值
    console.log(index);//元素对应的索引
    console.log(array);
    break;//报错
    continue;//报错
})

耗时：

var  array = [];
for(var i = 0; i < 10000; i++) {
    array.push(i);
}
console.time('map');
var array1 = array.map(function(value,index,array){});
console.timeEnd('map'); //耗时0.2ms

filter、every、some、reduce

这些方法不仅能遍历数组，而且具有一定的功能；和map一样，都会返回一个新数组，不改变原数组；

var array = [1,2,3];
var array1 = array.filter(function(value,index,array){
    return value > 1
});
console.log(array1);//过滤掉数组中不符合条件的元素，符合条件的元素组成新数组，返回；

var flag = array.every(function(value,index,array){
    return value < 1
});
console.log(flag);//判断数组中每个元素是否符合条件，全部符合条件，返回true，只要有一个元素不符合条件就返回false

var flag1 = array.some(function(value,index,array){
    return value < 2
});
console.log(flag1);//判断数组中是否有一个元素符合条件，只要有一个元素符合条件，返回true，都不符合返回false

var num = array.reduce(function(total,value,index,array){
    return total * value
},1);
console.log(num);//数组的迭代器，即数组元素作运算；常用功能有累加器，阶乘等；