JS中数组与对象的遍历方法实例小结

一、数组的遍历：

首先定义一个数组

1	arr=['snow','bran','king','nightking'];

1、for循环，需要知道数组的长度;

2、foreach，没有返回值，可以不知道数组长度；

1 2 3 4

arr.forEach(function(ele,index){ console.log(index); console.log(ele) })

3、map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新数组，原数组不变；

1 2 3 4

var newarr=arr.map(function(i){   return "hello "+i }); console.log(newarr)

4、filter函数：过滤通过条件的元素组成一个新数组，原数组不变；

1 2 3 4

var newarr=arr.filter(function(i){   return i == "bran" }); console.log(newarr)

5、some函数，遍历数组中是否有符合条件的函数，返回布尔值；

1 2 3 4

var yy=arr.some(function(i){   return i.length>4 }); console.log(yy)       //true

6、every函数，遍历数组是否每个元素都符合条件，返回布尔值；

1 2 3 4

var xx=arr.every(function(i){   return i.length>4 }); console.log(xx)       //false

7、reduce函数，为数组中的每一个元素依次执行回调函数

语法：

1	arr.reduce(callback, initialValue)

1 2 3

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){  return previousValue + currentValue; });

callback:执行数组中每个值的函数，包括四个参数；

• previousValue：上一次调用回调返回的值，或者是提供的初始值(initialValue)；
• currentValue:当前被处理的值；
• index：当前元素在数组中的索引；
• array：调用reduce的数组；
• initialValue：作为第一次调用callback的第一个参数；

例如：

1 2 3 4 5 6 7 8

var total = [0, 1, 2, 3].reduce(function(a, b) {   return a + b; }); // total == 6 var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {   return a.concat(b); }); // flattened is [0, 1, 2, 3, 4, 5]

要提供initialValue的话：

1 2 3 4

var total = [0, 1, 2, 3].reduce(function(a, b) {    return a + b; },4); console.log(total); //10

二、对象的遍历

1 2 3 4

var obj={snow:1,bran:2,king:3,nightking:4}; for(let i in obj){   console.log(i+','+obj[i]) }

in也可以用来遍历数组，不过i对应于数组的key值：

1 2 3

for(let i in arr){   console.log(i+','+arr[i]) }

 

 

 

 

JS数组遍历：

1，普通for循环，经常用的数组遍历

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

2，优化版for循环:使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显

for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

3，forEach，ES5推出的,数组自带的循环，主要功能是遍历数组，实际性能比for还弱

arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);

})

forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

4,map遍历，map即是 “映射”的意思 用法与 forEach 相似

arr.map(function(value,index){
    console.log('map遍历:'+index+'--'+value);
});

map遍历支持使用return语句，支持return返回值

var temp=arr.map(function(val,index){
  console.log(val);  
  return val*val           
})
console.log(temp);  

forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持

5，for-of遍历 是ES6新增功能

for( let i of arr){
    console.log(i);
}

• for-of这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句 

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。

for-of循环也支持字符串遍历

JS对象遍历：

1，for-in遍历

for-in是为遍历对象而设计的，不适用于遍历数组。

遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串

for (var index in arr){
    console.log(arr[index]);
    console.log(index);
}

除了for in循环，还可以通过Object.keys(obj).length获取。

1.  
   var obj = {
2.  
   "c1":1,
3.  
   "c2":2
4.  
   };
5.  
   var arr = Object.keys(obj);
6.  
   var len = arr.length;
7.  
   console.log(len);//结果为2