JavaScript中迭代方法代替for循环（笔记）

减少代码量，可阅读性更强，有利于性能优化

一、Map

map():对数组中每一项运行给定函数。返回每次函数调用的结果组成的数组。

1.1 给数组每一项都乘以2

    let arr = [1, 2, 3, 4, 5];
    // for方式
    for(let i =0, len = arr.length; i < len; i++) {
        arr[i] = arr[i] * 2;
    }
    console.log(arr); // [2, 4, 6, 8, 10]


    // map方式
    result = arr.map(function (item) {
        return item * 2;
    });
    console.log(result); // [2, 4, 6, 8, 10]


   // ES6方式
    result = arr.map(item => item * 2);
    console.log(result); // [2, 4, 6, 8, 10]

1.2.对象数组

// 数组包含一些运动员的信息，记录着运动员的姓名和是否签到的信息，如果哪个球员的签到信息isHell为空，就把isHell的值设置为'--'
    var sports = [{
       name: 'lisi',
       isHell: null
    }, {
        name: 'zhangsan',
        isHell: null
    }, {
        name: 'wangwu',
        isHell: true
    }];

    // for方式
    for(var i = 0, len = sports.length; i < len; i++) {
        if(!sports[i].isHell) {
            sports[i].isHell = '---';
        }
    }
    console.log(sports);

    // map方式
    sports.map(function (item) {
        if(!item.isHell) {
            item.isHell = '---'
        }
    });
    console.log(sports);

    // ES6方式
    sports.map(item => {
        if(!item.isHell) {item.isHell = '---'};
    });
    console.log(sports);

二、filter

filter():对数组中的每一项运行给定函数。返回该函数会返回true的项组成的数组。

    var sports = [{
        name: 'lisi',
        isHell: null
    }, {
        name: 'zhangsan',
        isHell: null
    }, {
        name: 'wangwu',
        isHell: true
    }];

    // 拿到已经签到了的球员，不要没签到的球员
    // for方式
    var arr = [];
    for(var i = 0, len = sports.length; i < len; i++){
        if(sports[i].isHell) {
            arr.push(sports[i])
        }
    }
    console.log(arr);

    // filter写法
    var arr = sports.filter(function (item) { return item.isHell;})
    console.log(arr);

    // ES6写法
    var arr = sports.filter(item => {return item.isHell});
    var arr = sports.filter(item => item.isHell);
    console.log(arr);

数组去重

    var arr = ['A', 'B', 'C', 'D', 'C', 'B', 'A', 'A'];
    var newArr = [];    

    // for方式
    for(var i = 0, len = arr.length; i < len; i++){
        if(newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);

    // filter写法
    var newArr = arr.filter(function (item, index, arr) {
        return arr.indexOf(item) === index;
    })
    console.log(newArr);

    // ES6写法
    var newArr = arr.filter((item, index, arr) => {
        return arr.indexOf(item) === index;
    })
    console.log(newArr);

三、Every

every()对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true ;
some()对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true;

every方法

    // 运动员进场如果需要每一个球员都必须签到，球队才能进场
    var sports = [{
        name: 'lisi',
        isHell: null
    }, {
        name: 'zhangsan',
        isHell: null
    }, {
        name: 'wangwu',
        isHell: true
    }];


    // for方式
    var isIn;
    for(var i = 0, len = sports.length; i < len; i++){
        if(!sports[i].isHell) {
            isIn = false;
            break;
        }
    }
    console.log(isIn);

    // every写法
    var arr = sports.every(function (item) {
        return item.isHell;
    })
    console.log(arr);

    // ES6写法
    var arr = sports.every((item) => {
        return item.isHell;
    });
    // 或
    var arr = sports.every((item) => item.isHell);
    console.log(arr);

some方法

    // for方式
    var isIn;
    for(var i = 0, len = sports.length; i < len; i++){
        if(!sports[i].isHell) {
            isIn = true;
            break;
        }
    }
    console.log(isIn);


    // some写法
    var arr = sports.some(function (item) {
        return item.isHell;
    });
    console.log(arr);


    // ES6写法
    var arr = sports.some((item) => {
        return item.isHell;
    });
    // 或
    var arr = sports.some((item) => item.isHell);
    console.log(arr);

四、forEach

forEach()对数组中的每一项运行给定函数，这个方法没有返回值 ;简单点来说，本质上跟for没有区别，只是写法不一样。

    // 只是给每一个数字都加上一个属性sex,值都为‘男’
    var sports = [{
        name: 'lisi',
        isHell: null
    }, {
        name: 'zhangsan',
        isHell: null
    }, {
        name: 'wangwu',
        isHell: true
    }];


    // for方式
    for(var i = 0, len = sports.length; i < len; i++){
        sports[i].sex = '男';
    }
    console.log(sports);


    // forEach写法
    sports.forEach(function (item) {
        item.sex = '男';
    })
    console.log(sports);


    // ES6写法
    sports.forEach(item => item.sex = '男')
    console.log(sports);

五、reduce方法

reduce()每次只能接受两个参数，我对着两个参数的理解就是，当前结果，和当前序列的下一项。
作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)。
5.1 数字数组求和

    // 数字数组求和

    // for方式
    var arr = [1, 2, 3, 4, 5], sum = 0;
    for(var i = 0, len = arr.length; i < len; i++) {
        sum += arr[i];
    }
    console.log(sum);



    // reduce写法
    sum = arr.reduce(function (prev, cur, index, arr) {
        return prev + cur;
    });
    console.log(sum);


    // ES6写法
    sum = arr.reduce((prev, cur, index, arr) => prev + cur);
    console.log(sum);

5.2 字符串数组连接

    // 字符串数组连接
    var arr1=['字','符','串','数','组','连','接'], sum1 = '';
    sum1= arr1.reduce((prev, cur, index, arr) => prev + cur);
    console.log(sum1); // 字符串数组连接

六、find和findIndex

find：方法返回传入一个测试条件（函数）符合条件的数组第一个元素。
findIndex：方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
当数组中的元素在测试条件时返回true时, find和findIndex返回符合条件的元素或者元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。

    // 从[11,22,33,44,55,66]这个数组里面，找出第一个大于30的元素

    // for方式
    var arr = [11,22,33,44,55,66], str;
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] > 30) {
            str = arr[i];
            break;
        }
    }
    console.log(str);



    // find写法
    str = arr.find(function (item, index, arr) {
        return item > 30;
    });
    console.log(str);


    // ES6写法
    str = arr.find((item, index, arr) => item > 30);
    // 或
    str = arr.find(item => item > 30);
    console.log(str);

从[11,22,33,44,55,66]这个数组里面，找出第一个大于30的元素的位置

    // for方式
    var arr = [11,22,33,44,55,66], getIndex;
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] > 30) {
            getIndex = i;
            break;
        }
    }
    console.log(getIndex);



    // findIndex写法
    getIndex = arr.findIndex(function (item, index, arr) {
        return item > 30;
    });
    console.log(getIndex);



    // ES6写法
    getIndex = arr.findIndex((item, index, arr) => item > 30);
    // 或
    getIndex = arr.findIndex(item => item > 30);
    console.log(getIndex);

js数组操作–使用迭代方法替代for循环