手写JavaScript数组api(彻底弄懂数组api！)

写在前面

api会用不就行了吗？不是，有的面试官让你手撕。
傻了吧，最好的反击就是学会它然后装傻。
“之前没写过，我试试吧”，然后写出无懈可击的答案就可以了

---

代码的仓库地址：数组的手写api

改变自身的方法

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

Array.prototype.myPush=function(){
    for(let i=0;i<arguments.length;i++){
        this[this.length]=arguments[i]
    }
    return this.length
}
let arr=[1,2,3]
arr.myPush(4)
console.log(arr);

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

Array.prototype.myUnshift=function(){
    let arrLength=this.length
    let arr=this
    for(let i=arrLength+arguments.length-1;i>=0;i--){
        if(i>arguments.length-1){
            arr[i]=arr[i-arguments.length]
        }else{
            arr[i]=arguments[i]
        }
    }
    return arr.length
}
let arr=[1,2,3]
arr.myUnshift(4)
console.log(arr);

pop()

删除数组的最后一个元素并返回删除的元素。

Array.prototype.myPop=function(){
    let arr=this
    if(arr.length===0) return undefined
    let ans=arr[this.length-1]
    this.length=this.length-1
    return ans
}
let arr=[1,2,3]
let res=arr.myPop()
console.log(arr,res);

shift()

删除并返回数组的第一个元素。

Array.prototype.myShift=function(){
    let arr=this
    if(arr.length===0) return undefined
    let ans=arr[0]
    for(let i=1;i<arr.length;i++){
        arr[i-1]=arr[i]
    }
    this.length=this.length-1
    return ans
}
let arr=[1,2,3]
let ans=arr.myShift()
console.log(arr,ans);

reverse()

反转数组的元素顺序。

Array.prototype.myReverse=function(){
    let arr=this
    let arrLength=arr.length
    let copyArr=Array.from(arr)
    for(let i=0;i<arrLength;i++){
        arr[arrLength-i-1]=copyArr[i]
    }
    return arr
}
let arr=[1,2,3]
let ans=arr.myReverse()
console.log(ans);

copyWithin()

从数组的指定位置拷贝元素到数组的另一个指定位置中。

Array.prototype.myCopyWithin=function(target,start,end=this.length){
    let arr=this
    for(let i=start;i<end;i++){
        arr[target]=arr[i]
        target++;
    }
    return arr
}
let arr=['a','b','c','d','e']
arr.copyWithin(0,3,4)
console.log(arr);
arr=['a','b','c','d','e']
arr.myCopyWithin(0,3,4)
console.log(arr);
arr.myCopyWithin(1,3)
console.log(arr);

fill()

使用一个固定值来填充数组。

Array.prototype.myFill=function(value,start=0,end=this.length){
    let arr=this
    for(let i=start;i<end;i++){
        arr[i]=value
    }
    return arr
}
let arr=[1,2,3,4]
arr.myFill(0,2,4)
console.log(arr);
arr.myFill(5,1)
console.log(arr);
arr.myFill(6)
console.log(arr);

不改变自身的方法

concat()

连接两个或更多的数组，并返回结果。

Array.prototype.myConcat=function(){
    let arr=this
    for(let i=0;i<arguments.length;i++){
        for(let j=0;j<arguments[i].length;j++){
            arr[this.length]=arguments[i][j]
        }
    }
    return arr
}
let arr=['123','456']
let arr1=['1','2','3']
let arr2=['4','5','6']
let res=arr.myConcat(arr1,arr2)
console.log(arr);

slice()

选取数组的一部分，并返回一个新数组。

Array.prototype.mySlice=function(start,end=this.length){
    let arr=this
    let res=[]
    if(start<0){
        for(let i=start+end;i<end;i++){
            res.push(arr[i])
        }
    }else{
        for(let i=start;i<end;i++){
            res.push(arr[i])
        }
    }
    return res
}

let arr=[1,2,3,4,5,6]
let res=arr.mySlice(-4)
console.log(arr,res);
res=arr.mySlice(1)
console.log(res);

indexOf()

搜索数组中的元素，并返回它所在的位置。

Array.prototype.myIndexOf=function(num){
    let arr=this
    for(let i=0;i<arr.length;i++){
        if(arr[i]===num){
            return i
        }
    }
    return -1
}
let arr=[1,2,3,4,5,6]
console.log(arr.myIndexOf(5));

lastIndexOf()

搜索数组中的元素，并返回它最后出现的位置。

Array.prototype.myLastIndexOf=function(num){
    let arr=this
    for(let i=arr.length-1;i>=0;i--){
        if(arr[i]===num) return i
    }
    return -1
}

let arr=[1,2,3,4,4,4]
console.log(arr.myLastIndexOf(4));

join()

把数组的所有元素放入一个字符串。

Array.prototype.myJoin=function(separator=','){
    let arr=this
    let str=''
    for(let i=0;i<arr.length;i++){
        str+=arr[i]
        if(i!=arr.length-1){
            str+=separator
        }
    }
    return str
}

let arr=[1,2,3,4,5,6]
let res=arr.myJoin('-')
console.log(arr,res);

toString()

把数组转换为字符串，并返回结果。

Array.prototype.myToString=function(separator=','){
    let arr=this
    let str=''
    for(let i=0;i<arr.length;i++){
        str+=arr[i]
        if(i!=arr.length-1){
            str+=separator
        }
    }
    return str
}
let arr=[1,2,3,4,5,6]
let arr1=[1,2,'a','b']
res=arr1.myToString()
console.log(arr1,res);

数组的遍历方法

forEach()

数组每个元素都执行一次回调函数。

Array.prototype.myForEach=function(fn,thisArg){
    let arr=this
    for(let i=0;i<arr.length;i++){
        fn.call(thisArg,arr[i])
    }
}

let obj={
    num:10
}
let arr=[1,2,3,4,5,6]
arr.myForEach(function(value,index,arr){
    console.log(value+this.num);
},obj)
console.log(arr);

map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

Array.prototype.myMap=function(fn,thisArg){
    if(Object.prototype.toString.call(fn).slice(8,-1)!=="Function"){
        throw new error("The first argument must be a function!")
    }
    let result=[]
    let currentArr=this
    for(let i=0;i<currentArr.length;i++){
        result[i]=fn.call(thisArg,currentArr[i],i,currentArr)
    }
    return result
}
// console.log(Object.prototype.toString.call(123).slice(8,-1));

arr=[1,2,3,4,5,6]
console.log(arr.map((item,index,arr)=>{
    return item*2
}));
console.log(arr.myMap((item,index,arr)=>{
    return item+1
}));

filter()

检测数值元素，并返回符合条件所有元素的数组。

Array.prototype.myFilter=function(fn){
    if(Object.prototype.toString.call(fn).slice(8,-1)!=="Function"){
        throw new error("ths first argument must be Function!")
    }
    let arr=this
    let res=[]
    for(let i=0;i<arr.length;i++){
        if(fn(arr[i],i,arr)){
            res.push(arr[i])
        }
    }
    return res
}
let arr=[1,2,3,4,5,6,7,8,9]
let res=arr.myFilter((value,index,arr)=>{
    return value>4
})
console.log(arr,res);

every()

检测数值元素的每个元素是否都符合条件。

Array.prototype.myEvery=function(fn){
    let arr=this
    let count=0
    for(let i=0;i<arr.length;i++){
        if(fn(arr[i])){
            count++
        }
    }
    if(count===arr.length){
        return true
    }else{
        return false
    }
}

let arr=[1,2,3,4,5,6,7,8]
let res=arr.myEvery(value=>{
    return value>4
})
console.log(arr,res);
res=arr.myEvery(value=>{
    return value>0
})
console.log(res);

some()

检测数组元素中是否有元素符合指定条件。

Array.prototype.mySome=function(fn){
    let arr=this
    for(let i=0;i<arr.length;i++){
        if(fn(arr[i])) return true
    }
    return false
}

let arr=[1,2,3,4,5,6]
let res=arr.mySome(value=>{
    return value>4
})
console.log(arr,res);

reduce()

将数组元素计算为一个值（从左到右）。

Array.prototype.myReduce=function(fn,initValue){
    let arr=this
    let currentIndex=arguments.length===1?1:0
    let currValue=arguments.length===1?arr[0]:initValue
    for(let i=currentIndex;i<arr.length;i++){
        currValue=fn(currValue,arr[i])
    }
    return currValue
}
let arr=[1,2,3,4,5]
let result=arr.myReduce((preval,nextval)=>{
    return preval+nextval
},1)
console.log(result);

entries()

从数组 fruit 创建一个可迭代对象， 该对象包含了数组的键值对：

Array.prototype.myEntries=function(){
    let ans=[]
    for(let i=0;i<this.length;i++){
        ans[i]=[]
        ans[i].push(i)
        ans[i].push(this[i])
    }
    return ans
}
let arr=['12313','12','545']
console.log(arr.myEntries());