总结JS中的for循环类型

一、普通的for循环

1、具体使用

//1、数组
let arr = [1,2,3];
for(let i=0; i<arr.length; i++) {
  console.log(arr[i]);//1 2 3
}

//2、arguments对象
function b(a,b,c) {
  console.log(arguments instanceof Array);//false
  for(let i=0; i<arguments.length; i++) {
    console.log(arguments[i]);//1 2 3
  }
}
b(1,2,3);

//3、set对象
let set = new Set([1,2,3]);
for(let i=0; i<set.size; i++) {
  console.log(set);
  console.log(set[i]);//undefined undefined undefined
}

//4、map对象
let map = new Map();
map.set('name', 'miracle');
map.set('lover', 'soar');
for(let i=0; i<map.size; i++) {
  console.log(map[i]);//undefined undefined
}

二、for…in 和 for…of的使用及区别

1、文章链接
https://zoyi14.smartapps.cn/pages/note/index?origin=share&slug=c43f418d6bf0&_swebfr=1

https://blog.csdn.net/wuyujin1997/article/details/88743955

2、具体使用区别
（1）for…in

// 1、for in 可以遍历数组
var arr = [1,2,3];
/*
  输出结果:
    1
    2
    3
 */
for(let key in arr) {
  console.log(arr[key]);
}

// 下面这种报错
// for(let (key, value) in arr) {
//   console.log(value);
// }

// 2、for in 可以遍历对象
let obj = {
  name: 'miracle',
  lover: 'soar'
}
/*
  输出结果:
    name   
    miracle
    lover  
    soar
 */
for(let key in obj) {
  console.log(key);
  console.log(obj[key]);
}

// 下面这种报错
// for(let (key, value) in obj) {
//   console.log(key);
//   console.log(value);
// }

(2)for…of

// 1、for of 可以遍历数组
var arr = [1,2,3];
/*
  输出结果:
    1
    2
    3
 */
for(let value of arr) {
  console.log(value);
}

// 下面这种报错
// for(let (key, value) of arr) {
//   console.log(value);
// }

/*
  下面这种报错:
    TypeError: .for is not iterable
 */
// for(let [index, value] of arr) {
//   console.log(index);
//   console.log(value);
// }

// 2、for of 不可以遍历普通对象
let obj = {
  name: 'miracle',
  lover: 'soar'
}
/*
  报错：TypeError: obj is not iterable
*/
// for(let value of obj) {
//   console.log(value);
// }

/*
  报错：TypeError: obj is not iterable
 */
// for(let (key, value) of obj) {
//   console.log(key);
//   console.log(value);
// }

// 报错：Uncaught TypeError: obj is not iterable
for(let [key, value] of obj) {
  console.log(key, value);
}

// 3、for...of遍历map
let map = new Map();
map.set('name', 'miracle');
map.set('age', '20');
// 下面报错
// for(let (key, value) of map) {
//   console.log(key);
//   console.log(value);
// }

/*
  输出结果:
    name
    miracle
    age
    20
 */
for(let [key, value] of map) {
  console.log(key);
  console.log(value);
}

三、forEach的使用

1、文章链接
https://blog.csdn.net/fanfan_h/article/details/91406310

2、具体使用

// 1、采用forEach遍历数组
let arr = [1,2,3];
/*
  输出结果:
    1 0 [ 1, 2, 3 ]
    2 1 [ 1, 2, 3 ]
    3 2 [ 1, 2, 3 ]
 */
arr.forEach((value, index, arr) => {
  console.log(value, index, arr);
})

// 2、采用forEach遍历对象
let obj = {
  name: 'miralce',
  lover: 'soar'
}
// 报错: TypeError: obj.forEach is not a function
// obj.forEach((value, key, obj) => {
//   console.log(value, key, obj);
// })

// 3、采用forEach遍历map
let map = new Map();
map.set('name', 'miracle');
map.set('lover', 'soar');
/*
  输出结果:
    miracle name Map(2) { 'name' => 'miracle', 'lover' => 'soar' }
    soar lover Map(2) { 'name' => 'miracle', 'lover' => 'soar' }
 */
map.forEach((value, key, map) => {
  console.log(value, key, map);
})

四、总结

1、for循环

只能遍历数组，以及本身含有length属性的伪数组对象，如:arguments

2、for…in

（1） 可以遍历普通对象
（2）可以遍历数组，以及其他可迭代对象（可迭代对象，可以粗糙理解为对象本身就含有length(或者size)属性的伪数组对象），如Array, Map, Set、String、arguments等
（3）for…in遍历数组的缺点是：如果手动向数组添加成员属性， 则：虽然数组的length不变，但用for…in遍历数组会遍历到那些新定义的属性。

3、for…of

（1） 不能遍历普通对象
（2）可以遍历数组，以及其他可迭代对象（可迭代对象，可以粗糙理解为对象本身就含有length(或者size)属性的伪数组对象），如Array, Map, Set、String、arguments等

3、forEach

（1） 不能遍历普通对象
（2）可以遍历数组，以及其他可迭代对象（可迭代对象，可以粗糙理解为对象本身就含有length属性的伪数组对象），如Array, Map, Set、String等
（3）数组、以及其他可迭代对象都含有forEach这个方法，除了arguments，arguments是可迭代对象，但是arguments本身没有forEach方法。