快捷導(dǎo)航

JavaScript處理數(shù)組數(shù)據(jù)的示例詳解

更新時(shí)間：2023年10月24日 08:20:52 作者：JackieDYH

這篇文章主要為大家詳細(xì)介紹了JavaScript如何處理數(shù)組數(shù)據(jù),包括數(shù)據(jù)匹配和剔除,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下

數(shù)據(jù)

[
  {
    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: '資金費(fèi)率',
        label: '資金費(fèi)率',
        prop: 'avgFundingRateByOi',
        isShow: false,
        fixed: false,
        width: 100,
        align: 'left'
      },
      {
        title: '持倉',
        label: '持倉',
        prop: 'openInterest',
        isShow: false,
        fixed: false,
        width: 100,
        align: 'left'
      }
    ]
  }
]

循環(huán)上面數(shù)組并把titleData中的每一項(xiàng)和下面這個(gè)數(shù)組中每一項(xiàng)進(jìn)行對(duì)比，單prop相等時(shí)，將下面的匹配項(xiàng)覆蓋到上面對(duì)應(yīng)的位置

[{
        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小時(shí))',
        label: '多(4h)',
        prop: 'h4LongVolUsd',
        fixed: false,
        width: 100,
        isShow: true,
        align: 'left'
      }]

實(shí)現(xiàn)

data.forEach(item => {
  item.titleData.forEach(titleItem => {
    const match = newData.find(newItem => newItem.prop === titleItem.prop);
    if (match) {
      Object.assign(titleItem, match);
    }
  });
});

會(huì)遍歷data數(shù)組中的每個(gè)對(duì)象，然后對(duì)每個(gè)對(duì)象的titleData數(shù)組進(jìn)行遍歷。在遍歷titleData數(shù)組的過程中，會(huì)查找與newData數(shù)組中具有相同prop屬性的對(duì)象。如果找到匹配項(xiàng)，則使用Object.assign方法將匹配項(xiàng)的屬性覆蓋到titleData數(shù)組中的相應(yīng)對(duì)象上。

最終，data數(shù)組中的titleData數(shù)組將被更新為匹配項(xiàng)的屬性值。

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: "價(jià)格",
    prop: "price",
    fixed: false,
    width: 100,
    isShow: true,
    align: "left"
  },
  {
    title: "價(jià)格變化(24h)",
    label: "價(jià)格(24h%)",
    prop: "h24PriceChangePercent",
    fixed: false,
    width: 100,
    isShow: true,
    align: "left"
  }
];

循環(huán)上面數(shù)組把下面的數(shù)字和上面匹配prop，當(dāng)上面數(shù)組存在下面的某一項(xiàng)時(shí)，將其isshow字段賦值為下面的，如果isshow為false時(shí)，將從上面數(shù)組中刪除，如果不存在則追加到上面數(shù)組中

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小時(shí))',
    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);

到此這篇關(guān)于JavaScript處理數(shù)組數(shù)據(jù)的示例詳解的文章就介紹到這了,更多相關(guān)JavaScript處理數(shù)組數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: