脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript处理数组数据

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处理数组数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现窗口加载时模拟鼠标移动的方法

    JS实现窗口加载时模拟鼠标移动的方法

    这篇文章主要介绍了JS实现窗口加载时模拟鼠标移动的方法,涉及javascript鼠标事件的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript通过mouseover()实现图片变大效果的示例

    JavaScript通过mouseover()实现图片变大效果的示例

    下面小编就为大家分享一篇JavaScript通过mouseover()实现图片变大效果的示例，具有很好的参考价值，希望对大家有所帮助
    2017-12-12
  • OpenLayers3实现地图显示功能

    OpenLayers3实现地图显示功能

    这篇文章主要为大家详细介绍了OpenLayers3实现地图显示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 深入浅析JavaScript函数前面的加号和叹号

    深入浅析JavaScript函数前面的加号和叹号

    这篇文章主要介绍了深入浅析JavaScript函数前面的加号和叹号的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍

    body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
    2013-09-09
  • JS实现网页上随机产生超链接地址的方法

    JS实现网页上随机产生超链接地址的方法

    这篇文章主要介绍了JS实现网页上随机产生超链接地址的方法,涉及JavaScript随机数的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • postMessage的两种使用方式

    postMessage的两种使用方式

    这篇文章主要介绍了使用postMessage实现iframe跨域通信，第一种使用postMessage在irfame中实现跨域数据传递，第二种使用postMessage在window.open()中的使用，本文结合示例代码给大家详细讲解，需要的朋友跟随小编一起看看吧
    2022-03-03
  • javascript实现的弹出层背景置灰-模拟(easyui dialog)

    javascript实现的弹出层背景置灰-模拟(easyui dialog)

    本文为大家介绍下使用javascript实现的弹出层背景置灰-模拟(easyui dialog) 具体实现如下，感兴趣的朋友可以参考下
    2013-12-12
  • 详解微信小程序调用支付接口支付

    详解微信小程序调用支付接口支付

    这篇文章主要介绍了微信小程序调用支付接口支付，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 开源的javascript项目Kissy介绍

    开源的javascript项目Kissy介绍

    本文向大家介绍了开源的javascript项目Kissy，是taobao UED小组推的一款js框架，我们来简单研究下，为什么taobao这么推崇他呢。
    2014-11-11

最新评论