for in for of foreach及map的区别

看一个例子

  var arr=[{name:'张三'},{name:'李四'}];
    var obj={name:'张三'};
    for (var i in arr){
        console.log(i)； //0 1 数组的下标
    }
    for (var i in obj){
        console.log(i)    //name 对象的key
    }


    for (var i of arr){
        console.log(i)    //{name:'张三'}   {name:'李四'} 数组的value
    }
    for (var i of obj){
        console.log(i)    //报错  Uncaught TypeError: obj is not iterable  普通对象不能直接使用for of
    }

for...in   语句用于遍历数组或者对象。其可以中断循环。
for in   得到对象的key或数组的index,字符串的下标。遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。其可以中断循环。

for of 是es6新语法，其和forEach一样,是直接得到value。
for...of循环：具有 iterator 接口，就可以用for...of循环遍历它的成员(属性值)。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。其可以中断循环。

 

forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，
第三个参数是数组本身

        var arr = [1, 2, 3, 4];
        var sum = 0,
            sum2 = 0;
        var arr2 = arr.forEach(function(value, index, array) {
            console.log(array[index] == value); //打印true 4次
            sum += value;
        });
        arr.forEach(x => sum2 += x);

        console.log(sum, sum2); //结果为 10
        console.log(arr2); // undefined  没有返回值

map: 只能遍历数组，不能中断，返回值是修改后的数组。

const array = [1, 3, 6, 9];
const newArray = array.map(function (value) {
  return value + 1;
});
console.log(array);       // [1, 3, 6, 9]
console.log(newArray);  //[2, 4, 7, 10]