广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript数组中迭代方法怎么实现
  • 377
分享到

JavaScript数组中迭代方法怎么实现

2024-04-02 19:04:59 377人浏览 独家记忆
摘要

今天小编给大家分享一下javascript数组中迭代方法怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我

今天小编给大家分享一下javascript数组中迭代方法怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

JavaScript数组中迭代方法怎么实现

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

JavaScript数组中迭代方法怎么实现

map

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

实现代码如下:

const map = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  // 定义一个空数组,用于存放修改后的数据
  let res = []
  for (let i = 0; i < array.length; i++) {
    res.push(fun(array[i]))
  }
  return res
}
// 测试
let res = map([1, 2, 3], item => {
  return item * 2
})
console.log(res) // [ 2, 4, 6 ]

filter

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

实现代码如下:

const filter = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  // 定义一个空数组,用于存放符合条件的数组项
  let res = []
  for (let i = 0; i < array.length; i++) {
    // 将数组中的每一项都调用传入的函数,如果返回结果为true,则将结果push进数组,最后返回
    fun(array[i]) && res.push(array[i])
  }
  return res
}
// 测试
let res = filter([1, 2, 3], item => {
  return item > 2
})
console.log(res) // [ 3 ]

some

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

实现代码如下:

const some = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  let flag = false
  for (let i of array) {
    if (fun(i)) {
      flag = true
      break
    }
  }
  return flag
}
let res = some([1, 2, 3], item => {
  return item > 2
})
console.log(res) // true

every

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

实现代码如下:

const every = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  let flag = true
  for (let i of array) {
    if (!fun(i)) {
      flag = false
      break
    }
  }
  return flag
}
let res = every([1, 2, 3], item => {
  return item > 0
})
console.log(res) // true

reduce

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

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

forEach

这个方法比较简答了,就是遍历数组方法,数组中的每一项都执行回调函数,实现代码如下:

const forEach = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  for (let i of array) {
    fun(i)
  }
}
let res = forEach([1, 2, 3], item => {
  console.log(item)
})

find和findIndex

这两个方法比较类似,一个返回元素,一个返回元素的索引,这里就编写一个,实现代码如下:

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

join

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

实现代码如下:

const join = (array, separator = ',') => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof separator !== 'string')
    throw new TypeError(separator + ' is not a string')
  let res = array[0].toString()
  for (let i = 0; i < array.length - 1; i++) {
    res += separator + array[i + 1].toString()
  }
  return res
}
// 测试
let res = join([1, 2, 3], '-')
console.log(res) // 1-2-3

以上就是“JavaScript数组中迭代方法怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网node.js频道。

--结束END--

本文标题: JavaScript数组中迭代方法怎么实现

本文链接: https://www.lsjlt.com/news/98634.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组中迭代方法怎么实现
    今天小编给大家分享一下JavaScript数组中迭代方法怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2022-10-19
  • JavaScript 数组迭代的方法
    这篇文章主要介绍“JavaScript 数组迭代的方法”,在日常操作中,相信很多人在JavaScript 数组迭代的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java...
    99+
    2022-10-19
  • JavaScript数组迭代的方法
    今天小编给大家分享一下JavaScript数组迭代的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2022-10-19
  • JavaScript中如何实现数组迭代
    这篇文章主要为大家展示了“JavaScript中如何实现数组迭代”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何实现数组迭代”这篇文章吧...
    99+
    2022-10-19
  • JavaScript数组有哪些迭代方法
    这篇文章主要介绍了JavaScript数组有哪些迭代方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ES5为数组定义了5个迭代方法。每种方...
    99+
    2022-10-19
  • 怎么实现NumPy迭代数组
    这篇文章主要介绍“怎么实现NumPy迭代数组”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么实现NumPy迭代数组”文章能帮助大家解决问题。迭代数组NumPy中引入了 nditer 对象来提供一种...
    99+
    2023-07-05
  • 怎么用JavaScript数组迭代方法对每个数组项进行操作
    这篇文章主要讲解了“怎么用JavaScript数组迭代方法对每个数组项进行操作”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用JavaScript数组迭...
    99+
    2022-10-19
  • 数组迭代reduce和reduceRight方法怎么用
    本文小编为大家详细介绍“数组迭代reduce和reduceRight方法怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“数组迭代reduce和reduceRight方法怎么用”文章能帮助大家解决疑惑,...
    99+
    2022-10-19
  • 怎么使用JavaScript中的迭代方法
    这篇文章主要介绍“怎么使用JavaScript中的迭代方法”,在日常操作中,相信很多人在怎么使用JavaScript中的迭代方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • JavaScript数组迭代find和findIndex操作的方法
    这篇“JavaScript数组迭代find和findIndex操作的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收...
    99+
    2022-10-19
  • JavaScript数组迭代every和some的操作方法
    这篇文章主要介绍了JavaScript数组迭代every和some的操作方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组迭代every和some的操作...
    99+
    2022-10-19
  • javascript迭代器怎么实现
    本篇内容主要讲解“javascript迭代器怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript迭代器怎么实现”吧! ...
    99+
    2022-10-19
  • JavaScript中数组常用的迭代处理方法有哪些
    这篇文章主要介绍“JavaScript中数组常用的迭代处理方法有哪些”,在日常操作中,相信很多人在JavaScript中数组常用的迭代处理方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • JS中数组的迭代方法和归并方法
    本篇内容介绍了“JS中数组的迭代方法和归并方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!数组的迭代方法...
    99+
    2022-10-19
  • es6中迭代数组的方法有哪些
    这篇文章主要介绍了es6中迭代数组的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6中迭代数组的方法有哪些文章都会有所收获,下面我们一起来看看吧。迭代方法:1、map,用于根据某种规则映射数组,得...
    99+
    2023-07-04
  • javascript基于牛顿迭代法怎么实现求浮点数的平方根
    这篇文章主要介绍javascript基于牛顿迭代法怎么实现求浮点数的平方根,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先是牛顿迭代法原理:比如我们要求a的平方根,首先随便猜一个近...
    99+
    2022-10-19
  • JavaScript类数组和可迭代对象如何实现
    本篇内容介绍了“JavaScript类数组和可迭代对象如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2022-10-19
  • 关于PHP数组迭代器的使用方法实例
    近来在开发一个视力筛查电子报告系统的产品,这个产品的作用是自动提取视力筛查过程中得到的屈光检查数据,并结合数据自动生成通俗易懂且专业的电子报告,以方便家长可以通过公众号或H5链接查阅。 要实现这个需求,第一步是对验光设备里打印出来的纸质报告...
    99+
    2015-05-29
    php数组迭代器 如何实现迭代器 数组迭代方法
  • java 中ArrayList迭代的两种实现方法
    java 中ArrayList迭代的两种实现方法Iterator与for语句的结合来实现,代码很简单,大家参考下。实现代码:package cn.us; import java.util.ArrayList; import java.uti...
    99+
    2023-05-31
    java arraylist 迭代
  • 怎么在java中访问和迭代数组
    这期内容当中小编将会给大家带来有关怎么在java中访问和迭代数组,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作