JS循环总结

工作发现，项目中的对于对象、数组的循环，使用的方法各不相同，有forEach、for in、for of、map以及for，故对这些循环做些总结。

forEach（数组方法）

特性

• 遍历的时候更加简洁，效率和for循环相同，不用关系集合下标的问题，减少了出错的概率。
• 没有返回值。
• 不能使用break中断循环，不能使用return返回到外层函数。

实例

    const array = [1, 2, 3];
    let newArray = array.forEach(item => {
        item+=1;
        console.log(item);// 2 3 4
    })
    console.log(array); // [1, 2, 3]
    console.log(newArray) // undefined

for in

特性

更适合遍历对象，可以遍历数组，但是会有一些局限性。

实例

for in的索引为字符串型数字，不能直接进行几何运算

    const array = [1, 2, 3];
    for(const i in array) {
        const res = i + 1;
        console.log(res);
    }
    // 01 11 21

遍历顺序有可能不是按照实际数组的内部顺序，使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性

    const array = [1, 2, 3];
    Array.prototype.a = 123;
    for (const index in array) {
        const res = array[index];
        console.log(res);
    }
    // 1 2 3 123

    for (const index in array) {
        if (array.hasOwnProperty(index)) {
            const res = array[index];
            console.log(res);
        }
    }
    // 1 2 3

for of

特性

• 可遍历map/objet/array/set/string等
• 避免了for in的所有缺点，可以使用break、continue和return，不支持数组的遍历，还可以遍历类似数组的对象。

实例

for of是ES6的新语法，为了弥补for in的局限性。
for of遍历的数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

    const array = [1, 2, 3];
    array.a = 123;
    Array.prototype.a = 123;
    for(const value of array) {
        console.log(value);
    }
    // 1 2 3

for of适用遍历拥有迭代器对象的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象，可以用内建的Object.keys()方法

    const myObject = {
        a: 1,
        b: 2,
        c: 3
    };
    for (const key of Object.keys(myObject)) {
        console.log(key + "：" + myObject[key]);
    }
    //> "a：1" "b：2" "c：3

map （数组方法）

特性

• map不改变原数组但是会返回新数组
• 可以使用break中断循环，可以使用return返回到外层函数

实例

    const array = [1, 2, 3];
    const newArray = array.map(index => {
        return index+= 1;
    })
    console.log(array);// [1, 2 , 3]
    console.log(newArray);//  [2, 3 , 4]

在大地上我们只过一生。 ----叶赛宁