js 将对象转换为数组,两个对象的属性相同合并相加

1、定义两个对象,属性相同的值相加,并将值赋值为数组中对象属性相同的
  • 定义数组

    var titleDate = [
    {
    name: 'JKJInputQty',
    field: 'restQty',
    icon: config.ossUrl + '/afl-data-screen/images/icon-all-input.png',
    value: 0,
    titleNames: 'JKJInputQty',
    span: 3
    }, {
    name: 'JKJOutputQty',
    field: 'restQty',
    icon: config.ossUrl + '/afl-data-screen/images/icon-takeOut.png',
    value: 0,
    titleNames: 'JKJOutputQty',
    span: 3
    }, {
    name:'PEOutputQty',
    field: 'restQty',
    icon: config.ossUrl + '/afl-data-screen/images/icon-output.png',
    value: 0,
    titleNames: 'PEOutputQty',
    span: 3
    }, {
    name: 'abnormalCause',
    field: 'restQty',
    icon: config.ossUrl + '/afl-data-screen/images/icon-search.png',
    cause: '',
    titleNames: 'AbnormalCause',
    span: 5
    }]

  • 定义两个对象

    var ProductDataByDayofLine1= {
    "JKJInputQty": 3276,
    "JKJOutputQty": 9890,
    "PEOutputQty": 8442,
    "DROutputQty": 10584,
    "JKJOutputDifferenceQty": 6614,
    "PEOutputDifferenceQty": 0,
    "DROutputDifferenceQty": 2142,
    "AbnormalCause": "JKJ产出数量大于投入数量DR产出数量大于PE产出数量"
    }
    var ProductDataByDayofLine2= {
    "JKJInputQty": 0,
    "JKJOutputQty": 0,
    "PEOutputQty": 0,
    "DROutputQty": 0,
    "JKJOutputDifferenceQty": 0,
    "PEOutputDifferenceQty": 0,
    "DROutputDifferenceQty": 0,
    "AbnormalCause": ""
    },

  • 将连个对象合并相加

    const keys = Object.keys(ProductDataByDayofLine1)
    keys.forEach((name, index) => {
    titleDate.forEach(item => {
    if (name === item.titleNames && index < 4) {
    item.value = Number(ProductDataByDayofLine1[name]) + Number(ProductDataByDayofLine2[name])
    }
    if (name === item.titleNames && item.titleNames === 'JKJOutputDifferenceQty') {
    // Number() 将值转换类型为数字类型
    const a = Number(ProductDataByDayofLine1[name]) + Number(ProductDataByDayofLine2[name])
    const b = Number(ProductDataByDayofLine1.PEOutputDifferenceQty) + Number(ProductDataByDayofLine2.PEOutputDifferenceQty)
    const c = Number(ProductDataByDayofLine1.DROutputDifferenceQty) + Number(ProductDataByDayofLine2.DROutputDifferenceQty)
    item.value = a + b + c
    }
    //特定的判断条件去添加到titleDate数组属性中
    if (name === item.titleNames && item.titleNames === 'AbnormalCause') {
    item.cause = res.ProductDataByDayofLine1[name] + ProductDataByDayofLine2[name]
    }
    })
    })

2、将对象转换为数组并合并对象

数据格式为

复制代码
var ProductDataByHourofLine1= {
        "HourOne": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        },
        "HourTwo": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        },
        "HourThree": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        },
        "HourFour": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        },
        
}

var ProductDataByHourofLine2= {
        "HourOne": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        },
        "HourTwo": {
            "JKJInputQty": 0,
            "JKJOutputQty": 0,
            "PEOutputQty": 0,
            "DROutputQty": 0,
            "JKJOutputDifferenceQty": 0,
            "PEOutputDifferenceQty": 0,
            "DROutputDifferenceQty": 0,
            "AbnormalCause": null
        }
      //......后面定义省略
}
  • 转换对象并添加到新的数组中

    let arr=[]
    let arr2=[]
    Object.entries(ProductDataByHourofLine1).forEach((item, index) => {
    if (item[0] === 'HourOne') {
    item[1].TimePeriod = '00:00 ~ 01:00'
    arr.push(item[1])
    }
    if (item[0] === 'HourTwo') {
    item[1].TimePeriod = '01:00 ~ 02:00'
    arr.push(item[1])
    }
    if (item[0] === 'HourThree') {
    item[1].TimePeriod = '02:00 ~ 03:00'
    arr.push(item[1])
    }
    if (item[0] === 'HourFour') {
    item[1].TimePeriod = '03:00 ~ 04:00'
    arr.push(item[1])
    }
    })

    Object.entries(ProductDataByHourofLine2).forEach((item, index) => {
    if (item[0] === 'HourOne') {
    item[1].TimePeriod = '00:00 ~ 01:00'
    arr2.push(item[1])
    }
    if (item[0] === 'HourTwo') {
    item[1].TimePeriod = '01:00 ~ 02:00'
    arr2.push(item[1])
    }
    if (item[0] === 'HourThree') {
    item[1].TimePeriod = '02:00 ~ 03:00'
    arr2.push(item[1])
    }
    if (item[0] === 'HourFour') {
    item[1].TimePeriod = '03:00 ~ 04:00'
    arr2.push(item[1])
    }
    })

  • 将两个数组中对象相同的合并相加 到某一个数组的属性上

    arr.forEach((item, index) => {
    var item2 = arr2[index]
    var a = Object.keys(item)
    var b = Object.keys(item2)
    a.forEach((x, index) => {
    if (x === b[index] && x !== 'TimePeriod') {
    item[x] = Number(item[x]) + Number(item2[x])
    }
    })
    })

相关推荐
少卿2 分钟前
React Native Vector Icons 安装指南
前端·react native
国家不保护废物7 分钟前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo1 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌1 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴2 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript