手写Js数组常见内置函数

128 阅读3分钟

1.Array.prototype.find

  • 作用:找到数组中满足回调函数的第一个元素并返回,找不到则返回undefined
  • 参数1:传入一个回调函数(又叫测试函数),该回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
const arr = [1, 10, 5, 7]

// find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
const res = arr.find(item =>
  item > 2
)
console.log(res)

//实现自己的find方法
Array.prototype.myFind = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this //this实际上就是调用该方法的数组
  for (let i = 0; i < arr.length; i++) {
    if (callback.call(thisArg, arr[i], i, arr)) {
      return arr[i]
    }
  }
}

const res2 = arr.myFind(item => item === 3)
console.log(res2)//undefined

2.Array.prototype.findIndex

  • 作用:返回数组中满足测试函数的第一个元素的索引;若没有找到对应元素则返回-1
  • 参数1:传入一个回调函数,该回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
const arr = [1, 10, 5, 7]

Array.prototype.myFindIndex = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this
  for (let i = 0; i < arr.length; i++) {
    if (callback.call(thisArg, arr[i], i, arr)) {
      return i
    }
  }
  // 找不到符合的元素返回-1 不是返回undefined
  return -1
}

const resIndex1 = arr.findIndex(item => item === 10)
console.log(resIndex1)//1

const resIndex2 = arr.myFindIndex(item => item === 100)
console.log(resIndex2)//-1

3.Array.prototype.map

  • 作用:返回一个新数组,这个新数组由原数组中的每个元素都调用一次测试函数后的返回值组成
  • 参数1:传入一个回调函数,回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
const arr = [1, 10, 5, 7]

// map()方法返回一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成
const arr1 = arr.map(item => item * 2)
console.log(arr1)

Array.prototype.myMap = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const res = []
  const arr = this
  for (let i = 0; i < arr.length; i++) {
    let newValue = callback.call(thisArg, arr[i], i, arr)
    res.push(newValue)
  }

  return res
}

const arr2 = arr.myMap(item => item * 2)
console.log(arr2)//[2, 20, 10, 14]

4.Array.prototype.filter

  • 作用:返回一个新数组,这个新数组由原数组中满足测试函数的元素组成
  • 参数1:传入一个回调函数,该回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
const arr = [1, 7, 55, 23, 19]

const res = arr.filter(item => item > 10)
console.log(res)

Array.prototype.myFilter = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this
  const res = []
  for (let i = 0; i < arr.length; i++) {
    if (callback.call(thisArg, arr[i], i, arr)) {
      res.push(arr[i])
    }
  }

  return res
}

console.log(arr.myFilter(item => item > 10))//[54, 23, 19]

5.Array.prototype.reduce

  • 作用:根据传入的初始值和数组每个元素进行累加,并返回该累加值
  • 参数1:传入一个回调函数,该回调函数接收到两个参数,第一个参数是上一次累加的值,第二个参数是当前遍历的元素
  • 参数2:初始化值,如果初始化值不传,则会将数组的第一个元素作为初始化值,然后数组是从第二个元素开始遍历
const arr = [1, 10, 5, 7]

Array.prototype.Myreduce = function (callback, initVal) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this
  if (arr.length === 0) {
    throw new TypeError("Reduce of empty array with no initial value")
  }

  let sum = initVal === undefined ? arr[0] : initVal
  let i = initVal === undefined ? 1 : 0
  for (; i < arr.length; i++) {
    sum = callback(sum, arr[i])
  }
  return sum
}

console.log(arr.Myreduce((preValue, currentValue) => {
  return preValue + currentValue
}, 10))//33

6.Array.prototype.some

  • 作用:验证数组中是否至少有一个元素满足测试函数,有则返回true; 反之,返回false
  • 参数1:传入一个回调函数,该回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
Array.prototype.mySome = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this
  for(let i = 0; i < arr.length; i++) {
    if(callback.call(thisArg, arr[i], i, arr)) {
      return true
    }
  }
  return false
}

console.log(arr.mySome(item => item === 5))

7.Array.prototype.every

  • 作用:验证数组中所有元素都满足测试函数,条件成立返回true; 反之,返回false
  • 参数1:传入一个回调函数,该回调函数被调用时会被传入三个参数,依次是value、index、arr(数组本身)
  • 参数2:传入一个this,用于给回调函数绑定该this
const arr = [1, 10, 5, 7]

const arr1 = arr.every(item => item >= 1)
console.log(arr1)

Array.prototype.myEvery = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(`${callback}is not a function`)
  }

  const arr = this
  for (let i = 0; i < arr.length; i++) {
    if(!(callback.call(thisArg, arr[i], i, arr))) {
      return false
    }
  }

  return true
}

const arr2 = arr.myEvery(item => item > 1)
console.log(arr2)//false

8.Array.prototype.concat

  • 作用:将当前数组和其他数组的元素合并到一起,返回一个新的数组
  • 参数:传入一个或多个数组
Array.prototype.myConcat = function (...args) {
  let res = this
  for (const item of args) {
    res = [...res, ...item]
  }
  return res
}
const arr1 = [1, 2, 3]
const arr2 = ["a", "b", "c"]
const arr3 = ["hhhhh"]
console.log(arr1.myConcat(arr2))//[ 1, 2, 3, 'a', 'b', 'c' ]
console.log(arr1.myConcat(arr2, arr3))//[ 1, 2, 3, 'a', 'b', 'c', 'hhhhh']

总结:以上就是简单点实现一些内置函数,还是有很多边界情况没做处理