js 循环遍历方法汇总

1、for循环

for(var i=0;i<arrs.length;i++){
    console.log(arrs[i]);
}

2、增强for…in循环(大部分用于对象)

特征：

• 遍历对象键值(key),或者数组下标,不推荐循环一个数组

var obj = {a: 1, b: 2, c: 3}; 

for (var i in obj) { 
console.log('键名：', i); 
console.log('键值：', obj[i]); 
} 
// 键名： a // 键值： 1 // 键名： b // 键值： 2

注意：fo…in循环一般用于对象的遍历，但是这里有一个坑需要注意：

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

例：obj 继承了toString属性，但是for...in循环不会遍历到这个属性：

var obj = {};// toString 属性是存在的obj.toString 
// toString() { [native code] }
for (var p in obj) { 
    console.log(p);
} 
// 没有任何输出

如果继承的属性是可遍历的，那么就会被for...in循环遍历到。

但如果只想遍历自身的属性，使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。

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

扩展：for循环遍历json对象

无规律json数组：

var json1= [
{"name": "hello", "age": 18},
{"name": "world", "age": 26}
];
for (var i=0,l=json1.length;i<l;i++) {
  for (var key in json[i]) {
    console.log(key+':'+json[i][key]);
  }
}

有规律json数组：

var json2= [
{"name": "hello", "age": 18},
{"name": "world", "age": 26}
];

for (var i in json2) {
  //遍历数组时，i为索引，0,1
  console.log(json2[i].name + ":" + json2[i].age);
}

3、for of(不能遍历普通的对象)

特性：

1. （可遍历map，object,array,set string等）用来遍历数据，比如组中的值
2. 避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象。
3. 是ES6新引入的特性。修复了ES5的for in的不足
4. for of不能循环普通的对象，需要通过和Object.keys()搭配使用。

4、while 循环

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

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

5、do…while循环

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

var i = 0; 
do { 
    console.log(i); i++; 
} while(i < 100);

6、map(数组方法)

这里的map是“映射”的意思，map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

特征：

1. map不改变原数组，而是会返回新数组
2. 可以使用break中断循环，可以使用return返回到外层函数
3. 如果map函数中没有返回值，将会默认返回undefined。

array.map(function(currentValue,index,arr), thisValue)

var numbers1 = [1, 2, 3];

var numbers2 = numbers1.map(function (currentValue, index, arr) {
  return currentValue+ 1;
});

var numbers3 = numbers1.map(function (currentValue, index, arr) { 

});
console.log(numbers1);// [2, 3, 4]---不会改变原数组
console.log(numbers2);// [1, 2, 3]---返回新数组
console.log(numbers3);// [undefined, undefined, undefined]

7、forEach(数组方法)

特性：

1. 便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的概率。
2. 没有返回值
3. 不能使用break中断循环，不能使用return返回到外层函数

注意：

1. forEach() 对于空数组是不会执行回调函数的。
2. for可以用continue跳过循环中的一个迭代，forEach用continue会报错。
3. forEach() 需要用 return 跳过循环中的一个迭代，跳过之后会执行下一个迭代。

array.forEach(function(currentValue,index,arr), thisValue)

8、filter(数组方法)

array.filter(function(currentValue,index,arr), thisValue)

9、reduce(数组方法)

array.reduce(function(total,currentValue,index,arr), thisValue)

相关文章：

js forEach、map、filter、reduce

https://www.49855.net/js-foreach、map、filter、reduce