for...in/for...of/forEach循环的区别

一、for...in循环

语法：for (variable in object) {...}

variable (变量)，object (对象)

for...in 语句是遍历数组或者对象的属性，它所遍历的为对象的属性名，而非属性值。

Array，String：打印出来的是下角标

例如

let arr = ['A', 'B', 'C'];
for (let a in arr) {
    console.log(a); // '0', '1', '2'
}

 因为数组也是一个对象，而它的下标就是属性，所以打印出来的也是数组的下标，并且遍历数组所得到的下标是String类型

 var obj = {f:'8',a:'a',3:'b',2:'p'}
 for (let d in obj) {
    console.log(d); // '2','3','f','a'
}

 遍历循环的时候，会将对象中的数字属性排在前面，并且在排列的时候按照数字的从小到大进行排列，而非数字的属性则会按照之前的编写排顺序进行排序打印

 var obj = {f:'8',a:'a',3:'b',2:'p'}
 for (let d in obj) {
    console.log(obj[d]); // 'p','b','8','a'
}

 所打印出来的顺序与下标排列的顺序一致

二、for...of循环

语法： for (variable of object) {...}

for...of循环遍历集合，它只遍历数组的元素

let a = ['A', 'B', 'C'];
for (let x of a) {
    console.log(x); // 'a', 'b', 'c'
}

var b = 'ahdgf'
for(var k of b){
    console.log(k);// 'a','h','d','g','f'
}

 打印的是数组的元素，且使按照别写的顺序进行打印。

function Buv(){
    for (let z of arguments){
        console.log(z)
    }
}
Buv(1,2,3,4,5)
//'1','2','3','4','5'

三、forEach循环

语法：

[].forEach(function(value,index,array){
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身


　　//code something
　　});

forEach 用于遍历数组对象的每一个元素，并对每一个元素执行回调函数，forEach方法对数组的每个元素都执行一次提供的函数

let arr = ['d', 'u', 't'];
arr.forEach(function (e, i, array) {
    console.log(e + ', i = ' + i);
});

//d, i = 0
//u, i = 1
//t, i = 2

var arr = [8,9,11,15];
var sum = null;

arr.forEach(function(value,index,array){
    sum = sum + value;
    console.log(sum)  
    });
console.log(sum);

//'8','17','28','43','43'