自定义工具函数库(二) 数组相关

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量381 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chilanzi/article/details/123621367
版权

自定义工具函数库(二) 数组相关

最终仓库：utils: 自定义工具库

以前的笔记：JS数组常用的方法

1. 数组声明式系列方法

1.1 map函数封装实现

map()方法创建一个新数组，其结果是该数组中的每个元素各自调用一次提供的函数后的返回值

循环，数组的每个元素都调用一次函数，并把每次循环得到的返回值都存好，循环结束后，把存好的数组返回。

// map函数的封装实现
function map(arr, callback) {
  let ret = []

  for (let i = 0; i < arr.length; i++) {
    ret.push(callback(arr[i], i))
  }

  return ret
}

测试：

<!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>map函数封装实现</title>
  <script src="./map.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result = map(arr, (item, index) => {
      console.log(index)
      return item + 1
    })

    console.log(result)


    // 原生
    // const result = arr.map((item, index) => {
    //   console.log(index)
    //   return item + 1
    // })

    // console.log(result)
  </script>
</body>

</html>

1.2 reduce函数

对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

循环遍历数组，并每次都把调用函数得到的值，重新赋值给ret变量，然后作为下一次调用函数时的第一个参数

// reduce函数的封装实现
function reduce(arr, callback, initValue) {
  let ret = initValue
  for (let item of arr) {
    ret = callback(ret, item)   // 每次调用都把最新的值重新赋给ret
  }

  return ret
}

测试：

<!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>reduce函数封装实现</title>
  <script src="./reduce.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4]
    // 自定义
    const result = reduce(arr,
      (preValue, curValue) => preValue + curValue,
      10)

    console.log(result)


    // 原生
    // const result = arr.reduce(
    //   (preValue, curValue) => preValue + curValue,
    //   0)

    // console.log(result)
  </script>
</body>

</html>

1.3 filter函数

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

循环，如果以该数组元素作为参数调用函数的返回值为true，则存好。

// filter函数的封装实现
function filter(arr, callback) {
  let ret = []
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i)) {
      ret.push(arr[i])
    }
  }

  return ret
}

测试：

<!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>filter函数封装实现</title>
  <script src="./filter.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result = filter(arr, (item, index) => index % 2 === 0)

    console.log(result)


    // 原生
    // const result = arr.filter(item => item >= 3)

    // console.log(result)
  </script>
</body>

</html>

1.4 find函数

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// find函数的封装实现
function find(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i)) {
      return arr[i]
    }
  }

  return undefined
}

测试：

<!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>find函数封装实现</title>
  <script src="./find.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result1 = find(arr, (item, index) => item >= 3)
    console.log(result1)

    const result2 = find(arr, (item, index) => item >= 10)
    console.log(result2)

    // 原生
    // const result = arr.find((item, index) => item >= 3)

    // console.log(result)
  </script>
</body>

</html>

1.5 findIndex函数

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

和find()函数类似，只不过是返回满足条件的第一个元素的索引，以及没有满足的是返回-1

// findIndex函数的封装实现
function findIndex(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i)) {
      return i
    }
  }

  return -1
}

测试：

<!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>findIndex函数封装实现</title>
  <script src="./findIndex.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result1 = findIndex(arr, (item, index) => item >= 3)
    console.log(result1)

    const result2 = findIndex(arr, (item, index) => item >= 10)
    console.log(result2)

    // 原生
    // const result = arr.findIndex((item, index) => item >= 10)

    // console.log(result)
  </script>
</body>

</html>

1.6 every函数

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

// every函数的封装实现
function every(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    if (!callback(arr[i], i)) {
      return false
    }
  }

  return true
}

测试：

<!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>every函数封装实现</title>
  <script src="./every.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result1 = every(arr, (item, index) => item >= 3)
    console.log(result1)

    const result2 = every(arr, (item, index) => item < 10)
    console.log(result2)

    // 原生
    // const result = arr.every((item, index) => item < 10)

    // console.log(result)
  </script>
</body>

</html>

1.7 some函数

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

// some函数的封装实现
function some(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i)) {
      return true
    }
  }

  return false
}

测试：

<!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>some函数封装实现</title>
  <script src="./some.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5]
    // 自定义
    const result1 = some(arr, (item, index) => item < 3)
    console.log(result1)

    const result2 = some(arr, (item, index) => item < 0)
    console.log(result2)

    // 原生
    // const result = arr.some((item, index) => item < 3)

    // console.log(result)
  </script>
</body>

</html>

2. 数组去重

2.1 forEach() + indexOf()

// 数组去重方法1：forEach() + indexOf()
function unique(arr) {
  const ret = []

  arr.forEach(item => {
    if (ret.indexOf(item) === -1) {   // 如果数组中不存在当前值，则存进去
      ret.push(item)
    }
  })

  return ret
}

2.2 forEach() + 容器(对象)

// 数组去重方法2：forEach() + 容器(对象)
function unique(arr) {
  const ret = []
  const obj = {}      // 键是数组之前出现过的元素，值是是否有出现过。
  // 出现过值是true，没出现过只是undefined

  arr.forEach(item => {
    if (obj[item]) {
      return
    }

    obj[item] = true
    ret.push(item)
  })

  return ret
}

2.3 Set + Array.from() 或 扩展运算符(…)

// 数组去重方法3：Set + Array.from() 或 扩展运算符(...)
function unique(arr) {
  let set = new Set(arr)
  // return Array.from(set)      // Array.from()可以通过可迭代对象(包括数组、Set等)创建一个新的数组

  return [...set]   // 使用ES6的扩展运算符`...`
}

3. concat函数

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

// concat函数的封装实现
function concat(arr, ...args) {
  const ret = [...arr]

  args.forEach(item => {
    if (Array.isArray(item)) {   // 如果是数组，则通过扩展运算符把数组中的元素push到新数组中
      ret.push(...item)
    } else {
      ret.push(item)
    }
  })

  return ret
}

测试：

<!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>concat函数实现</title>
  <script src="./concat.js"></script>
</head>

<body>
  <script>
    let arr = [1, 2, 3]

    // 自定义函数
    const result = concat(arr, [4, 5, 6], 7, 8, [9, 10])
    console.log(result)

    // 内置方法
    // const result = arr.concat([4, 5, 6], 7, 8)
    // console.log(result)
  </script>
</body>

</html>

4. slice数组切片

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

// slice函数实现
function slice(arr, begin, end) {
  if (arr.length === 0) {
    return []
  }

  begin = begin || 0    // 如果begin没有传，则从0开始切
  if (begin >= arr.length) {
    return []
  }

  end = end || arr.length

  const ret = []
  for (let i = 0; i < arr.length; i++) {
    if (i >= begin && i < end) {
      ret.push(arr[i])
    }
  }

  return ret
}

测试：

<!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>slice函数实现</title>
  <script src="./slice.js"></script>
</head>

<body>
  <script>
    let arr = [1, 2, 3, 4, 5, 6, 7]

    // 自定义函数
    const result1 = slice(arr, 2, 6)
    console.log(result1)

    const result2 = slice(arr)
    console.log(result2)

    const result3 = slice(arr, 2)
    console.log(result3)

    const result4 = slice(arr, 3, 1)
    console.log(result4)

    // 内置方法
    // const result = arr.slice(2, 6) // 截取索引在[2， 6)范围内的元素
    // console.log(result)
  </script>
</body>

</html>

5. 数组扁平化

数组扁平化是指将一个多维数组变为一维数组

内置方法flat：

let arr = [1, 2, [3, 4],
  [
    [5], 6
  ], 7
]

const result = arr.flat(Infinity)
console.log(result)		//  [1, 2, 3, 4, 5, 6, 7]

5.1 递归

// 数组扁平化(1): 通过concat和forEach实现，遇到多维数组时，通过递归调用flatten实现扁平化
function flatten(arr) {
  let ret = []

  arr.forEach(item => {
    if (Array.isArray(item)) {
      ret = ret.concat(flatten(item))   // 如果是数组，继续打平
    } else {
      ret = ret.concat(item)
    }
  })

  return ret
}

5.2 扩展运算符…

// 数组扁平化(2): 通过concat函数和扩展运算符...实现
function flatten(arr) {
  let ret = [...arr]

  while (ret.some(item => Array.isArray(item))) {
    ret = [].concat(...ret)
    // 举例：arr = [1, 2, 3, 4, [5, 6]]
    // 则ret = [].concat(1, 2, 3, 4, [5, 6]) = [1, 2, 3, 4, 5, 6]
  }

  return ret
}

5.3 toString / join + split + map

先通过toString或join把数组转成字符串，在通过split转换成数组，最后还需要通过map函数，把数组的每一个元素变回数字。(不考虑其他类型的数组的话)

function flatten(arr) {
  return arr.toString().split(',').map(item => Number(item))
  // return arr.join().split(',').map(item => Number(item))
}

5.4 reduce

遍历数组，如果是数组，则递归遍历，否则，通过concat拼接起来

function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

6. 数组分块

语法：chunk(array, size)

功能：将数组拆分成多个size大小长度的区块，每个区块组成小数组，整体组成一个二维数组

例子：[1, 2, 3, 4, 5, 6]调用chunk(arr, 4) => [[1, 2, 3, 4], [5, 6]]

// 数组分块：这里用了比较巧妙的方法。暂存分块好的数组为0时，把它push到ret数组中，然后通过数组的引用性质，给temp数组push值，从而也改变ret数组的值
function chunk(arr, size = 1) {
  let ret = []
  let temp = [] // 暂存分块好的数组，再push到ret中

  arr.forEach(item => {
    if (temp.length === 0) {
      ret.push(temp)
      // console.log(1, ret)   // 如需测试，请在node环境测试
    }

    temp.push(item)
    // console.log(2, ret)

    if (temp.length === size) {
      temp = []
    }
  })

  return ret
}

// console.log(chunk([1, 2, 3, 4, 5, 6, 7], 3))

7. 数组差集

  • 语法: difference(arr1, arr2)
  • 功能: 得到当前数组中所有不在arr中的元素组成的数组(不改变原数组)
  • 例子: difference([1,3,5,7], [5, 8]) ==> [1, 3, 7]
// 数组差集
function difference(arr1, arr2 = []) {
  if (arr1.length === 0) {
    return []
  }
  if (arr2.length === 0) {
    return arr1.slice()
  }

  let ret = arr1.filter(item => !arr2.includes(item))
  return ret
}

// console.log(difference([1, 2, 3, 4], [3, 4, 5]))
赤蓝紫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts的封装
qq_44743216的博客
05-18 3405
1、 新建Echarts.vue <template> <div ref="echart"></div> </template> <script> import * as echarts from 'echarts' export default { props:{ //接收参数 isAxisChart:{ //判断是柱状图/折线图,还是饼图 type:Boolean,
自定义js函数工具库
明平姚的博客
07-30 215
自定义js函数工具库
数据类型_array_es6新增的数组遍历方法
qq_43260366的博客
08-25 919
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEdSAZIc-1661410699409)(data:image/gif;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRP2hWx1-1661410699409)(data:image/gif;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DhJA9JsR-1661410699409)(data:image/gif;数组对象中，只需要每个元素的某个属性。....
【如何对数组去重】
qq_45786730的博客
02-21 1033
var arr1 = [1 ,2 ,3 ,2 ,3 ,4]; // 方式一：set arr = (Array.from( new Set(arr1)));//得到对象类型的去重结果 console.log(‘方式一’) console.log(arr) //方式二：定义函数实现 function unique(arr){ var brr = []; for( var i=0; i<arr.length;i++){ if(brr.i
自定义工具函数库(一) 函数相关
赤蓝紫の博客
03-19 806
自定义工具函数库(一) 函数相关 最终仓库：utils: 自定义工具库 之前在哔哩哔哩看的视频的笔记。整理了一下。 1.1 call 函数封装实现 原理：为传入的obj添加临时方法，然后去调用这个临时方法，这样子，这个方法的this就会指向调用它的对象了，最后还需要把临时方法删除掉。 // call函数封装实现 function call(fn, obj, ...args) { if (obj === undefined || obj === null) { // 如果call
JavaScript 自定义工具函数库
好好学习天天向上
03-25 1440
文章目录自定义工具函数库函数相关call()&apply()&bind()call(Fn,obj,.....args)apply(Fn,obj,args)bind(Fn,obj,...args)函数节流与函数防抖相关理解实现数组相关数组去重数组合并和切片数组扁平化数组分块删除数组中部分元素得到数组的部分元素 自定义工具函数库 函数相关 call()&apply()&bind() call(Fn,obj,…args) 语法：call(Fn,obj,…args) 功能: 执行Fn
自定义工具函数库
Mia的博客
05-31 284
这里写目录标题一、自定义封装各种工具类函数1. 函数相关1.1 call、apply、bind1.1.1 call、apply、bind区别语法延伸： globalThis1.1.2 call函数封装实现1.1.3 apply函数封装实现1.1.4 bind函数封装实现1.2 函数节流 & 函数防抖1.2.1 手写函数节流1.2.1 手写函数防抖2. 数组相关1.2.1 函数常用方法封装（实现方式不要求手写，不常用）1.2.2 数组去重 一、自定义封装各种工具类函数 1. 函数相关 1.1 call
【C语言】函数调用及创建，并将数组传参到函数
cz382487322的博客
12-10 2475
本文将介绍库函数和自定义函数的概念，并带大家了解形参和实参的关系，以及怎么用数组作为参数传进函数里。了解了库函数，我们的关注度应该聚焦在自定义函数上，自定义函数其实更加重要，也能给程序员写 代码更多的创造性。3.1函数的语法形式其实自定义函数和库函数是⼀样的，形式如下：ret_type是函数返回类型fun_name是函数名括号中放的是形式参数{}括起来的是函数体。
15个web前端自定义函数工具库
油墨香^-^的博客
06-30 360
1、call函数封装实现 // 手写call函数function call(Fn,obj,...arg){ // 如果obj为null或者undefined，则指向window if(obj === undefined || obj === null){ // globalThis是ES11的新特性，指向全局 obj = globalThis }
Jquery使用each函数实现遍历及数组处理
10-15
总结来说，jQuery的`each()`函数是处理数组和对象遍历的强大工具，它使得JavaScript中的迭代操作变得简单且易于理解。无论是在处理数组、JSON对象还是DOM元素，`each()`都能够提供高效、灵活的解决方案，极大地提高...
javascript 最常用的10个自定义函数[推荐]
10-29
JavaScript 自定义函数是编程中非常重要的工具，它们可以提高代码的可重用性和维护性。在不依赖外部库的情况下，掌握一些常用的自定义函数是非常有益的。以下介绍10个JavaScript中最常用的自定义函数，包括事件处理...
一些有用的自定义配置单元udf函数、特殊数组、json、数学、字符串函数。___下载.zip
04-18
___下载.zip" 提供的资源显然是关于Hive的自定义用户定义函数（UDF）和一些实用的函数库，这对于优化Hive查询和处理复杂的数据操作至关重要。 1. **自定义UDF（User Defined Functions）**： UDF是Hive提供的扩展...
atguigu-utils:尚硅谷前端工具函数库
05-13
尚硅谷大前端自定义工具函数库 说明 1. 包含以下8个方面 1). 函数相关 2). 数组相关 3). 对象相关 4). 字符串相关 5). 事件总线 6). 消息订阅与发布 7). Promise 8). ajax函数axios 9). 数据结构与算法 2. 使用 1). ...
jQuery 工具函数学习资料
12-09
jQuery 是一个广泛使用的JavaScript库，提供了许多方便的工具函数，以简化常见的DOM操作、事件处理、动画效果以及数据处理等任务。在这个学习资料中，我们将深入探讨几个关键的jQuery工具函数，包括URL字符串操作、...
【React 】开发环境搭建详细指南
lph159的博客
07-24 878
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 196
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 915
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 515
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
numpy函数库详解：数组操作与通用函数全览
numpy函数库是Python中一个核心且强大的数学计算库，它提供了多维数组对象、数据类型处理、索引和迭代操作，以及广泛的通用函数（ufunc）功能。这个文档详细介绍了NumPy 1.14.5版本的内容，涵盖了以下几个关键部分：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值