Array method to expand

For data visualization

1, forEach () method

Traversing the role of enhanced version of the for loop in array against

Significance of various parameters

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

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

Package achieve 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 () returns the filter to meet the conditions of the new array

This method returns a boolean value based on the data processing Boolean

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

Package filter function ()

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 () method returns a new array hash map

x ------------- ---> certain rules ---------------> y Note that the processing method is changed will be on the basis of the original array Note that the original array causes subsequent errors when using

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);

The method of packaging 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 () method returns a Boolean value of the final false, true distinction filter method

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

The method of packaging 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 () method

     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'})

Package reduce () method

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
        }

 

Published 56 original articles · won praise 1 · views 1187

Guess you like

Origin blog.csdn.net/qq_40819861/article/details/103192106