小白时期搞什么都是For循环，敲的不亦乐乎。
然而数组Array遍历的方法有九种，面试时也多有被问到，所以分享给大家
// W3School : http://www.w3school.com.cn/jsref/jsref_obj_array.asp
Array.indexOf();
Array.lastIndexOf();
Array.every();
Array.some();
Array.forEach();
Array.map();
Array.filter();
Array.reduce();
Array.reduceRight();
for-of(ES6);
在开发中也非常实用，更高效的操作数组，本文适合新手在撸一遍，请大神轻拍。
1. Array.indexOf();
indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。
使用for：
var arr = [ 'apple' , 'orange' , 'pear' ];
var flag = false;
for(var i = 0,l = arr.length; i<l; i++){
if(arr[i] === 'orange'){
flag = true;
}
}
console.log(flag);
//true
使用Array.indexOf():
var arr = [ 'apple' , 'orange' , 'pear' ];
var flag=arr.indexOf('orange');
console.log(flag != -1);
//true
2. Array.lastIndexOf();
和indexOf一样,从后向前查询,indexOf是从前向后查询;
3. Array.every();
检查数组中的每一项是否符合条件
使用for:
var arr=[1,2,3,4,-1,2];
function every(arr){
for(var i = 0,l = arr.length; i<l; i++){
if(arr[i] < 0){
return false
}
return true
}
}
console.log(every(arr))
//false
使用Array.every():
var arr=[1,2,3,4,-1,2];
var flag = arr.every(function(item, index){
return item > 0
})
console.log(flag)
//false
4. Array.some();
检查数组中的某一项是否符合条件
使用for:
var arr=[1,2,3,4,-1,2];
function every(arr){
for(var i = 0,l = arr.length; i<l; i++){
if(arr[i] < 0){
return true
}
return false
}
}
console.log(every(arr))
//true
使用Array.some():
var arr=[1,2,3,4,-1,2];
var flag = arr.some(function(item, index){
return item < 0
})
console.log(flag)
//true
5. Array.forEach();
遍历数组,代替for
使用for:
var arr = [1,2,3,4,5,6];
for(var i = 0,l = arr.length; i < l; i++){
console.log(arr[i]);
//1
//2
//3
//.....
}
使用Array.forEach():
var arr = [1,2,3,4,5,6];
arr.forEach(function(val,index,arr){
console.log(val);//1,2,3....
console.log(index);//下标
console.log(arr);//原数组
})
6. Array.map();
对数组进行操作,返回一个新数组,在处理服务器数据时经常使用
使用for:
var arr = [1,2,3,4,5,6];
function map(arr){
var arr2=[];
for(var i = 0,l = arr.length; i < l; i++){
arr2[i] = arr[i] + 1;
}
return arr2;
}
console.log(map(arr));
//2,3,4,5,6,7
使用Array.map():
var arr = [1,2,3,4,5,6];
var arr2=arr.map(function(val,index){
return val + 1
})
console.log(arr2)
//2,3,4,5,6,7
map()和forEach()的区别:
map()可以使用return返回一个新的数组,而forEach不可以使用return;
return是返回一个修改的数组的副本,对原数组没有影响;
两个都可以对第三个参数原数组进行修改,可以对原数组修改;
var arr = [1,2,3,4];
arr.forEach(function(val,index,arr){
arr[index] = "123"
})
console.log(arr);
// "123", "123", "123", "123", "123", "123"
7. Array.filter();
返回一个新的匹配条件的数组
使用for:
var arr = [1,2,3,4,5,-1];
function filter(arr){
var arr2 = [];
for(var i = 0,j = arr.length; i++){
if(arr[i] < 0){
arr2.push(arr[i])
}
}
}
console.log(filter(arr));
//-1
使用Array.filter():
var arr = [1,2,3,4,5,-1];
var arr2=arr.filter(function(val,index,arr){
return val < 0;
})
console.log(arr2);
//-1
8. Array.reduce();
接受一个回调函数作为累加器,最终返回一个值.
arr.reduce(callback[, initialValue])
- callback(回调函数,接收四个参数)
- previousValue(上次调用的回调函数的返回值,或初始值)
- currentValue(目前正在处理的函数元素)
- index(正在处理的元素下标)
- array(调用reduce方法的数组)
- initialValue(可选的初始值,作为第一次使用传给previousValue)
有点晦涩难懂,看案例吧
a). 求最大数:
var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
return pre>cur?pre:cur;
})
console.log(flag)
//4
b). 求和:
var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
return pre+cur
})
console.log(flag)
//10
c). 乘积
var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
return pre*cur
})
console.log(flag)
//24
reduce就是为这种累加操作设计的,那么initialValue参数有什么用呢?
我理解的是用来代替previousValue成为第一个参数
var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
return pre+cur
},100)
console.log(flag)
//110
9. Array.reduceRight():
用法和参数和reduce一样,不同的是reduce是升序,而reduceRight是降序
10. for-of循环(ES6):
forEach好用但是不可以中断循环
for-in可以遍历'enumerable'对象,不推荐用来遍历数组,数组的 index 跟普通的对象属性不一样，是重要的数值序列指标。
for-of是ES6引入的一种新方法,比普通for循环简单,也弥补了forEach和for-in的缺点
for (var value of myArray) {
console.log(value);
}
for-of可以循环很多种数据类型(数组,对象,字符串等)
网友评论