数组方法拓展

用于数据可视化

1、forEach() 方法

遍历作用 加强版本的for循环  针对于数组

各个参数意义

    list.forEach( function(ele,index,self)  {
        console.log(ele,index,self,this);
    },document.getElementsByTagName('li'));

参数   //ele  数组每一项
    //index 序列号
    //self   数组本身
    //this  没有第二个参数window   有第二个参数指向

封装实现forEach

Array.prototype.myForEach = function(fun) {
    var _arr = this,
    len = _arr.length,
    param2 = arguments[1] || window;
    for(var i = 0; i < len; i++) {
        fun.apply(param2,[_arr[i],i,_arr])
    }
}

    list.myForEach( function(ele,index,self)  {
        console.log(ele,index,self,this);
        this[index].innerText = ele.title
    },document.getElementsByTagName('li'));

2、filter()  过滤     返回满足条件的新数组

该方法就返回一个布尔值 依据布尔值进行数据处理

        //过滤 通过返回值的真假返回满足条件的项目
       var newArr = list.filter(function(ele,index,self) {
            console.log(ele,index,self,this);
            return true
        },[1,2,2])
        console.log(newArr);

封装filter函数（）

Array.prototype.myFilter = function(fun) {
        var _arr = this,
    len = _arr.length,
    param2 = arguments[1] || window,
    newArr = [];
    for(var i = 0; i <len; i ++) {
        fun.apply(param2,[_arr[i],i,_arr]) ? newArr.push(_arr[i]) : ''
    }
    return newArr
}

3、map（）方法   哈希映射    返回新的数组

x ------------- --->一定规则---------------> y      注意该方法是在原数组的基础上进行处理 会改变原数组  注意使用时造成后续错误

var neewArr = list.map(function(ele,index,self) {
    console.log(ele,index,self,"--------",this);
    //  此处对数组元素进行处理 会导致原数组发生改变  慎重（没有将原数组复制，而是在原数组基础上进行改变
    ele.name = ele.name + 'pp'
    return ele.name
  })
         //返回值是选取元素组成的新数组
        //  console.log(neewArr);

封装map方法

        //  封装map方法
        Array.prototype.myMap = function (fun) {
            var _arr = this,
                len = _arr.length,
                param2 = arguments[1] || window,
                newArr = []
            for (var i = 0; i < len; i++) {
                newArr.push(fun.apply(param2, [_arr[i], i, _arr]))
            }
            return newArr
        }
        list.myMap(function (ele, index, self) {
            console.log(ele,index,self,this);
        },{name:'taotao'})

4、every（）方法   最终的返回值为布尔值 false  、true   注意区分filter方法

       //只要有一个不满足条件就终止循环，区别于for 如果每一项返回值为true最终返回值为true 否则 false
        var flag = arr.every(function(ele,index,self){
        console.log(ele,'--------->',index,'------>',self,this);
        return 1
    })

封装every方法

    Array.prototype.myEvery = function(fun) {
        var _arr = this,
        len = _arr.length,
        param2 = arguments[1] || window,
        flag = true
        for(var i = 0;i < len; i ++) {
            //fun.apply 取得是该函数的执行结果
            if(!fun.apply(param2,[_arr[i],i,_arr])) {
                flag = false
                break
            }
        }
        return flag
    }

5、reduce（）方法

     var initialValue = {name:'wtt'}
        //返回一个值   第一个参数函数 第二个参数必填 initialValue  函数执行多少次取决于数组大小
        //第一个参数函数必须要有返回值 将会作为下一次比较的preValue的值
        var lastValue = arr.reduce(function(pre,cur,index,self) {
            console.log(pre,cur,index,self,this);
            return 999
            //注意该方法this指向不可以改变
        },initialValue,{dom:'dom'})

封装reduce（）方法

扫描二维码关注公众号，回复： 9086758 查看本文章

Array.prototype.myReduce = function(fun,initialValue) {
            var _arr = this,len = _arr.length,param2 = arguments[2] || window
            for(var i = 0; i < len; i ++){
                initialValue = fun.apply(param2,[initialValue,_arr[i],i,_arr])
            }
            return initialValue
        }