如何创建2个数组通过运行一次包含对象的数组与匹配的字段?

Question

例如-假设我有一个数组-

const array = [{name: "first", val: 1}, {name: "second", val: 2}]

我想在这个数组上运行一次在运行结束时得到两个数组-

const arrayOne = ["first", "second"];const arrayTwo = [1,2];

得到第一个很容易，但是同时得到两个呢?

我记得有一种方法可以做到这一点，但找不到它。

我很感激任何帮助!

Answer 1

const array = [{name: "first", val: 1}, {name: "second", val: 2}]
const keys = [];
const values = [];
array.forEach(item=>{
keys.push(item.name);
values.push(item.val);
})
console.log(keys, values)

Answer 2

任何循环逻辑都有帮助

Array.reduce实现如下

const array = [{ name: "first", val: 1 }, { name: "second", val: 2 }];
const [arrayOne, arrayTwo] = array.reduce((acc, curr) => {
const { name, val } = curr;
acc[0].push(name);
acc[1].push(val);
return acc;
}, [[], []]);
console.log(arrayOne, arrayTwo);

Answer 3

函数extractArrays是通用的，也可以在其他情况下使用。

function extractArrays(arr) {
const result = {};
for (obj of arr) {
for (key in obj) {
result[key] = (result[key] || []).concat([obj[key]]);
}
}
return result;
}
const array = [{name: "first", val: 1}, {name: "second", val: 2}];
const result = extractArrays(array);
const arrayOne = result.name;
const arrayTwo = result.val;
console.log(`arrayOne=${arrayOne}`);
console.log(`arrayTwo=${arrayTwo}`);

Answer 4

您可以使用Array.reduce来实现这一点:

const array = [{name: "first", val: 1}, {name: "second", val: 2}]
const result = array.reduce((res, item) => {
res[0].push(item.name)
res[1].push(item.val)
return res
}, [[], []])
console.log(result)

Answer 5

谢谢大家!

但是我认为最简单，最易读的代码应该是-

const itemArray = [], valArray = [];
data.map(({name, val})=> {
if(name) nameArray.push(name);
if(val) valArray.push(val);
})

因为基本上4行代码就完成了再次感谢大家!

Answer 6

使用数组。地图功能:

const array = [ { name: 'first', val: 1 }, { name: 'second', val: 2 } ]
let names = array.map(item => item.name)
let vals = array.map(item => item.val)
console.log(names)
console.log(vals)

map函数调用为每个元素提供的回调函数，并根据该函数的结果构造一个新数组。

如果您不熟悉箭头函数，如:

item => item.name

…它是

的缩写形式

function (item) {
return item.name
}

你甚至可以在一行中完成:

let [ names, vals ] = [ array.map(item => item.name), array.map(item => item.val) ]