for、for in、for of、forEach总结

一、传统for循环

用途：循环代码块一定的次数

遍历 数组、对象(需先转换成数组)、字符串

可以使用return、break等来中断循环

使用 break 语句来跳出循环，使用continue 语句来跳过点前的迭代，并执行下一个迭代。

语法：

for(循环变量(statement1，...);循环条件(statement2);变量的改变(statement3,...)){
        循环体;
}

参数：

statement1	可选。在循环之前执行，用于变量的初始化，初始化多个变量使用逗号隔开(,)。 注意： 该参数可以省略。但是，不要忽略 分号 ";"。
statement2	可选。定义执行循环的条件。 通常该语句用于条件判断，如果条件为 true, 循环会继续执行，如果为 false，循环终止。 注意： 该参数可以省略。但是，不要忽略 分号 ";"。同样，如果你忽略了该参数，你必须在循环中提供跳出循环的条件。否则语句无限循环，会造成浏览器崩溃。
statement3	可选。在每次循环后执行该语句。通常该语句用于自增或自减计数变量。 注意： 该参数可以忽略(例如： 自增或自减值在循环内操作)

死循环：for(;;){循环体} 

举个小例子：

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

//遍历对象
let obj = {
  name:'张三',
  age:'20',
}
for (var i = 0;i<Object.keys(obj).length; i++){
  console.log(obj[keys[i]])
}
/*  张三
    20
        */

//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
  console.log(str[i])
}
/*  a
    b
    c
        */

---

二、for in

用途：

循环遍历对象的属性（可以循环数组，        但更适合遍历对象）

可以正确响应break、continue和return语句

ES5 中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for-in遍历的index值"0","1","2"等是字符串而不是数字

有些时候，会出现随机顺序的遍历

语法：

for (var in object) {
 执行的代码块
}

参数：

var	必须。指定的变量可以是数组元素，也可以是对象的属性。
object	必须。指定迭代的的对象。

举个小例子：

let person = {fname:"John", lname:"Doe", age:25}; 
for (let key in person) {
    console.log('key ---',key )
    console.log('person[key ]----',person[key ])
}


输出
key --- fname
person[key ]---- John
key --- lname
person[key ]---- Doe
key --- age
person[key ]---- 25

用for...in遍历"数组": 循环变量x是数组的下标 

（菜鸟上说：不要使用 for/in 语句来循环数组的索引）

既然如此就不举例了！（最好不要遍历数组（虽然我用过也没出啥问题，但现在知道了就尽量不使用），具体原因等我理解透了再补充）

---

三、for of

定义：

在 可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

用途：

只能遍历可迭代对象

可以使用break,continue和return 支持map和Set对象遍历

不适用于处理原有的原生对象（例如obj={name:'zhangsan',age:20}

举个小例子：

//遍历数组
let arr=["张三","李四","王五","二麻子"];
for (let item of arr){
    console.log(item)
}


//输出
    张三
    李四
    王五
    二麻子

//遍历对象
let person=[{name:"张三",age:23},{name:"李四",age:20}]
for (let item of person){
    console.log(item)
}

//输出
    {name: '张三', age: 23}
    {name: '李四', age: 20}

四、forEach

定义：

用于调用数组的每个元素，并将元素传递给回调函数。

forEach() 本身是不支持的 continue 与 break 语句的

使用 return 语句实现 continue 关键字的效果：

不改变原数组，无返回值undefined

语法：

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

 参数：

function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数: currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

举个小例子：

//遍历对象
let arr=[{name:"张三",age:23},{name:"李四",age:20}]
arr.forEach((item, index) => {
  console.log(index);//0 1
  console.log(item); // {name: '张三', age: 23} {name: '李四', age: 20}
})