根据另一个对象数组的值创建对象数组

Question

I've got an object array like this:

const user = [
  { name: 'Bob' },
  { name: 'Frank' }
]

But I need to get an array like this:

const result = [
  { key: 'Bob', value: 'Bob', text: 'Bob' },
  { key: 'Frank', value: 'Frank', text: 'Frank' }
]

I'm doing it this way:

const result = []
user && user.length > 0 && user.map(u => {
  result.push({ key: u.name, value: u.name, text: u.name })
})

But is there another way to do this a bit more straight? Do I really need to build each object and push it into a new array?

Answer 1

You could construct the array all at once using .map and using Object.fromEntries on an array of entries:

 const user = [ { name: 'Bob' }, { name: 'Frank' } ]; const result = user.map(({ name }) => Object.fromEntries( ['key', 'value', 'text'].map(key => [key, name]) )); console.log(result);

If user might be undefined, you can alternate it with the empty array first:

const result = (user || []).map(...

There's no need to test user.length first, because if the length is 0, the result will remain the empty array, since there aren't any items to map over.

Answer 2

When using .map() you should return the new element from the callback function. If you don't return something, you should be using .forEach() .

And you can use destructuring to avoid repeating u.name .

result = user ? user.map(({name}) => ({ key: name, value: name, text: name })) : [];

Answer 3

尝试使用此语法在对象中创建新字段。

result["key"] = u.name

Answer 4

You can use @barmar's map() function or this reduce() function:

const result = user.reduce((res, u) => {
    res.push({ key: u.name, value: u.name, text: u.name }); return res
}, [])

JavaScript has a Reduce Method. You Should Use It.