JavaScript处理数组数据的示例详解
本文介绍如何使用JavaScript处理数组数据，通过遍历对象并匹配prop属性，利用Object.assign方法实现数据覆盖与更新。同时演示如何根据匹配结果动态调整isShow字段，实现数据的追加、赋值或删除操作，适用于前端数据展示与状态管理场景。
数据
[
{
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处理数组数据内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19