前端基础知识：for 循环|foreach() |map()

for

在for循环中，循环取得数组或是数组类似对象的值，譬如arguments和HTMLCollection对象。

不足：

• 在于每次循环的时候数组的长度都要去获取；
• 终止条件要明确；

foreach() map()

两个方法都可以遍历到数组的每个元素，而且参数一致；

不同点：

forEach() : 对数组的每个元素执行一次提供的函数, 总是返回undefined；
map() : 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 返回值是一个新的数组；

var array1 = [1,2,3,4,5];
 
var x = array1.forEach((value,index) => {
    console.log(value);
    return value + 10;
});
console.log(x);   // undefined
 
var y = array1.map((value,index) => {
    console.log(value);
    return value + 10;
});
console.log(y);   // [11, 12, 13, 14, 15] 

for in

经常用来迭代对象的属性或数组的每个元素，它包含当前属性的名称或当前数组元素的索引。
当遍历一个对象的时候，变量 i 是循环计数器 为 对象的属性名, 以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。
当遍历一个数组的时候，变量 i 是循环计数器 为 当前数组元素的索引

不足：

for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来.

const array = ["admin","manager","db"]; 
array.color = 'red';
array.prototype.name= "zhangshan"; 
for(var i in array){
    if(array.hasOwnProperty(i)){ 
        console.log(array[i]);  // admin,manager,db,color
    }
}
// hasOwnProperty(): 对象的属性或方法是非继承的，返回true

for … of

迭代循环可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象）等等。不能遍历对象。只循环集合本身的元素

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
a.name = 'array';
for (var x of a) {
 console.log(x); //'A', 'B', 'C'
}
for (var x of s) {
 console.log(x);//'A', 'B', 'C'
}
for (var x of m) {
 console.log(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}