2020-10-16（数组方法的拓展）

Love what you do,do what you want.

数组深入拓展

foreach

 <script>
        var personArr = [{
            name: '王港',
            src: './src/img/3.png',
            des: '颈椎不好',
            sex: 'm'
        }, {
            name: '刘莹',
            src: './src/img/5.png',
            des: '我是谁',
            sex: 'f'
        }, {
            name: '王秀莹',
            src: './src/img/4.png',
            des: '我很好看',
            sex: 'f'
        }, {
            name: '刘金雷',
            src: './src/img/1.png',
            des: '你没有见过陌生的脸',
            sex: 'm'
        }, {
            name: '刘飞翔',
            src: './src/img/2.png',
            des: '瓜皮刘',
            sex: 'm'
        }];

        // 使用foreach方法
        var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        personArr.forEach(deal);

        // 第一个参数每次循环的时候这个元素，第二个参数是索引值，第三个参数是数组本身
        function deal(ele, index, self) {
            oLiArray[index].innerText = ele.name;
        }
    </script>

foreach方法是可以传入两个参数，第一个参数是处理函数，第二个参数是自定义的this指向的对象。
第一个参数的举例就是上面的在personArr在调用foreach方法之后，我们在每次遍历之后都获取到了三个值，当前的元素，索引值的内容以及数组本身。最终就会oLiArray[index].innerText = ele.name;将名字渲染到ul下面的li当中去。

filter（基于遍历对数组的过滤）

介绍filter方法的使用：filter方法类似于上面的foreach方法，都是在调用之后传入一个函数，这个函数有三个参数，下面是一个实际的例子，来筛选出所有性别为男的学生。最终是根据遍历结果的真值来确定这个数组当中的元素能否添加到新的数组当中去，最后返回的结果是一个符合条件的新数组，符合的条件由自己封装成一个deal函数或者是一个匿名函数，并且最终这个子函数最终返回的是boolean值。
代码：

  var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        function deal(ele,index,self){
            return ele.sex == 'm';
        }
        // 使用filter方法
        maleArray = personArr.filter(deal);
        console.log(maleArray);

结果：

map

分析：map是一个在Array.prototype上面的方法，最终返回的结果仍然是一个新的数组，需要传入一个函数参数，同样也可以传入一个自定义的对象。最终返回的新的数组当中的内容是根据传入的匿名函数的限定条件得来的。
举个例子：比如说还是基于上面的人物数组对象，我们想要最后我们仅仅提取出来一个新的数组，该数组中只有name，那么我们就可以。
代码实现：

    var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        var newArr = personArr.map(function(ele,index,self){
            return ele.name;
        })
        console.log(newArr);

结果：

every和some

every：最终返回的是根据条件判断数组当中的每一个元素是否满足，如果全部满足，返回true，否则返回false。
some：最终返回的结果与every类似，只是判定条件变为只要有一个元素满足就可以返回true，全部不满足才会返回false。

   var personArr = [{
            name: '王港',
            src: './src/img/3.png',
            des: '颈椎不好',
            sex: 'm',
            age:20
        }, {
            name: '刘莹',
            src: './src/img/5.png',
            des: '我是谁',
            sex: 'f',
            age:20
        }, {
            name: '王秀莹',
            src: './src/img/4.png',
            des: '我很好看',
            sex: 'f',
            age:20
        }, {
            name: '刘金雷',
            src: './src/img/1.png',
            des: '你没有见过陌生的脸',
            sex: 'm',
            age:20
        }, {
            name: '刘飞翔',
            src: './src/img/2.png',
            des: '瓜皮刘',
            sex: 'm',
            age:20
        }];
        
var newArr = personArr.every(function(ele,index,self){
            if(ele.age>18){
                return true;
            }else{
                return false;
            }
        })
        console.log(newArr);

最终返回的结果是true，因为每一个元素都满足age>18.