JS 数组遍历和对象遍历的方法

JS数组遍历：

1、普通 for 循环遍历

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

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

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

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

var arr = [1,2,3,4,5];
arr.forEach(function(value, i){
  console.log(i + ':' + value)
})
// 0:1
// 1:2
// 2:3
// 3:4
// 4:5

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

4、map遍历，map此时不是‘地图’而是‘映射’,顾名思义就是将此数组映射到一个新数组。用法与 forEach 相同

var arr = [1,2,3,4,5];
arr.map(function(value,index){
  console.log(index + ':' + value)
})

同样，map语法不能使用break语句中断循环，但是map支持使用return语句，支持return返回值。是返回一个新数组，而不会改变数组。

var arr = [1,2,3,4,5]
var arrNew = arr.map(function(val, index){
  return val*2
})
console.log(arrNew) // [2, 4, 6, 8, 10]

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

['aaa', 'bbb', 'ccc'].map(function(elem, index, arr) { 
	console.log(index);
    console.log(elem);
	console.log(arr)
}); 
// 0
// aaa
// ["aaa", "bbb", "ccc"]
// 1
// bbb
// ["aaa", "bbb", "ccc"]
// 2
// ccc
// ["aaa", "bbb", "ccc"]

此外，map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

var arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)
 
// ["b", "c"]

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

var arr = [1,2,3,4,5]
for(let item of arr){
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

for-of 性能更优；

与forEach 不同的是，它可以正常相应break、continue、return语句；

for-of 不仅支持数组，还支持大多数类数组对象；

for-of 还支持字符串遍历

6、for-in 遍历

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

遍历数组的缺点，数组的下标 index 是 number类型，for-in 遍历的index的值是 string 类型

var arr = {number:1, age:18, sex: '女'}
for(var key in arr){
  console.log(key + ':' + arr[key])
}

// number:1
// age:18
// sex:女

任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。

// 举例说明遍历不到继承属性
var obj = {};
for(var p in obj){
  console.log(p)
}
// 无任何输出内容

如果只想遍历自身的属性，不会产生遍历失真的情况，应该结合hasOwnPropertty方法，在循环内部判断一下。

var person = { name: '老张' };
for (var key in person) {  
    if (person.hasOwnProperty(key)) {   
         console.log(key);
      }
}

7、while循环

while循环语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

var i = 0;
while(i < 10){
  console.log('当前i为：' + i)
  i++
}

8、do...while循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

var x = 5;
var y = 0;

do {
  console.log(y);
  y++;
} while(y < x)

9、forEach 循环

 forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。也就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。
 

function log(element, index, array) {
     console.log('[' + index + '] = ' + element); 
} ；
 
[2, 5, 9].forEach(log);

10、filter过滤循环

filter 方法用户过滤数组中的成员，满足条件的成员组成一个新的数组返回。他的参数是一个函数，所有数组成员一次执行该函数，返回结果为true的成员组成一个新的数组返回。改方法不会改变原来的数组。

var arr = [1,5,3,2,4];
arr.filter(function(elem){
	return elem > 3
})
// [5, 4]

filter方法的参数函数也可以接受三个参数：当前成员，当前位置和整个数 组。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) { 
    return index % 2 === 0; 
}); 
// [1, 3, 5]

此外，filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。

var obj = { MAX: 3 }; var myFilter = function (item) {
     if (item > this.MAX) return true; 
}; 
var arr = [2, 8, 3, 4, 1, 3, 2, 9]; 
arr.filter(myFilter, obj) 
// [8, 4, 9]

 

 

 

 

转载于:https://my.oschina.net/wsxiao/blog/3047370