js 过滤 json 数据

article/2024/5/21 21:32:46

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.ngui.cc/article/show-2038932.html

相关文章

Lasso多变量时序预测 基于Lasso多变量时序预测 (多输入单输出)

文章目录 效果一览文章概述订阅专栏只能获取一份代码部分源码参考资料效果一览 文章概述 Lasso多变量时序预测 基于Lasso多变量时序预测 (多输入单输出) 订阅专栏只能获取一份代码 部分源码 %------

初学python记录:力扣39. 组合总和

题目: 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限…

three.js第一章(把three.js的官方文档下载到本地)

目录 打开three.js官网下载three.js打开本地three.js 打开three.js官网 three.js官网 下载three.js 1.进入gethub 点击版本号,进入gethub 2.下载three.js 点击下载 下载完之后,解压缩包, 进入文件,不要忘记 下载node_m…

探讨广播电视工程中无功补偿与谐波治理的办法

随着我国经济社会和科学技术的不断发展,新时期人们对于高品质生活的追求也在逐渐提高,特别是在文化追求方面,人们的需求日益多样,当前广播电视台发展过程中,由于相关的设备规模和数量不断增加,电视台工程的…

基于SpringBoot+Vue的物业管理系统 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库:Mysql5.7/8.0 数据表:28张 开发语言:Java(jdk1.8) 开发工具:idea 前端技术:vue 后端技术:SpringBoot 功能简介 项目获取关键字:物业…

DRF ModelSerializer序列化类

ModelSerializer序列化类 【0】准备 模型表创建 from django.db import modelsclass Book(models.Model):name models.CharField(max_length64, verbose_name书名)price models.DecimalField(max_digits6, decimal_places2, verbose_name价格)publish models.ForeignKey(…

(2024,时控交叉注意力(T-GATE),缓存和复用交叉注意力图)交叉注意力使文本到图像扩散模型的推理变得麻烦

Cross-Attention Makes Inference Cumbersome in Text-to-Image Diffusion Models 公和众和号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0. 摘要 4. 交叉注意力的时间分析 4.1. 交叉注意力图…

中医药性笔记

当归 补血。 当归,腾讯医典

C++:map和set的使用

一、关联式容器介绍 在学习map和set之前,我们接触到的容器有:vector、list、stack、queue、priority_queue、array,这些容器统称为序列式容器,因为其底层为线性序列的数据结构,里面存储的是元素本身。 关联式容器也是用…

鸿蒙入门09-CheckBox组件

参数 注意 : 配合 CheckBoxGroup 使用 参数形式 : Checkbox( options?: { name?: string, group?: string } ) 参数名 参数类型 是否必填 默认值 参数描述 name string 否 - 多选框名称 group string 否 - 多选框群组名称 属性 名称…