前端数组方法及重构方式（splice、slice、forEach、map、some、every、filter、reduce）

1.splice

返回删除元素构成的新数组，无引用关系

var arr=[1,2,3,4,5,6,7]
var arr1=arr.splice(起始位置，删除的个数,添加的元素（可以多个)
var arr1=arr.splice(2,2,0,-1);
var arr1=arr.splice();//返回一个空数组
var arr1=arr.splice(0);//把数组的所有元素都删除，放在新数组中，清空原数组
var arr1=arr.splice(1);//从下标为1清除到数组的尾部
var arr1=arr.splice(-2);//从倒数第二个开始清除到尾部
var arr1=arr.splice(1,2);//从第一位删除两个元素
var arr1=arr.splice(-2,1);//从倒数第二项删除一个元素
var arr1=arr.splice(-1,0,1);//在倒数第一位前插入一个1
var arr1=arr.splice(0,0,-1);//在最前面插入一个-1
console.log(arr1,arr);

重构方法

 function array_splice(arr, start, deleteCount) {
        var arr1 = [];
        if (arr == undefined || arr.constructor !== Array)
          throw new Error("参数错误");
        if (start === undefined) return arr1;
        start = Number(start);
        if (isNaN(start)) start = 0;
        if (start < 0) start = start + arr.length < 0 ? 0 : start + arr.length;
        if (start > arr.length) start = arr.length;
        if (deleteCount === undefined) deleteCount = arr.length - start;
        deleteCount = Number(deleteCount);
        if (isNaN(deleteCount)) deleteCount = 0;
        if (deleteCount < 0) return arr1;
        if (deleteCount + start > arr.length) deleteCount = arr.length - start;
        for (var i = start; i < arr.length; i++) {
          if (i < deleteCount + start) arr1[arr1.length] = arr[i];
          arr[i] = arr[i + deleteCount];
        }
        arr.length -= deleteCount;
        var len = arguments.length - 3;
        var l = (arr.length += len);
        while (l > start) {
          if (l > start + len) arr[l - 1] = arr[l - len - 1];
          else arr[l - 1] = arguments[3 + (l - 1 - start)];
          l--;
        }
        return arr1;
      }
      var arr1 = array_splice(arr, 7, 0, -1, -2, -3);
      console.log(arr, arr1);

2.slice

不会改变原来的数组，将指定的起始位置到结束位置前的元素放在一个新数组中返回

* var arr1=arr.slice();//复制数组
* var arr1=arr.slice(3);//从下标3开始到数组的结束位置
* var arr1=arr.slice(-2);//倒数第二个开始到数组尾部
* var arr1=arr.slice(2,-1);//从第二位到数组的倒数第一位

重构方法

 function array_slice(arr,start,end){
            var arr1=[];
            if(start===undefined || isNaN(start)) start=0;
            if(end===undefined || isNaN(end)) end=arr.length;
            start=parseInt(start);
            end=parseInt(end);
            if(start<0) start=(start+arr.length)<0 ? 0 : start+arr.length;
            if(end<0) end=(end+arr.length)<0 ? 0 : end+arr.length;
            for(var i=start;i<end;i++){
                arr1[arr1.length]=arr[i];
            }
            return arr1;
        }

        var arr=[1,2,3,4,5];

       var arr1= array_slice(arr,1,-7);
       var arr2=arr.slice(1,-7);
       console.log(arr1,arr2);

3.forEach和map

• 都是循环遍历数组中的每一项
• forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item（当前每一项）、index（索引值）、arr（原数组）
• 匿名函数中的this都是指向window
• 只能遍历数组
• map会返回一个新数组，forEach不会返回新数组
• map中回调函数会使用return可以将需要的每个元素数据返回给新数组中对应的位置上

空元素不会被遍历，undefined会被遍历

var  arr=[1,2,3,undefined,4,,5,6];

        arr.forEach(function(item,index,arr){
            // console.log(item,index,arr);
            item=6;
        })
        console.log(arr);

map中回调函数会使用return可以将需要的每个元素数据返回给新数组中对应的位置上

var arr=[2,4,,6,8,10];
      var arr1=arr.map(function(item,index,arr){
                return item+10;
        })
        console.log(arr1,arr);

案例——要返回值——map

var arr=[
        {id:1001,name:"外星人电脑",info:"配置超高的PC电脑",price:35999,num:5},
        {id:1002,name:"苹果笔记本",info:"配置超高的笔记本",price:16990,num:3},
        {id:1003,name:"电竞椅",info:"人体工学电竞椅",price:26000,num:6},
        {id:1004,name:"电竞桌",info:"带超大显示器的桌子",price:13000,num:6},
    ]
    var arr1=arr.map(function(item){
        return {id:item.id,name:item.name,total:item.price*item.num};
    })
    console.log(arr1);

重构方法——forEach

function array_forEach(arr,fn){
        for(var i=0;i<arr.length;i++){
            if(i in arr) fn(arr[i],i,arr);
        }
        return arr1;
    }
    var arr=[2,4,6,8,10];
    array_forEach(arr,function(item,index,arr){
        console.log(item,index,arr);
    })

重构方法——map

 function array_map(arr,fn){
        var arr1=[];
        for(var i=0;i<arr.length;i++){
            if(i in arr)arr1[i]=fn(arr[i],i,arr);
        }
        return arr1;
    }
    function fn1(item,index,arr){
        return item+10;
    }
    console.log(arr1);

4.some和every

some-当元素中有一个满足回调函数中的条件，则返回true，并且不再继续遍历判断，否则返回false

every-和some刚好相反

    var arr=[1,2,3,4,5,6,7];
    var bool=arr.some(function(item,index,arr){
        return item>5;
    })
    console.log(bool)

多选框点击练习

<div>
        <input type="checkbox" id="all"><label for="all">全选</label><br>
        <input type="checkbox" name="hobby" value="游泳" id="ck1"><label for="ck1">游泳</label><br>
        <input type="checkbox" name="hobby" value="唱歌" id="ck2"><label for="ck2">唱歌</label><br>
        <input type="checkbox" name="hobby" value="跳舞" id="ck3"><label for="ck3">跳舞</label><br>
        <input type="checkbox" name="hobby" value="玩游戏" id="ck4"><label for="ck4">玩游戏</label><br>
        <input type="checkbox" name="hobby" value="RAP" id="ck5"><label for="ck5">RAP</label><br>
        <input type="checkbox" name="hobby" value="篮球" id="ck6"><label for="ck6">篮球</label><br>
        <input type="checkbox" name="hobby" value="编程" id="ck7"><label for="ck7">编程</label><br>
    </div>
    var inputs=Array.from(document.getElementsByTagName("input"));
        inputs.forEach(function(item){
            item.onclick=clickHandler;
        })
        function clickHandler(){
            if(this.id==="all"){
                inputs.slice(1).forEach(function(item){
                    item.checked=inputs[0].checked;
                })
            }else{
                inputs[0].checked=inputs.slice(1).every(function(item){
                    return item.checked;
                })
            }
        }

重构方法

function array_some(arr,fn){
            for(var i=0;i<arr.length;i++){
                if(i in arr && Boolean(fn(arr[i],i,arr))) return true;
            }
            return false;
        }
        function array_every(arr,fn){
            for(var i=0;i<arr.length;i++){
                if(i in arr && !(fn(arr[i],i,arr))) return false;
            }
            return true;
        }
       var bool=array_every(arr,function(item,index,arr){
            return item>5;
        })
        console.log(bool);

5.filter和reduce

• filter 筛选 从数组中挑选出满足条件的数据形成新数组
• reduce 归并 从数组中通过各种处理，最后返回一个结果

        var arr = [1, 2, 3, 4, 5];
        var arr1=arr.map(function(item){
              if(item>3) return item;
          });
          console.log(arr1);
        var arr1=arr.filter(function(item){
            return item>3;
        })
        console.log(arr1);

重构函数——filter

function array_filter(arr,fn){
              var arr1=[];
              for(var i=0;i<arr.length;i++){
                  // 回调函数返回为ture时，将元素添加到新数组的尾部
                  if(i in arr && fn(arr[i],i,arr)) arr1[arr1.length]=arr[i];
              }
              return arr1;
          }

         var arr1=array_filter(arr,function(item){
              return item>3;
          })
          console.log(arr1);

      var arr=[1,2,3,4,5];
      value就是开始到结束的归并值
      var val=arr.reduce(function(value,item,index,arr){
          console.log(value,item);
          return value+item;
      })
      var val=arr.reduce(function(value,item,index,arr){
          console.log(value,item);
          return value+item;
      },100)
      console.log(val);

重构函数——filter

function array_reduce(arr,fn,initValue){
        if(arr.length===0) return;
        if(arr.length===1) return arr[0];
        var index=1;//后续判断从第几个开始循环，如果有初始值则从第0个开始循环，如果没有初始值从第一个开始循环
        var value=arr[0];
        if(initValue!==undefined){
                index=0;
                value=initValue;
                // 如果初始值存在value就是初始值，如果不存在，初始值就是数组的第0项
         }
        for(;index<arr.length;index++){
                 value=fn(value,arr[index],index,arr);
        }
        return value;
}
var val=array_reduce(arr,function(value,item){
    console.log(value,item);
    return value+item;
})
console.log(val);

函数扁平话

    var arr = [1, 2, 3, 4, 5, [2, [3, 4], 5], [4, 5, 6, 7]];
      var arr1 = arr.flatMap(function (item) {
        if(Array.isArray(item))
        item=item.flatMap(function(t){
            return t;
        })
        return item;
      });
      arr[0] = 100;
      console.log(arr1);    

重构函数-flatmap

    var arr = [1, 2, 3, 4, 5, [2, [3, 4], 5], [4, 5, 6, 7]];
    var arr1=array_flatmap(arr,function(item){
        if(Array.isArray(item))
        item=array_flatmap(item,function(t){
            return t;
        })
        return item;
    });
    console.log(arr1);

      function array_flatmap(arr, fn) {
        var arr1 = [];
        for (var i = 0; i < arr.length; i++) {
          var value = fn(arr[i], i, arr);
          if (value && value.constructor === Array) {
            for (var j = 0; j < value.length; j++) {
              arr1[arr1.length] = value[j];
            }
          } else {
            arr1[arr1.length] = value;
          }
        }
        return arr1;
      }

reduce实现其他方法

• 实现filter
• 实现every
• 实现some
• 实现map
• 实现flatmap
  实现filter

        var arr=[1,2,3,4,5,6,7];
        var arr1=arr.reduce(function(value,item){
           if(item>3) value.push(item);
           return value;
        },[]);
        console.log(arr1);

实现every

    var arr=[1,2,3,4,5,6,7];
      var bool=arr.reduce(function(value,item){
          if(value && item<=3) value=false;
          return value;
      },true);
    console.log(bool);  

实现some

    var arr=[1,2,3,4,5,6,7];
    var bool=arr.reduce(function(value,item){
    if(!value && item>8) value=true;
        return value;
    },false);
    console.log(bool);

实现map

    var arr1=arr.reduce(function(value,item){
        value.push(item+10);
        return value;
    },[]);
    console.log(arr1);

实现flatMap

    var arr = [1, 2, 3, 4, 5, [2, [3, 4], 5], [4, 5, 6, 7]];
    var arr1=arr.reduce(function(value,item){
        return value.concat(item);
    },[]);
    console.log(arr1);
    var arr=[1,2,3,4,5,6];
    var str=arr.reduce(function(value,item,index){
        return value+","+item;
    });
    console.log(str);

练习

    var arr=[
        {id:1001,name:"外星人电脑",info:"配置超高的PC电脑",price:35999,num:5},
        {id:1002,name:"苹果笔记本",info:"配置超高的笔记本",price:16990,num:3},
        {id:1003,name:"电竞椅",info:"人体工学电竞椅",price:26000,num:6},
        {id:1004,name:"电竞桌",info:"带超大显示器的桌子",price:13000,num:6},
    ]
        var arr1=arr.filter(function(item){
            return item.id===1003;
        });
        console.log(arr1);

        var o=arr.reduce(function(value,item){
            if(item.id===1002) value=item;
            return value;
        },null);
        console.log(o);

6.indexOf和lastIndexOf

• indexOf 在数组中查找某个元素的下标，如果这个元素存在，返回这个元素的下标，如果找不到就返回-1
• var index=arr.indexOf(查找什么元素，从什么位置开始查找);

var arr = [1, 2, 3, 5, 2, 7, 9, 10];
var index=arr.indexOf(2,2);
console.log(index);

重构方法-indexOf

var arr = [1, 2, 3, 5, 2, 7, 9, 10];
function array_indexOf(arr,item,formIndex){
          if(formIndex===undefined) formIndex=0;
          for(var i=formIndex;i<arr.length;i++){
              if(arr[i]===item) return i;
          }
          return -1;
      }

      console.log(array_indexOf(arr,2,2))

      var index=arr.lastIndexOf(2,4);
      console.log(index);

重构方法-indexOf

var arr = [1, 2, 3, 5, 2, 7, 9, 10];
      function array_lastIndexOf(arr,item,formIndex){
          if(formIndex===undefined) formIndex=arr.length;
          while(formIndex>=0){
              if(arr[formIndex]===item) return formIndex;
              formIndex--;
          }
          return -1;
      }

      var index=array_lastIndexOf(arr,2,4);
      console.log(index);

四道题目

      在数组中查找2所在的所有下标
      var arr=[1,2,4,2,3,4,2,22,1,2,2,2,3,2];

        var arr1=[];
        var index=-1;
        while(~(index=arr.indexOf(2,index+1))) arr1.push(index);
         console.log(arr1); 

      var arr1=[];
         arr.forEach(function(item,index){
             if(item===2) arr1.push(index);
         });
         console.log(arr1);

        var arr1=arr.reduce(function(value,item,index){
            if(item===2) value.push(index);
            return value;
         },[]);
         console.log(arr1); 

       在数组中删除相同的元素（去重）

        for(var i=0;i<arr.length;i++){
             for(var j=i+1;j<arr.length;j++){
                 if(arr[i]===arr[j]){
                     arr.splice(j,1);
                     j--;
                 }
             }
         }  

       var arr = [1, 2, 5, 3, 2, 4, 1, 2, 3, 5, 2, 1, 3, 2];
      var arr1 = [];
       for(var i=0;i<arr.length;i++){
           var bool=false;
          for(var j=0;j<arr1.length;j++){
              if(arr[i]===arr1[j]){
                  bool=true;
                  break;
              }
          }
          if(!bool) arr1.push(arr[i]);
       }

      xt: for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr1.length; j++) {
          if (arr[i] === arr1[j]) continue xt;
        }
        arr1.push(arr[i]);
      }
      console.log(arr1);

       
        for(var i=0;i<arr.length;i++){
            if(arr1.indexOf(arr[i])<0) arr1.push(arr[i]);
        }
        console.log(arr1); 


         将两个数组中相同的元素放在一个新数组中
        var arr=[1,4,2,6,3,2,6,3];
        var arr1=[4,6,7,9,0,2,2,6];

        var arr2=arr.reduce(function(value,item){
            if(arr1.indexOf(item)>-1 && value.indexOf(item)<0) value.push(item);
            return value;
        },[]);
        console.log(arr2);



             将两个数组中不同的元素放在一个新数组中
      var arr=[1,4,2,6,3,2,6,3];
        var arr1=[4,6,7,9,0,2,2,6];

        var arr2=arr.concat(arr1);
        var arr3=[];
        arr2.forEach(function(item,index){
            var list=arr2.reduce(function(value,item1,index1){
                if(item===item1) value.push(index1);
                return value;
            },[]);
            if(list.length===1) arr3.push(item);
        })
        console.log(arr3);
        
        arr=deEmphasis(arr);
        arr1=deEmphasis(arr1);
        console.log(arr,arr1);

        var arr2=arr.concat(arr1)
        var arr3=arr2.reduce(function(value,item,index){
            var list=arr2.reduce(function(value1,item1,index1){
                if(item===item1) value1.push(index1);
                return value1;
            },[]);
            if(list.length===1) value.push(item);
            return value;
        },[]);

        console.log(arr3);