手写JS常用数组方法

378 阅读2分钟

手动实现常用Array方法

本文会带大家实现一些常用的JS数组方法,如果有误,还望各位大佬斧正!

1.map()

map()  方法返回值是一个新数组,新数组由原数组中每个元素都调用一次回调函数后的返回值组成。

语法: const result = arr.map(callback[,thisArg])

map方法接受两个参数:callback、thisArg
(a)thisArg:执行callback函数时值被用作this。 (b)callback(currentValue[,index,array]):生成新数组元素的回调函数,接受三个参数:

  • currentValue是callback数组中正在处理的当前值;
  • index是callbakc数组中正在处理的当前值的索引;
  • array是map方法调用的数组。
Array.prototype.myMap = function (callback,thisArg){

    if(typeof callback !== 'function') {
        throw Error(`${callback} is not a function`)
    }
    
    const result = []
    for(let i = 0; i < this.length; i++){
        result.push(callback.call(thisArg,this[i],i,this))
    }
    return result
}

const reuslt = [1,2,3].myMap(item => item+1) --> // result -> [2,3,4]

2.forEach()

forEach()  方法对数组的每个元素执行一次给定的函数。

语法: const result = arr.forEach(callback[,thisArg])

forEach方法接受两个参数:callback、thisArg。
(a)thisArg:执行callback函数时值被用作this。 (b)callback(currentValue[,index,array]):生成新数组元素的回调函数,接受三个参数:

  • currentValue是callback数组中正在处理的当前值;
  • index是callbakc数组中正在处理的当前值的索引;
  • array是forEach方法调用的数组。
Array.prototype.myForEach = function (callback,thisArg){

    if(typeof callback !== 'function') {
        throw Error(`${callback} is not a function`)
    }
    
    for(let i = 0; i < this.length; i++){
       callback.call(thisArg,this[i],i,this)
    }
}

[1,2,3].myForEach(item => console.log(item)) --> // 1 // 2 // 3

3.filter ()

filter()  方法创建一个新数组, 其包含原数组中所有通过回调函数的测试的元素。

语法: const result = arr.filter(callback[,thisArg])

filter方法接受两个参数:callback、thisArg。
(a)thisArg:执行callback函数时值被用作this。 (b)callback(currentValue[,index,array]):生成新数组元素的回调函数,接受三个参数:

  • currentValue是callback数组中正在处理的当前值;
  • index是callbakc数组中正在处理的当前值的索引;
  • array是filter方法调用的数组。
Array.prototype.myFilter = function (callback,thisArg){

    if(typeof callback !== 'function') {
        throw Error(`${callback} is not a function`)
    }
    const result = []
    for(let i = 0; i < this.length; i++){
       if( callback.call(thisArg,this[i],i,this) ){
           result.push(item)
       }
    }
    
    return result
}

const result = [1,2,3].myFilter(item => item > 2) --> // [3]

4.concat ()

concat()  方法用来合并两个及超过两个以上的数组。不改变原数组,返回新数组。

语法: const array3 = array1.concat(array2)

Array.prototype.myConcat = function (array1,...args) {
    if(!Array.isArray(array1)){
        throw Error(`${array1} is not a array`)
    }
    const result = [...this,...array]
    args.forEach( item => {
        if( Array.isArray(item) ){
            result.push(...item)
        }else{
            result.push(item)
        }
    })
    return result
}

const result = [1,2,3].myConcat([4,6],8)
// [1,2,3,4,6,8,9]

5.every()

every()  方法用来测试一个数组内的所有元素是否都能通过回调函数的测试,返回一个布尔值。若数组是空数组,此方法在任何情况下都返回true

语法: const result = arr.every(callback[,thisArg])

every方法接受两个参数:callback、thisArg。
(a)thisArg:执行callback函数时值被用作this。 (b)callback(currentValue[,index,array]):生成新数组元素的回调函数,接受三个参数:

  • currentValue是callback数组中正在处理的当前值;
  • index是callbakc数组中正在处理的当前值的索引;
  • array是every方法调用的数组。
Array.prototype.myEvery = function (callback,thisArg){

    if(typeof callback !== 'function') {
        throw Error(`${callback} is not a function`)
    }
    
    for(let i = 0; i < this.length; i++){
       if( callback.call(thisArg,this[i],i,this) ){
           continue
       }
       return false
    }
    
    return true
}

const result = [1,2].myEvery( i => i > 2 ) --> // true

6.some()

some()  方法用来测试一个数组内是否至少存在一个元素通过回调函数的测试,返回一个布尔值。若数组是空数组,此方法在任何情况下都返回false

语法: const result = arr.some(callback[,thisArg])

every方法接受两个参数:callback、thisArg。
(a)thisArg:执行callback函数时值被用作this。 (b)callback(currentValue[,index,array]):生成新数组元素的回调函数,接受三个参数:

  • currentValue是callback数组中正在处理的当前值;
  • index是callbakc数组中正在处理的当前值的索引;
  • array是every方法调用的数组。
Array.prototype.mySome = function (callback,thisArg){

    if(typeof callback !== 'function') {
        throw Error(`${callback} is not a function`)
    }
    
    for(let i = 0; i < this.length; i++){
       if( callback.call(thisArg,this[i],i,this) ){
           return true
       }
       continue
    }
    
    return false
}

const result = [1,2].mySome( i => i % 2 === 0 ) --> // true