归纳整理JavaScript数组实例的9个方法

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

归纳整理JavaScript数组实例的9个方法

【相关推荐:javascript视频教程、web前端】

前言

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

wolai-minder-bnb37bcPyseaQgUJyTG6S4-a52X2wzr2DFkqe.png

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

立即学习“Java免费学习笔记(深入)”;

map_filter_reduce_mDwI7IUidr.png

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  {  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  {  return item > 2})console.log(res) // [ 3 ]

some

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

纳米搜索 纳米搜索

纳米搜索:360推出的新一代AI搜索引擎

纳米搜索 30 查看详情 纳米搜索

实现代码如下:

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  v + 10, 10)) // 40console.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  {  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视频教程、web前端】

以上就是归纳整理JavaScript数组实例的9个方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/545934.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
苹果手机如何设置微信手写输入法
上一篇 2025年11月9日 17:37:51
Linux日志级别如何设置最合理
下一篇 2025年11月9日 17:37:56

相关推荐

  • Chrome浏览器怎么阻止网站在后台同步_禁止网站后台同步操作设置

    Chrome浏览器怎么阻止网站在后台同步_禁止网站后台同步操作设置Chrome浏览器怎么阻止网站在后台同步_禁止网站后台同步操作设置Chrome浏览器怎么阻止网站在后台同步_禁止网站后台同步操作设置Chrome浏览器怎么阻止网站在后台同步_禁止网站后台同步操作设置

    可通过禁用后台同步权限、移除已授权站点、启用节电模式及使用扩展程序四种方法阻止Chrome网站后台同步。首先在设置中进入“隐私和安全”→“网站设置”→“后台同步”,关闭全局功能或屏蔽特定网站;其次在“已获权限的网站”中删除目标站点的同步权限;然后通过访问chrome://settings/perfo…

    2026年9月24日 用户投稿
    800
  • sublime怎么配置React开发环境_sublime搭建React开发环境步骤

    sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤

    首先安装Package Control,再通过它安装Babel、Emmet、SublimeLinter等插件;接着将.js/.jsx文件语法设为JavaScript (Babel)以支持JSX高亮;然后配置ESLint实现代码检查;最后可选配置构建系统运行npm start命令。 要在 Sublim…

    2026年9月24日 用户投稿
    000
  • sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

    sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

    首先安装Node.js和Prettier,再通过Package Control安装JsPrettier插件,配置prettier_cli_path、node_path及auto_format_on_save为true,确保保存时自动格式化JS代码。 Sublime Text 虽然轻量,但通过插件可以…

    2026年9月24日 用户投稿
    700
  • PHP实时输出如何防止XSS攻击_PHP实时输出安全防范XSS攻击

    防止XSS攻击需坚持三重防护:首先对用户输入进行严格验证与白名单过滤,使用filter_var等函数校验数据格式;其次根据输出上下文进行恰当转义——HTML正文和属性用htmlspecialchars(),JavaScript变量用json_encode(),URL参数用urlencode();最后…

    2026年9月24日
    200
  • php数据如何实现文件断点续传_php数据大文件上传解决方案

    断点续传通过文件分片、唯一hash标识、服务端记录上传状态实现,前端切片上传并查询已传分片,PHP后端存储分片并在完成后合并,同时提供状态接口支持续传,需注意hash一致性与临时文件清理。 大文件上传在Web开发中是个常见需求,尤其是涉及视频、备份文件或资源包时。PHP本身对文件上传有一定限制,但通…

    2026年9月24日
    000
  • PHP 中如何将 JSON 数组值声明为变量

    本文介绍了如何在 PHP 中从数据库获取数据并将其编码为 JSON 格式,然后通过 AJAX 请求传递到另一个页面。重点讲解了如何在接收页面解析 JSON 数据,并将 JSON 数组中的特定值提取并赋值给变量,以便在后续的 PHP 函数中使用。 从数据库获取数据并编码为 JSON 首先,我们需要从数…

    2026年9月24日
    000
  • Laravel 表单多动作处理:区分同一路由下的提交操作

    本教程将详细介绍如何在 laravel 应用中,通过一个 html 表单的多个提交按钮触发不同的后端操作,而无需为每个操作创建单独的表单或路由。核心方法是为提交按钮添加 `name` 和 `value` 属性,然后在控制器中根据这些属性的值来判断执行哪种业务逻辑,从而实现如更新用户角色和删除用户等多…

    2026年9月24日
    000
  • 动态表单输入中多答案数据处理教程

    本教程旨在解决Web开发中,如何高效处理包含动态数量答案的表单提交数据,特别是当需要更新现有问题及其关联答案时。文章将详细阐述前端表单的命名策略以及后端PHP如何解析这些动态输入,以准确获取答案内容及其对应的数据库ID,从而实现数据的精准更新,并提供最佳实践建议。 理解动态答案更新的挑战 在构建问答…

    2026年9月24日
    100
  • 使用 PHP 解析 JSON 文件并在网页上显示特定数据

    本文旨在帮助开发者学习如何使用 PHP 解析 JSON 文件,并提取其中的特定数据,将其以结构化的方式展示在网页上。我们将通过一个简单的示例,演示如何读取 JSON 数据,解析成 PHP 数组,并最终以 HTML 表格的形式呈现。 PHP 解析 JSON 数据 JSON (JavaScript Ob…

    2026年9月24日
    200
  • PHP Web开发:高效处理动态数量问题答案的表单更新与ID获取

    本教程探讨在PHP Web开发中,如何高效处理具有动态数量答案的问题更新表单。针对需要同时获取答案文本值及其对应ID的场景,文章详细介绍了通过合理设计表单字段命名和利用$_POST超全局变量的键值迭代特性,实现对动态生成答案字段的准确解析和数据提取,确保更新操作的完整性。 问题背景与挑战 在开发问答…

    2026年9月24日
    100
  • JavaScript 中替换 JSON 数据值的实用指南

    本文旨在提供一个清晰、简洁的 JavaScript 教程,讲解如何根据特定条件,利用响应数据中的值替换 JSON 数据中的指定字段。我们将通过实例代码演示如何处理包含 “All” 值的 Emp_Id 字段,并使用响应数据中的 ID 值进行替换,最终生成期望的 JSON 数据结…

    2026年9月24日
    200
  • Laravel Blade中条件隐藏元素的优雅实践

    本文探讨了在Laravel Blade模板中如何高效地实现HTML元素的条件隐藏。针对传统@if-@else语句导致代码冗余的问题,教程提出使用Blade的内联三元运算符在style属性中动态控制display: none,从而避免重复代码,提升模板的可读性和维护性。此外,还将介绍如何利用CSS类和…

    2026年9月24日
    200
  • VSCode主题开发:创建动态色彩主题的进阶技术解析

    动态主题需通过外部插件监听系统事件实现,核心是利用vscode.themeColor API响应主题切换,结合语义化作用域与Semantic Highlighting精准控制配色逻辑,实现智能自适应视觉体验。 想让VSCode主题随环境自动切换色彩?动态主题不只是换个配色那么简单。核心在于理解VSC…

    2026年9月23日
    500
  • PHP同页面无限次表单提交与显示:防止数据覆盖的实现技巧

    本教程详细阐述了如何在php中实现同页面多次表单提交而不覆盖先前数据的方法。核心策略是利用html的数组命名输入(`name=”field[]”`)来收集多个值,并在每次页面刷新时,通过隐藏输入字段重新提交已有的数据,从而在不依赖数据库的情况下,实现“无限”次提交并显示所有历…

    2026年9月23日
    100
  • VS Code自动化测试:持续集成与测试覆盖率

    VS Code通过插件和工具集成支持自动化测试、CI流程与覆盖率分析。①配置Jest或pytest等框架,结合Test Explorer UI插件实现测试运行与调试;②利用GitHub Actions等CI服务,在代码推送后自动执行测试,通过插件在编辑器内查看状态;③启用Coverage Gutte…

    2026年9月23日
    100
  • 悟空浏览器如何使用全局媒体控制器_悟空浏览器多媒体播放控制中心使用技巧

    1、确保悟空浏览器通知权限开启,以激活系统媒体控制;2、检查网站是否配置Media Session API,必要时注入脚本补充元数据与控制函数;3、结合画中画与后台播放功能,维持媒体会话活跃,实现锁屏或切换应用时的持续控制。 如果您在使用悟空浏览器播放网页媒体时,希望利用系统级的媒体控制功能来管理播…

    2026年9月23日
    100
  • 使用正则表达式实现字符串大小写不敏感替换

    本文将介绍如何利用正则表达式,高效、简洁地实现字符串中特定单词的大小写不敏感替换,从而将所有形式的单词统一转换为指定大小写。通过运用正则表达式的“不区分大小写”模式,可以避免为每种大小写变体编写单独的替换条件,极大提升代码的简洁性和可维护性。 在编程实践中,我们经常会遇到需要将字符串中某个单词的所有…

    2026年9月23日
    600
  • PHP如何设置视频自动播放_PHP设置视频自动播放方法

    答案:PHP通过生成含autoplay和muted属性的HTML5 video标签实现视频自动播放。具体描述:PHP动态输出视频路径与播放设置,结合autoplay、muted、controls等属性,在浏览器限制下提升自动播放成功率,尤其用于背景视频循环播放场景。 PHP 本身是服务器端语言,不能…

    2026年9月23日
    2200
  • 在PHP中将JSON数组值声明为变量

    本文介绍了如何在PHP中从数据库获取数据并将其编码为JSON数组,然后通过AJAX调用将其传递到另一个页面。重点讲解了如何在接收数据的页面中解析JSON数据,并将JSON数组中的特定值提取为PHP变量,以便在后续的函数或查询中使用。 从数据库获取数据并编码为JSON 首先,我们需要从数据库中获取数据…

    2026年9月23日
    1200
  • PHP:根据条件动态禁用表格中的按钮

    本文旨在解决在PHP中,根据表格行中两列的值是否相等,动态禁用对应按钮的问题。通过修改循环遍历数据并生成HTML表格的代码,在生成按钮时增加条件判断,实现当mi_name列和item_name列的值相等时,禁用该行的按钮。文章提供两种实现方式,并附带代码示例,帮助开发者快速实现此功能。 在PHP中动…

    2026年9月23日
    200

发表回复

登录后才能评论
关注微信