如何在 JS 中格式化对象数组答案

【问题标题】：How to format an Array of Arrays of Object in JS如何在 JS 中格式化对象数组
【发布时间】：2019-10-14 13:22:07
【问题描述】：

我想在 VueJS 的计算属性中格式化这个数组，但是我现在有一个问题来访问 newArray，所有元素都在一个数组中

getNewArray(){
const newArray = []
const = this.data.map(item =>{
    for(let i in item){
       newArray.push(item.value)
  }
return newArray
})
}

data:[
    [
    {idStatus: 2, value: '120'},
    {idStatus: 3, value: '130'},
    {idStatus: 4, value: '140'},
    {idStatus: 5, value: '150'}
    ],
    [
    {idStatus: 1, value: '160'},
    {idStatus: 2, value: '180'},
    {idStatus: 4, value: '10'},
    {idStatus: 5, value: '20'}
    ],
    [
    {idStatus: 3, value: '567'},
    {idStatus: 6, value: '234'},
    {idStatus: 9, value: '747'},
    {idStatus: 7, value: '789'}
    ],
    [
    {idStatus: 8, value: '340'},
    {idStatus: 5, value: '560'},
    {idStatus: 6, value: '120'},
    {idStatus: 2, value: '100'}
    ],
    [
    {idStatus: 1, value: '106'},
    {idStatus: 5, value: '345'},
    {idStatus: 7, value: '756'},
    {idStatus: 9, value: '946'}
    ]
    ]

我想要得到的结果是这样的

    data:[
    [120,130,140,150],
    [160,180,10,20],
    [567,234,747,789],
    [340,560,120,100],
    [106,345,756,946]
    ]

【问题讨论】：

标签： javascript arrays object vue.js ecmascript-6

【解决方案1】：

您不应该使用for .. in 进行数组迭代#Ref

您可以通过修复以下问题来更改您的原始代码

您每次都将值推送到相同的newArray，而您每次都必须在地图内创建一个新变量
您的函数没有返回任何内容

let data =[[{idStatus: 2, value: '120'},{idStatus: 3, value: '130'},{idStatus: 4, value: '140'},{idStatus: 5, value: '150'}],[{idStatus: 1, value: '160'},{idStatus: 2, value: '180'},{idStatus: 4, value: '10'},{idStatus: 5, value: '20'}],[{idStatus: 3, value: '567'},{idStatus: 6, value: '234'},{idStatus: 9, value: '747'},{idStatus: 7, value: '789'}],[{idStatus: 8, value: '340'},{idStatus: 5, value: '560'},{idStatus: 6, value: '120'},{idStatus: 2, value: '100'}],[{idStatus: 1, value: '106'},{idStatus: 5, value: '345'},{idStatus: 7, value: '756'},{idStatus: 9, value: '946'}]]

function getNewArray(){
const final = data.map(item =>{
    const newArray = []
    for(let i of item){
       newArray.push(i.value)
    }
    return newArray
})
return final
}

 
console.log(getNewArray())

你可以使用两次地图

let data = {data:[[{idStatus: 2, value: '120'},{idStatus: 3, value: '130'},{idStatus: 4, value: '140'},{idStatus: 5, value: '150'}],[{idStatus: 1, value: '160'},{idStatus: 2, value: '180'},{idStatus: 4, value: '10'},{idStatus: 5, value: '20'}],[{idStatus: 3, value: '567'},{idStatus: 6, value: '234'},{idStatus: 9, value: '747'},{idStatus: 7, value: '789'}],[{idStatus: 8, value: '340'},{idStatus: 5, value: '560'},{idStatus: 6, value: '120'},{idStatus: 2, value: '100'}],[{idStatus: 1, value: '106'},{idStatus: 5, value: '345'},{idStatus: 7, value: '756'},{idStatus: 9, value: '946'}]]}

function getNewArray(){
const final= data.data.map(val=> val.map(({value})=>value))
return final
}


console.log(getNewArray())

【讨论】：

【解决方案2】：

使用map:

const data = [[{idStatus:2,value:'120'},{idStatus:3,value:'130'},{idStatus:4,value:'140'},{idStatus:5,value:'150'}],[{idStatus:1,value:'160'},{idStatus:2,value:'180'},{idStatus:4,value:'10'},{idStatus:5,value:'20'}],[{idStatus:3,value:'567'},{idStatus:6,value:'234'},{idStatus:9,value:'747'},{idStatus:7,value:'789'}],[{idStatus:8,value:'340'},{idStatus:5,value:'560'},{idStatus:6,value:'120'},{idStatus:2,value:'100'}],[{idStatus:1,value:'106'},{idStatus:5,value:'345'},{idStatus:7,value:'756'},{idStatus:9,value:'946'}]];
const res = data.map(e => e.map(({ value }) => value));
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：

【解决方案3】：

var data = [
    [
    {idStatus: 2, value: '120'},
    {idStatus: 3, value: '130'},
    {idStatus: 4, value: '140'},
    {idStatus: 5, value: '150'}
    ],
    [
    {idStatus: 1, value: '160'},
    {idStatus: 2, value: '180'},
    {idStatus: 4, value: '10'},
    {idStatus: 5, value: '20'}
    ],
    [
    {idStatus: 3, value: '567'},
    {idStatus: 6, value: '234'},
    {idStatus: 9, value: '747'},
    {idStatus: 7, value: '789'}
    ],
    [
    {idStatus: 8, value: '340'},
    {idStatus: 5, value: '560'},
    {idStatus: 6, value: '120'},
    {idStatus: 2, value: '100'}
    ],
    [
    {idStatus: 1, value: '106'},
    {idStatus: 5, value: '345'},
    {idStatus: 7, value: '756'},
    {idStatus: 9, value: '946'}
    ]
]

function getNewArray() {
    //convert string to int
    return data.map(item => item.map(v => parseInt(v.value)))
}
let newArray = getNewArray();

console.log(newArray);
console.log(JSON.stringify(newArray));

打印：[[120,130,140,150], [160,180,10,20],[567,234,747,789],[340,560,120,100],[106,345,756,946]]

【讨论】：