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.mzph.cn/news/826137.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应用编程之进程(三-通信篇)

所谓进程间通信指的是系统中两个进程之间的通信,不同的进程都在各自的地址空间中、相互独立、隔离,所以它们是处在于不同的地址空间中,因此相互通信比较难,Linux 内核提供了多种进程间通信的机制。 大部分的程序是不要考虑进程间…

Microchip逆市扩张,接连收购2家公司

尽管年初传来降薪停工的消息,全球领先的半导体解决方案供应商Microchip并未因此停下扩张的脚步。相反,该公司在短短的一个月内,接连宣布收购两家公司,展现了其坚定的市场布局和前瞻的战略眼光。 4月11日,Microchip成功…

二进制OpenStack

二进制搭建OpenStack 1.环境准备 1.1机器的准备 主机名服务器配置操作系统IP地址controller-node4C8Gcentos7.9172.17.1.117computer-node4C8Gcentos7.9172.17.1.118 1.2网络架构 [rootcotroller-node ~]# ip a 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noque…

css 中backdrop-filter使用

一、概念与用途 backdrop-filter 用于在元素背后的区域应用图形效果。它允许我们改变元素背后内容的视觉效果&#xff0c;从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数&#xff0c;我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。 二、支持的滤镜函…

linux对网络的监控操作学习--端口、流量、IP

文章目录 linux对网络的监控操作学习--端口、流量、IP理解Netfilter队列设置iptables规则以使用队列使用用户空间程序处理队列中的数据包linux用户空间使用Python实现使用rust实现功能 综合应用注意事项其他实现方式nftablesfirewalldufw (Uncomplicated Firewall)tc (Traffic …

Java面试必问题46:Gateway详解以及使用方法

Gateway&#xff08;网关&#xff09;是一种在微服务架构中起到请求转发、路由和过滤的作用的组件。它作为系统的入口点&#xff0c;接收所有的客户端请求&#xff0c;并将它们转发到相应的服务上进行处理。以下是Gateway网关的作用和使用方式的说明&#xff1a; 作用&#xff…

Java JNI调用本地方法1(调用C++方法)

一、基础概念 1、JNI&#xff08;Java Native interface&#xff09;:sun公司提供的JNI是Java平台的一个功能强大的接口&#xff0c;实现java和操作系统本地代码的相互调用功能&#xff0c;系统本地代码通常是由其他语言编写的&#xff0c;如C。 二、JNI使用步骤 1、定义一个J…

选定进行压缩的卷可能已损坏。请使用chkdsk来修复损坏问题,然后尝试再次压缩该卷

Windows Server 2008R2环境下&#xff0c;进行磁盘重新分区时&#xff0c;想要对系统盘进行“压缩卷”&#xff0c;结果报错提示“选定进行压缩的卷可能已损坏。请使用Chkdsk来修复损坏问题&#xff0c;然后尝试再次压缩该卷。”这是硬盘出现了坏道导致的&#xff0c;硬盘出错无…

中仕公考:教师编制和事业单位d类一样吗?

教师编制和事业单位D类在考试内容、专业要求、晋升途径等方面有很大的不同中仕为大家介绍一下&#xff1a; 考试内容&#xff1a;教师编的考试包括教育综合知识和学科专业知识&#xff0c;有的地区会额外考公共基础知识。事业单位D类的考试更侧重于职业能力倾向测验和综合应用…

Linux的学习之路:14、文件(1)

摘要 有一说一文件一天学不完&#xff0c;细节太多了&#xff0c;所以这里也没更新完&#xff0c;这里部分文件知识&#xff0c;然后C语言和os两种的文件操作 目录 摘要 一、文件预备 二、c文件操作 三、OS文件操作 1、系统文件I/O 2、接口介绍 四、思维导图 一、文件…

uniapp全局监听分享朋友圈或朋友

把大象装进冰箱需要几步&#xff1a; 1、创建shart.js文件 export default{data(){return {//设置默认的分享参数//如果页面不设置share&#xff0c;就触发这个默认的分享share:{title:标题,path:/pages/index/index,imageUrl:图片,desc:描述,content:内容}}},onLoad(){let ro…

若依前后端部署到一起

引用&#xff1a;https://blog.csdn.net/qq_42341853/article/details/129127553 前端改造&#xff1a; 配置打包前缀 修改router.js 编程hash模式&#xff1a; 前端打包&#xff1a;npm run build:prod 后端修改&#xff1a; 添加thymeleaf包&#xff0c;和配置文件 spri…

JAVA 项目<果园之窗>_1

这几天有空看能不能把水果店管理系统整出来&#xff0c;目标是整个网页版本的&#xff0c;以我的电脑做服务器&#xff0c;数据存在mysql中 以我目前的理解整个项目大致可分为前端部分、后端部分、数据库部分&#xff0c;也就这三个部分 目前打开并运行了一个别人的项目&#…

leetcode(474.最大连续1的个数)(python)

看数据范围知&#xff0c;复杂度不超过&#xff08;nlogn&#xff09;&#xff0c;不过感觉LeetCode很少卡算法时间。 题目要求数组的*****的个数&#xff0c;想到dp动态规划 dp[i][0]表示前i个数字&#xff0c;以第i个元素结尾&#xff0c;全为1的个数 dp[i][1]表示前i个数…

微信流量主、小程序、广告自助引流

微信流量主、小程序、广告自助引流 通过机器人实现自动化流程操作&#xff0c;解放双手&#xff0c;聚焦于核心价值 体验地址&#xff1a; 链接: 点击进入 功能描述&#xff1a; 启动执行时&#xff0c;抓取广告链接数据 对数据进行处理&#xff0c;广告链接形成信息列表并…

React间接实现一个动态组件逻辑

在开发一个浏览器插件的时候&#xff0c;用的plasmo框架和react支持的&#xff0c;里面使用react开发一个菜单功能&#xff0c;但是又不想使用react-router&#xff0c;所以就想着能不能使用一个很简单的方式做一个替代方案&#xff1f;那肯定是可以。 我在引入一个组件后&…

vue2响应式 VS vue3响应式

Vue2响应式 存在问题&#xff1a; 新增属性&#xff0c;删除属性&#xff0c;界面不会更新。 直接通过下标修改数组界面不会自动更新。 Vue2使用object.defineProperty来劫持数据是否发生改变&#xff0c;如下&#xff1a; 能监测到获取和修改属性&#xff1a; 新增的属性…

C++笔记:类和对象(一)

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量&#xff0c;类型就像是定义了数据的规则&#xff0c;而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型&#xff0c;而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

多标签与多分类的区别

多标签与多分类的区别 多标签多分类样本类别个数一个或多个只有一个输出一个标签维度的向量&#xff0c;每一维度是类别的概率[0.1, 0.6, 0.1, 0.1, 0.8]输出属于每个类别的概率[0.1, 0.6, 0.1, 0.1, 0.1]标签多标签的每一维度都是0或者1&#xff0c;类别可以共存&#xff0c;…

移除元素(C++)

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…