js数组原生api的使用和实现原理

211 阅读3分钟

这是我参与11月更文挑战的第7天,活动详情查看:2021最后一次更文挑战

我们在开发的过程中,在处理数组的时候,通常都使用过数组的API,我们也知道,数据的api其实是非常多的,比如forEach,sort,concat等等,有些比较常见,有些却是不太常用。我不知道大家在使用的时候,有没有想过,这种方法是这么从0到1,使用最基本的原生js去实现的呢???

接下来就给大家简单的介绍几种,所有的实现方式都是小编自己写的,性能啥的没有考虑的很全面哈,希望大家可以批评指正~

1.slice()不改变原数组 数组切割,可接受一个或者两个参数,即(返回项的起始位置,结束位置)。若一个,即表示从该参数指定的位置开始,到当前数组末尾的所有项。若两个,则表示起始到结束位置之间的所有项,包含起始位置但是不包含结束位置的项。

arr = [1,2,3,4,5] arr.slice(1,3) [2,3]

arr = [1,2,3,4,5] arr.slice(-2) [4,5] 数组的总长度 + (-2) = 3

2.splice()改变原数组

向数组中插入数据,始终返回一个数组。该返回的数组为从原始数组中删除的项。

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

删除:指定一个参数,删除该参数为索引前的所有项,不包含该项

arr.splice(2)------>arr = [3,4]

指定两个参数(删除的起始位置,要删除的项个数),包含起始位置

arr.splice(2,1)------>arr = [3]

插入:指定三个数(起始位置,0,要插入的项值)

arr.splice(3,0,100)----->arr = [1,2,3,100,4]插入在索引位置前面

替换:指定三个数(起始位置,要替换的项数,要替换的项值)

arr.splice(0,2,100)----->arr = [100,3,4]

  1. sort sort是我们用来排序的,那么他的实现原理,你又知道多少呢???

实现的思路有很多,这里我们是通过双层for循环,来实现的。

欢迎大家补充其他的方法哦

Array.prototype.sorts=function(){
         for(var i=0;i<arr.length;i++){
                       var min = i;
                        for(var j=i+1;j<arr.length;j++){
                          if(arr[j]<arr[min]){
                                min = j
                         }
                        }
                         var temp = arr[i]
                             arr[i] = arr[min]
                             arr[min] = temp
                     }  
                       return arr;
         }

4.reverse 反转

reverse算是比较简单的了,我们只需要两两交换位置,即可以实现反转的操作

可以自己动手写写看哦,下面这种方法仅供参考

  Array.prototype.newReverse= function(){
             for(i=0,j=this.length-1;j>i;j--,i++){
                 var temp = this[i]
                     this[i] = this[j]
                     this[j] = temp
             }
             return this
         }
         var a = [1,2,3,4,5,6,7,8]
         a.newReverse()
         console.log(a)
  1. 入栈push

    这个更简单了,只需要获取当前数组的长度,并且给他末尾增加一项就可以啦~

  Array.prototype.myPush = function(item){
            this[this.length] = item;
             return this.length
         }
         var a = [1,2,3,4]
         a.myPush(5)
         console.log(a)

6.出栈pop

这里直接把长度减1就可以啦,但是要注意返回值为删除的那一项的值哦

  Array.prototype.myPop = function(){
            var b=this.length;
            var result = this[b-1];
            this.length = b - 1;
            return result;
        }
        var a = [1,2,3,4]
        console.log(a.myPop())
        console.log(a);
  1. 入队unshift

这里要把新加的数据追加到数组的第一位,这里不能想当然的把arr[0]=xxx,这样的话,他会覆盖原来的第一项,明显与我们数组的unshift是不同的。所以要做的第一件事情就是把数组所有的位置向后移一位,然后再把第一项设置为我们新加的数据~

 
 Array.prototype.myUnshift = function(item){
          this.length = this.length+1
          for(var i=this.length-1;i>=0;i--){
            this[i]=this[i-1]
          }
          this[0]=item
 
          return this.length
      }
        var a = [1,2,3,4]
         a.myUnshift(100)
         console.log(a)

8.出队shift

       Array.prototype.myShift = function(){
          var result = this[0]
          for(var i=0;i<this.length-1;i++){
            this[i] = this[i+1]
          }
          this.length = this.length-1
          return result;
       }
        var a = [1,2,3,4]
         a.myShift()
         console.log(a)

上面就是本篇文章的全部内容啦,希望大家能够批评指正哦~~~