文章缩略图

总结整理JavaScript数组实例的9个方法

2022-08-25 00:00:00 技术教程 25804 阅读需130分钟
图标

本文最后更新于2022-08-25 00:00:00已经过去了976天 请注意内容时效性

热度 112 评论 0 点赞97
钞能力。你在哪?此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“钞能力。你在哪?”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

给大家带来了关于javascript的相关知识,主要介绍了JavaScript数组实例的9个方法,文章围绕主题展开详细的内容介绍没具有一定的参考价值,需要的朋友可以参考一下。

归纳整理JavaScript数组实例的9个方法 总结整理JavaScript数组实例的9个方法 技术教程

前言

手写JS原生API在面试中很常见,今天努力工作之余(摸鱼的时候)翻到了MDN文章中关于数组实例方法这部分,正好无聊就手写几个实例方法玩玩,复习一下基础内容,并记录一下。

归纳整理JavaScript数组实例的9个方法 总结整理JavaScript数组实例的9个方法 技术教程

如果你还不知道数组实例中迭代方法有什么区别,可以看下面这张图:

归纳整理JavaScript数组实例的9个方法 总结整理JavaScript数组实例的9个方法 技术教程

map

这个方法会返回一个新的数组,数组中的每一项都是执行过map提供的回调函数结果。

实现代码如下:

  1. const map = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.  
  7.   // 定义一个空数组,用于存放修改后的数据
  8.   let res = []
  9.   for (let i = 0; i  {
  10.   return item * 2
  11. })
  12. console.log(res) // [ 2, 4, 6 ]

filter

这个方法会返回一个新的数组,数组中的值是满足filter提供的回调函数的值,

实现代码如下:

  1. const filter = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.  
  7.   // 定义一个空数组,用于存放符合条件的数组项
  8.   let res = []
  9.   for (let i = 0; i  {
  10.   return item > 2
  11. })
  12. console.log(res) // [ 3 ]

some

该方法会判断数组中的每一项,如果有一项满足回调函数中条件就返回true都不满足则返回false

实现代码如下:

  1. const some = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.   let flag = false
  7.   for (let i of array) {
  8.     if (fun(i)) {
  9.       flag = true
  10.       break
  11.     }
  12.   }
  13.   return flag
  14. }
  15. let res = some([1, 2, 3], item => {
  16.   return item > 2
  17. })
  18. console.log(res) // true

every

该方法会判断数组中的每一项,如果所有项满足回调函数中条件就返回true否则返回false

实现代码如下:

  1. const every = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.   let flag = true
  7.   for (let i of array) {
  8.     if (!fun(i)) {
  9.       flag = false
  10.       break
  11.     }
  12.   }
  13.   return flag
  14. }
  15. let res = every([1, 2, 3], item => {
  16.   return item > 0
  17. })
  18. console.log(res) // true

reduce

该方法会让数组中的每个元素执行我们提供的回调函数,并将结果汇总返回

实现代码如下:

  1. const reduce = (array, fun, initialValue) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.   let accumulator = initialValue
  7.   for (let i = 0; i  v + 10, 10)) // 40
  8. console.log(reduce(arr, v => v + 10, 10)) // 40

forEach

这个方法比较简答了,就是遍历数组方法,数组中的每一项都执行回调函数

实现代码如下:

  1. const forEach = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.  
  7.   for (let i of array) {
  8.     fun(i)
  9.   }
  10. }
  11. let res = forEach([1, 2, 3], item => {
  12.   console.log(item)
  13. })

forEach

这个方法比较简答了,就是遍历数组方法,数组中的每一项都执行回调函数

实现代码如下:

  1. const forEach = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.  
  7.   for (let i of array) {
  8.     fun(i)
  9.   }
  10. }
  11. let res = forEach([1, 2, 3], item => {
  12.   console.log(item)
  13. })

find和findIndex

这两个方法比较类似,一个返回元素,一个返回元素的索引,这里就编写一个

实现代码如下:

  1. const myFind = (array, fun) => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  6.   let res
  7.   for (let i = 0; i  {
  8.   return item > 2
  9. })
  10. console.log(res) // 3

join

该方法可以将数组中的所有元素根据指定的字符串进行拼接,并返回拼接后的字符串,

实现代码如下:

  1. const join = (array, separator = ',') => {
  2.   // 类型约束
  3.   if (Object.prototype.toString.call(array) !== '[object Array]')
  4.     throw new TypeError(array + ' is not a array')
  5.   if (typeof separator !== 'string')
  6.     throw new TypeError(separator + ' is not a string')
  7.   let res = array[0].toString()
  8.   for (let i = 0; i 
你可能想看:
继续阅读本文相关话题
更多推荐
发表评论

共有[ 1 ]人发表了评论

🥰 😎 😀 😘 😱 🤨 🥵 😔 😤 😡 😭 🥱 🤡 ☠️ 💖 🤖 💢 💥

评论列表
暂无评论

暂时没有评论,期待您的声音!

品牌认证 W3C认证 MYSSL认证 TrustAsia 安全签章
扫码访问手机版
二维码图片