数组常用几个方法（sort、find、findIndex、filter、map、reduce、includes）的简单实现、

最新推荐文章于 2025-05-06 10:00:00 发布

ZL随心

最新推荐文章于 2025-05-06 10:00:00 发布

阅读量238

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44832362/article/details/128716223

版权

js 专栏收录该内容

12 篇文章

订阅专栏

该文章展示了如何使用JavaScript实现数组的常见方法，如mSort（排序）、mFind（查找元素）、mFindIndex（查找元素索引）、mFilter（过滤）、mMap（映射）、mIncludes（包含检查）以及mReduce（累加）。这些方法的实现有助于理解数组操作的底层逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组常用方法实现/使用</title>
</head>

<body>
  <script src="./Array.js"></script>

  <!-- 数组一些常用方法，实现 -->
  <script>
    const testBuf = [
      { name: '苹果', price: 3000 },
      { name: '小米', price: 1800 },
      { name: '华为', price: 2000 },
    ]
    const testBuf2 = [1, 2, 3, 4, 5]
    /**
     * a>b升序 a排b后面
     * a<b降序 a排b前面
     * 经过排序，数组顺序会改变
     */
    console.log('mSort', mSort(testBuf, (a, b) => a.price - b.price))

    /**
     * 查找元素,返回元素 
     */
    console.log('mFind', mFind(testBuf, (item) => item.name === '小米'))
    console.log('mFindIndex', mFindIndex(testBuf, (item) => item.name === '小米'))

    /**
     * filter方法实现
     */
    console.log('mFilter', mFilter(testBuf, (item) => item.price > 1800))

    /**
      * map方法实现
      */
    console.log('mMap', mMap(testBuf, (item) => `${item.name}新年快乐`))

    /**
      * includes方法实现
      */
    console.log('mIncludes', mIncludes(testBuf2, 3))

    /**
     * includes方法实现
     */
    console.log('mReduces', mReduces(testBuf, (pre, cur, index, arr) => {
      return pre += cur.price
    }, 0))
    console.log('reduce', testBuf.reduce((pre, cur, index, arr) => {
      return pre += cur.price
    }, 0))

    console.log('mReduces', mReduces(testBuf2, (pre, cur, index, arr) => {
      // return pre += cur
      pre = pre > cur ? pre : cur
      return pre
    }))
    console.log('reduce', testBuf2.reduce((pre, cur, index, arr) => {
      return pre += cur
    }))
  </script>

  <!-- 数组一些方法查漏补缺 -->
  <script>
    /**
     * 插入的值，开始位置，结束位置（超过则按照数组最大长度填充），
     * [1,2,3] ==> [1,6,6]
     */
    // console.log([1, 2, 3].fill(6, 1, 5));

    /**
     * 用于判断是不是数组
     * 是返回true 不是返回false
     */
    // console.log(Array.isArray(1));

    /**
     * 用于将带length属性的数据变成数组
     * 也可以将dom列表变成数组
     */
    // console.log(Array.from(new Set([1, 2, 3]), (value) => {
    //   console.log(value)
    //   // 不retrun则得到的值是undefined,加上回调作用有点类似于map
    //   return value
    // }));
  </script>
</body>

</html>

2、arrray.js文件

/**
 * @description sort 的实现
 * @params1 数组
 * @params2 callback
 * @return 返回一个排好序的数组
 */
function mSort (array, callback) {
  if (!Array.isArray(array)) return []

  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length - 1 - i; j++) {
      if (callback(array[j + 1], array[j]) < 0) {
        [array[j], array[j + 1]] = [array[j + 1], array[j]]
      }
    }
  }

  return array
}

/**
 * @description find 的实现
 * @params1 数组
 * @params2 callback
 * @return 返回找到的值
 */
function mFind (array, callback) {
  if (!Array.isArray(array)) return

  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      return array[i]
    }
  }
}

/**
 * @description findIndex 的实现
 * @params1 数组
 * @params2 callback
 * @return 将找到的值的下标返回
 */
function mFindIndex (array, callback) {
  if (!Array.isArray(array)) return

  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      return i
    }
  }

  return -1
}

/**
 * @description filter 的实现
 * @params1 数组
 * @params2 callback
 * @return 返回一个经过过滤的数组
 */
function mFilter (array, callback) {
  if (!Array.isArray(array)) return

  const tmpBuf = []
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      tmpBuf.push(array[i])
    }
  }

  return tmpBuf
}

/**
 * @description map 的实现
 * @params1 数组
 * @params2 callback
 * @return 返回一个映射后的数组
 */
function mMap (array, callback) {
  if (!Array.isArray(array)) return

  const tmp = [...array]

  for (let i = 0; i < array.length; i++) {
    tmp[i] = callback(tmp[i], i, tmp)
  }

  return tmp
}

/**
 * @description includes 的实现
 * @params1 数组
 * @params2 callback
 * @return 包含返回true 不包含返回 false
 */
function mIncludes (array, value) {
  if (!Array.isArray(array)) return

  for (let i = 0; i < array.length; i++) {
    if (array[i] === value) return true
  }

  return false
}


/**
 * @description reduce 的实现
 * @params1 数组
 * @params2 callback
 * @return 返回经过处理后的数组
 */
function mReduces (array, callback, initData) {
  if (!Array.isArray(array)) return

  let pre = undefined
  let i = 0
  if (initData !== undefined) {
    pre = initData
  } else {
    pre = array[0]
    i = 1
  }

  for (; i < array.length; i++) {
    pre = callback(pre, array[i], i, array)
  }

  return pre
}