for-in和for-of，forEach和Map

Posted 2020-10-04 一只前端路上的小白

for-in和for-of

　　1. 　for-in循环实际是为循环”enumerable“对象而设计的，是用来循环带有字符串key的对象的。
　　　　使用for in会遍历数组所有的可枚举属性，包括原型。所以for in更适合遍历对象，不要使用for in遍历数组。

　　var obj = {a:1, b:2, c:3};
　　for (var prop in obj) {
    　　console.log("obj." + prop + " = " + obj[prop]);
　　}

 

　　2. 　for-of可用于循环数组value值，或者可迭代对象，如Map, Set, String。
　　　　如果循环普通的对象，需要通过和Object.keys()搭配使用。

　　var student={
    　　name:‘wujunchuan‘,
    　　age:22,
    　　locate:{
    　　　　country:‘china‘,
    　　　　city:‘xiamen‘,
    　　　　school:‘XMUT‘
    　　}
　　}
　　for(var key of Object.keys(student)){
    　　//使用Object.keys()方法获取对象key的数组
    　　console.log(key+": "+student[key]);
　　}    

　　3.　总结：　

　　1. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
　　2. for...in循环出的是key，for...of循环出的是value
　　3. 注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
　　4. for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

forEach和Map

　　共同点：
　　　　1. 都是循环遍历数组中的每一项。
　　　　2. forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项value,当前项的索引index,原始数组array。
　　　　3. 匿名函数中的this都是指Window。
　　　　4. 只能遍历数组。

　　1. forEach
　　　　没有返回值，不能中断循环(使用break语句或使用return语句)，只是针对每个元素调用func。

　　var ary = [12,23,24,42,1];
　　var res = ary.forEach(function (value,index,array) {
    　　console.log(value*10);
　　})
　　console.log(res);//-->undefined;
　　console.log(ary);//-->[12,23,24,42,1]  原来的数组不变；

　　2. Map
　　　　返回一个新的Array，新数组元素为原来的数组的每个元素调用func的结果，对原来数组不影响。

    var ary = [12,23,24,42,1];
    var res = ary.map(function (value,index,array) {
        return value*10;
    })
    console.log(res);//-->[120,230,240,420,10];
    console.log(ary);//-->[12,23,24,42,1]；