遍历数组,循环对象大杂烩

遍历的多了,很多时候并分不清楚到底哪个循环是最佳方法,于是做了一篇总结,希望能用最快的速度使用最简洁邮箱的方法处理我们想要的数据

数组

for 函数式

一般的我们遍历数组是用for遍历的,只想 .> 大写low

var arr = [2,3,1,5];
for( var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

forEach(内置)声明式

依然 .> 小写 low吧

var sum = 0;
var result = arr.forEach(function(item,index){
    console.log(item); //每一项
    console.log(index); //下标
    sum += item;
    console.log(sum);
})

惨 => forEach对于空数组是不会执行回调函数的 更惨 => 支持浏览器ie9以上版本

map(不改变原数组)

同样不兼容 Array.prototype上没有这两个方法

var arr = [2,3,4,1,66,88];
var result = arr.map(function(item,index){
//console.log("数组的每一项：",item,"数组的下标：",index);
return item*10; //这里可以return 这是和forEach的区别
})
console.log("原数组:",arr);//原数组是不会改变的 原数组: (6) [2, 3, 4, 1, 66, 88]
console.log("遍历之后的数组：",result);//遍历之后的数组会改变 原数组: (6) [2, 3, 4, 1, 66, 88]

兼容写法 请参考在原型上封装map和forEach

for of

var arr = [11,22,33];
Array.prototype.clone = function(){
}
arr.name = 'xiao';
for(var i of arr){
    console.log(i);//看这里哦，注意这里遍历出来的是 数组的每一项，而不是索引值，这也是和for in的不同之处
}

for in

var arr = [11,22,33];
Array.prototype.clone = function(){
}
arr.name = 'xiao';
for(var i in arr){
    console.log(i,':',arr[i]);
}

遍历对象

for……in

var obj = {
    'name': 'xiao',
    fn: function(){
    
    }
}
Objct.prototype.clone = function(){

}
for( var i in obj){
    console.log('对象中的属性：',i); //属性
    console.log('对象中的属性值',obj[i]); //属性值
}

为了避免输出原型中的方法，我们可以在for in中加一个hasOwnProperty（）方法，该方法的作用是：可以检测一个属性是存在实例中，还是原型中。如果存在实例中返回true，存在原型中返回false。

var obj = {
    'name': 'xiao',
    fn: function(){
    
    }
}
Object.prototype.clone = function(){

}
for(var i in obj){
    if(obj.hasOwnProperty(i)){
        console.log("对象中的属性：",i);
        console.log("对象中的属性值",obj[i]);
    }
}

for in遍历对象时还存在一个问题，不能按顺序遍历(只能强制用户不要以纯数字定义键名)

Object.keys()

var obj = { 'name': 'xiao', fn: function(){ } } 
Object.prototype.clone = function(){ } 
for( var key of Object.keys(obj)){ 
    console.log(key,':',obj[key]);
}