js 过滤 json 数据

js 过滤 json 数据

  • 一、一维数组过滤
    • 1、filter
    • 2、map
  • 二、复杂数组过滤
  • 三、树形数据过滤
  • 四、过滤附件数组 — filter、map、findIndex


一、一维数组过滤

1、filter

let arr = [
  {id: 1,name: "张三",age: 18},
  {id: 2,name: "李四",}
]
arr = arr.filter(item => !!item.age);
console.log(arr) // [{id: 1,name: "张三",age: 18}]

2、map

let arr = [
  {id: 1,name: "张三",},
  {id: 2,name: "李四",}
]
let ids = arr.map(item => item.id);
console.log(ids) // [1,2]

二、复杂数组过滤

map、filter 结合使用

/**
* sub.id: 123
* row.id: "id-123"
* 输出sub.id和row.id不同的项
*/
let new_arr = old_arr.map((item, index) => {
  if (!!item.children)
    item.children = item.children.filter(sub => sub.id !== row.id)
  return item;
}).filter(item => item.children && item.children.length > 0);

三、树形数据过滤

递归

// 过滤有文件的数据
filterTree(tree) {
  const result = [];
  for (const item of tree) {
    const res = this.heplFun(item);
    if (res) {
      result.push(res);
    }
  }
  return result;
},
// 过滤文件的条件
heplFun(item) {
  // 判断条件地方
  if (item.pageCount) {
    return item;
  }
  const curent = { ...item, children: [] };
  if (item.children && item.children.length > 0) {
    for (const child of item.children) {
      const res2 = this.heplFun(child);
      if (res2) {
        curent.children.push(res2);
      }
    }
  }
  return curent.children.length > 0 ? curent : null;
},

四、过滤附件数组 — filter、map、findIndex

/**
* 给fileList数组的url加api前缀
* previewSrcList 过滤fileList的url组成新数组
* Index 附件预览时图片地址在previewSrcList数组中的下标
*/
fileList.filter(item => {
	return item.url = item.url.indexOf('/Api') > -1 ? item.url : '/Api' + item.url
})
previewSrcList = fileList.map(item => item.url)
Index = previewSrcList.findIndex(item => item === file.url);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/559130.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 11.盛最多水的容器(暴力->双指针)

给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不能倾斜容器。 示例 …

Postman调用OpenApi接口

首先你需要科学上网。。。。。 请求方式:post 请求地址:https://api.openai.com/v1/chat/completions 请求头: Authorization : Bearer key Content-Type : application/json Body : { "messages": [{ "role": &quo…

【精简改造版】大型多人在线游戏BrowserQuest服务器Golang框架解析(1)——功能清单

1.匿名登录 2.服务连接 3.新手引导 4.随机出生点 5.界面布局 6.玩法帮助 7.NPC会话 8.成就系统 9.成就达成 10.用户聊天 11.战斗&信息展示 12.药水使用 13.副本传送 14.玩家死亡 15.超时断开

OpenHarmony 视图缩放组件—subsampling-scale-image-view

简介 深度缩放视图,图像显示,手势平移缩放双击等 效果图(旋转、缩放、平移) 下载安装 ohpm install ohos/subsampling-scale-image-view OpenHarmony ohpm 环境配置等更多内容,请参考如何安装 OpenHarmony ohpm 包 使…

Servlet第四篇【request对象常用方法、应用】

什么是HttpServletRequest HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。 简单来说,要得…

mysql四种引擎区别

MySQL 提供了多种不同的数据库引擎,其中最常见的有 MyISAM、InnoDB、MEMORY 和 BLACKHOLE。这四个引擎分别有以下特点: 1. MyISAM MyISAM 是 MySQL 的默认引擎。它对于只有较少的修改、大量读取的应用场景具有良好的性能。它不支持事务处理,也…

理解字符串常量池(JVM)

大纲 思考 如何查看字符串常量池(StringTable)? 使用 jclasslib 插件打开字节码,选择 常量池 -> 显示所选 -> CONSTANT_String_info,左侧过滤后的内容即为字符串常量池 字符串常量池、方法区、永久代和元空间的…

Dynamic Wallpaper for Mac:动态壁纸让桌面更生动

Dynamic Wallpaper for Mac是一款为苹果电脑用户精心设计的动态壁纸软件,它以其丰富的功能和精美的壁纸库,为用户带来了更加生动和个性化的桌面体验。 Dynamic Wallpaper for Mac v17.8中文版下载 这款软件支持多种动态壁纸,用户可以根据自己…

unity学习(86)——细节优化

东西已经做出来了,现在需要的是优化,说得简单,做起来难。 1.122包的优化,避免重复创建! 2.为何会出现一边动,一边不动的情况。重复登录后依旧是unity可以看到移动,但是exe那边看不到移动&#…

数据结构PT1——线性表/链表

1:顺序存储实现(数组实现) Data: a1 a2 .....ai ai1 .... an .... typedef struct LNode *List; //指向LNode的指针,这是typedef的,你可以随时声明,而不加typedef只是创建一个 struct LNode{ //结构体成员ElementT…

Vue.js------Vue组件基础

能够理解Vue组件概念和作用能够掌握封装创建组件能力能够使用组件之间通信能够完成todo案例 一.Vue组件创建和使用 1.折叠面板-实现多个 创建一个文件夹demo 具体步骤请参考vue.js---vue基础 ⚫ 解决方案: 采用vue提供的单.vue文件-组件方式来封装一套然后复用 在component…

Jackson 2.x 系列【24】Spring Web 集成

有道无术,术尚可求,有术无道,止于术。 本系列Jackson 版本 2.17.0 源码地址:https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 前言2. Spring Web3. Jackson2ObjectMapperBuilder4. Jackson2ObjectMapperFa…

探索传感器世界:类型与应用详解

传感器是一种能感知并测量特定物理量、化学量或其他参数,并将其转换为可供处理、记录或控制的电信号的装置。 物联网传感器设备种类繁多,以下是一些常见的类型: 一、 温度传感器 1、热电阻温度传感器:利用金属的电阻随温度变化的…

Java编程题 | 数组元素交换

大家可以关注一下专栏,方便大家需要的时候直接查找,专栏将持续更新~ 题目描述 编写一个Java程序,输入一个整数数组,将最大的元素与第一个元素交换,最小的元素与最后一个元素交换,然后输出修改后的数组…

PHP定时任务框架taskPHP3.0学习记录4宝塔面板bash定时任务(轮询指定json文件字段后确定是否执行、环境部署、执行日志、文件权限)

一 需求说明 宝塔面板中,读取指定 /www/wwwroot/lockdata/cron/webapp.json文件;配置定时任务脚本task.sh;当读取webapp.json中,如果cron_task1,则执行任务php start.php start命令行;完成命令后,执行cron…

Vue3基本功能介绍

文章目录 Vue3组件中的模板结构可以没有根标签div组合式APIRefReactive函数回顾Vue2响应式Vue3实现响应式对比reactive和refSetup注意点计算属性与监听computedWatchWatchEffectVue3生命周期自定义hook函数toRef其他组合APIshallowReactiveshallowRefreadonly和shallowOnlyToRa…

PostgreSql-Install

PostgreSql源码安装 一、源代码下载二、操作系统配置三、编译安装四、启动数据库五、相关命令 PostgreSQL是一个强大的 开源对象关系数据库系统,它使用并扩展了SQL语言,并结合了许多功能,可以安全地存储和扩展最复杂的数据工作负载。 一、源…

Targeted influence maximization in competitive social networks

abstract 利用口碑效应的广告对于推销产品是相当有效的。在过去的十年中,人们对营销中的影响力最大化问题进行了深入的研究。影响力最大化问题旨在将社交网络中的一小群人识别为种子,最终他们将引发网络中最大的影响力传播或产品采用。在网络营销的实际场…

HTML、CSS常用的vscode插件 +Css reset 和Normalize.css

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 ✍HTML、CSS常用的vscode插件🍎1 HTML 标签同步重命名 – Auto Re…

大型网站系统架构演化实例_7.使用NoSQL和搜索引擎

1.使用NoSQL和搜索引擎 随着网站业务越来越复杂,对数据存储和检索的需求也越来越复杂,网站需要采用一些非关系数据库技术如NoSQL和非数据库查询技术如搜索引擎。NoSQL和搜索引擎都是源自互联网的技术手段,对可伸缩的分布式特性具有更好的支持…