JavaScript处理数组数据的示例详解
更新时间：2023年10月24日 08:20:52 作者：JackieDYH
这篇文章主要为大家详细介绍了JavaScript如何处理数组数据,包括数据匹配和剔除,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
数据
[
{
title: '市值',
prop: 'sz',
titleData: [
{
title: '市值',
label: '市值',
prop: 'sz',
isShow: false,
fixed: false,
width: 100,
align: 'left'
},
{
title: '持仓/市值',
label: '持仓/市值',
prop: 'ccsz',
isShow: false,
fixed: false,
width: 120,
align: 'left'
}
]
},
{
title: '持仓',
prop: 'cc',
titleData: [
{
title: '资金费率',
label: '资金费率',
prop: 'avgFundingRateByOi',
isShow: false,
fixed: false,
width: 100,
align: 'left'
},
{
title: '持仓',
label: '持仓',
prop: 'openInterest',
isShow: false,
fixed: false,
width: 100,
align: 'left'
}
]
}
]循环上面数组 并把titleData中的每一项和下面这个数组中每一项进行对比，单prop相等时，将下面的匹配项覆盖到上面对应的位置
[{
title: '持仓',
label: '持仓',
prop: 'openInterest',
fixed: false,
width: 100,
isShow: true,
align: 'left'
},
{
title: '持仓变化(24h)',
label: '持仓(24h%)',
prop: 'h24OiChangePercent',
fixed: false,
width: 100,
isShow: true,
align: 'left'
},
{
title: '多(4小时)',
label: '多(4h)',
prop: 'h4LongVolUsd',
fixed: false,
width: 100,
isShow: true,
align: 'left'
}]实现
data.forEach(item => {
item.titleData.forEach(titleItem => {
const match = newData.find(newItem => newItem.prop === titleItem.prop);
if (match) {
Object.assign(titleItem, match);
}
});
});会遍历data数组中的每个对象，然后对每个对象的titleData数组进行遍历。在遍历titleData数组的过程中，会查找与newData数组中具有相同prop属性的对象。如果找到匹配项，则使用Object.assign方法将匹配项的属性覆盖到titleData数组中的相应对象上。
最终，data数组中的titleData数组将被更新为匹配项的属性值。
const data = [
{
label: "收藏",
prop: "sc",
fixed: true,
width: 60,
isShow: true,
align: "center"
},
{
label: "排名",
prop: "pm",
fixed: true,
width: 60,
isShow: true,
align: "center"
},
{
label: "币种",
prop: "symbol",
fixed: true,
width: 90,
isShow: true,
align: "left"
},
{
label: "价格",
prop: "price",
fixed: false,
width: 100,
isShow: true,
align: "left"
},
{
title: "价格变化(24h)",
label: "价格(24h%)",
prop: "h24PriceChangePercent",
fixed: false,
width: 100,
isShow: true,
align: "left"
}
];
循环上面数组 把下面的数字和上面匹配prop，当上面数组存在下面的某一项时，将其isshow字段赋值为下面的，如果isshow为false时，将从上面数组中删除，如果不存在则追加到上面数组中
const newData = [
{
title: '持仓',
label: '持仓',
prop: 'openInterest',
fixed: false,
width: 100,
isShow: true,
align: 'left'
},
{
title: '持仓变化(24h)',
label: '持仓(24h%)',
prop: 'h24OiChangePercent',
fixed: false,
width: 100,
isShow: false,
align: 'left'
},
{
title: '多(4小时)',
label: '多(4h)',
prop: 'h4LongVolUsd',
fixed: false,
width: 100,
isShow: true,
align: 'left'
}
];
使用
newData.forEach(newItem => {
const matchIndex = data.findIndex(item => item.prop === newItem.prop);
if (matchIndex !== -1) {
if (newItem.isShow) {
data[matchIndex].isShow = true;
} else {
data.splice(matchIndex, 1);
}
} else {
data.push(newItem);
}
});
console.log(data);到此这篇关于JavaScript处理数组数据的示例详解的文章就介绍到这了,更多相关JavaScript处理数组数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript简单实现合并两个Json对象的方法,结合实例形式分析了json对象的遍历、添加实现合并的相关操作技巧,需要的朋友可以参考下2017-10-10
javascript alert函数的替代方案，一个自定义的对话框的方法2010-03-03
Web前端JavaScript中findIndex方法使用示例
这篇文章主要介绍了Web前端JavaScript中findIndex方法使用的相关资料,findIndex() 返回第一个符合条件的数组子项的下标,找到符合条件的之后就不在继续遍历,需要的朋友可以参考下2025-08-08
“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。这篇文章主要为大家详细介绍了JavaScript Promise 用法，感兴趣的小伙伴们可以参考一下2016-06-06
js中判断文本框是否为空的两种方法，需要的朋友可以参考下。2011-07-07
全局对象的isNaN()方法通常用于检测 parseFloat() 和 parseInt() 的结果，下面为大家介绍下其具体的使用，感兴趣的朋友可以参考下2013-12-12
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
这篇文章主要介绍了深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解的相关资料,需要的朋友可以参考下2016-04-04
在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下2025-02-02
JavaScript直接调用函数与call调用的区别实例分析
这篇文章主要介绍了JavaScript直接调用函数与call调用的区别,结合额实例形式分析了JavaScript直接调用函数与call调用的基本用法、区别及相关注意事项,需要的朋友可以参考下2020-05-05
Javascript实现快速排序（Quicksort）的算法详解
排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一，要想成为合格的程序员，就必须理解和掌握各种排序算法。2015-09-09
最新评论