javascript - transform an array of objects with map( ) - Stack Overflow

admin管理员组

文章数量:1022695

I can't understand how the map () method works because all the examples are with numbers and to understand I need an example with something more specific. so I made this I have an array of objects:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
   {
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

I want to understand how with people.map(); i can change the idk, name?? of the 2nd element.
this is how i think map() work:

people.map(() => {
     people[1].name = prompt()
// At this point i don't know how continue
})

I'm studying on my own, so I will be very grateful to you :)

I can't understand how the map () method works because all the examples are with numbers and to understand I need an example with something more specific. so I made this I have an array of objects:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
   {
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

I want to understand how with people.map(); i can change the idk, name?? of the 2nd element.
this is how i think map() work:

people.map(() => {
     people[1].name = prompt()
// At this point i don't know how continue
})

I'm studying on my own, so I will be very grateful to you :)

• javascript
• arrays
• string
• dictionary
• object

Share Improve this question Follow edited Aug 30, 2021 at 4:50 F. Lucas Picco asked Aug 30, 2021 at 4:30 F. Lucas PiccoF. Lucas Picco 3111 gold badge11 silver badge55 bronze badges 4

• What is your expected result? – DecPK Commented Aug 30, 2021 at 4:35
• Array.prototype.map is what you want. – DecPK Commented Aug 30, 2021 at 4:36
• I know that the function returns a new array, I would like the same array of objects but that the 2nd element changes the name – F. Lucas Picco Commented Aug 30, 2021 at 4:39
• @F.LucasPicco if you just want to change the second element's name (say to "Emily"), but in a separate array, then you can just do the following: const newArray = [...people]; // This copies the array using the spread operator newArray[1].name = "Emily"; – Ashley Commented Aug 30, 2021 at 4:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The .map() function will go through the entire array, and on each step of that process it will take the current item that we are looking at and will pass it as a parameter into the function. You can then do whatever you want to that item, and whatever you return from your function will replace what is in that position in the array.

Say for example, with the array you gave in your question, we wanted to remove the name and last_name properties, and bine them into a full_name property. We can do the following:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

people = people.map((person) => {
  return {
    id: person.id,
    full_name: `${person.name} ${person.last_name}`
  }
});

After this code runs, our people array would look like this:

[
   {
     id: 1,
     full_name: 'jhon wilson'
   },
   {
     id: 2,
     full_name: 'maria anyway'
   },
     id: 3,
     name: 'lastOne example'
   }
];

You can think of it as doing something very similar to this:

function transformPerson(person) {
  return {
    id: person.id,
    full_name: `${person.name} ${person.last_name}`
  }
}

let newPeople = [];
for (let i = 0; i < people.length; i++) {
  newPeople[i] = transformPerson(people[i])
}

people = newPeople;

Array.map() takes in a function as a parameter, passes each item of the array into the function, and returns an array of the result.

For example, if I wanted to multiply each of the items in the array by 2:

const x = [1, 2, 3, 4, 5]
const y = x.map(v => v * 2) // result: [2, 4, 6, 8, 10]

Note: Array.map does not affect the original array; it creates a new array of the results.

You could change your code to

let people = [{id:1,name:'john',last_name:'wilson'},{id:2,name:'maria',last_name:'anyway'},{id:3,name:'lastOne',last_name:'example'}];

people = people.map((p,i) =>({...p,name: i===1?prompt("New name"):p.name}))

console.log(people);

This will prompt the user only for a new name when i===1. The expression will create a new array that will be stored under the variable name people again. If you wanted people to remain unchanged you could assign the return value of the people.map()-call to a different variable (or constant).

I can't understand how the map () method works because all the examples are with numbers and to understand I need an example with something more specific. so I made this I have an array of objects:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
   {
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

I want to understand how with people.map(); i can change the idk, name?? of the 2nd element.
this is how i think map() work:

people.map(() => {
     people[1].name = prompt()
// At this point i don't know how continue
})

I'm studying on my own, so I will be very grateful to you :)

I can't understand how the map () method works because all the examples are with numbers and to understand I need an example with something more specific. so I made this I have an array of objects:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
   {
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

I want to understand how with people.map(); i can change the idk, name?? of the 2nd element.
this is how i think map() work:

people.map(() => {
     people[1].name = prompt()
// At this point i don't know how continue
})

I'm studying on my own, so I will be very grateful to you :)

• javascript
• arrays
• string
• dictionary
• object

Share Improve this question Follow edited Aug 30, 2021 at 4:50 F. Lucas Picco asked Aug 30, 2021 at 4:30 F. Lucas PiccoF. Lucas Picco 3111 gold badge11 silver badge55 bronze badges 4

• What is your expected result? – DecPK Commented Aug 30, 2021 at 4:35
• Array.prototype.map is what you want. – DecPK Commented Aug 30, 2021 at 4:36
• I know that the function returns a new array, I would like the same array of objects but that the 2nd element changes the name – F. Lucas Picco Commented Aug 30, 2021 at 4:39
• @F.LucasPicco if you just want to change the second element's name (say to "Emily"), but in a separate array, then you can just do the following: const newArray = [...people]; // This copies the array using the spread operator newArray[1].name = "Emily"; – Ashley Commented Aug 30, 2021 at 4:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The .map() function will go through the entire array, and on each step of that process it will take the current item that we are looking at and will pass it as a parameter into the function. You can then do whatever you want to that item, and whatever you return from your function will replace what is in that position in the array.

Say for example, with the array you gave in your question, we wanted to remove the name and last_name properties, and bine them into a full_name property. We can do the following:

 let people = [
   {
     id: 1,
     name: 'jhon',
     last_name: 'wilson'
   },
   {
     id: 2,
     name: 'maria',
     last_name: 'anyway'
   },
     id: 3,
     name: 'lastOne',
     last_name: 'example'
   }
];

people = people.map((person) => {
  return {
    id: person.id,
    full_name: `${person.name} ${person.last_name}`
  }
});

After this code runs, our people array would look like this:

[
   {
     id: 1,
     full_name: 'jhon wilson'
   },
   {
     id: 2,
     full_name: 'maria anyway'
   },
     id: 3,
     name: 'lastOne example'
   }
];

You can think of it as doing something very similar to this:

function transformPerson(person) {
  return {
    id: person.id,
    full_name: `${person.name} ${person.last_name}`
  }
}

let newPeople = [];
for (let i = 0; i < people.length; i++) {
  newPeople[i] = transformPerson(people[i])
}

people = newPeople;

Array.map() takes in a function as a parameter, passes each item of the array into the function, and returns an array of the result.

For example, if I wanted to multiply each of the items in the array by 2:

const x = [1, 2, 3, 4, 5]
const y = x.map(v => v * 2) // result: [2, 4, 6, 8, 10]

Note: Array.map does not affect the original array; it creates a new array of the results.

You could change your code to

let people = [{id:1,name:'john',last_name:'wilson'},{id:2,name:'maria',last_name:'anyway'},{id:3,name:'lastOne',last_name:'example'}];

people = people.map((p,i) =>({...p,name: i===1?prompt("New name"):p.name}))

console.log(people);

This will prompt the user only for a new name when i===1. The expression will create a new array that will be stored under the variable name people again. If you wanted people to remain unchanged you could assign the return value of the people.map()-call to a different variable (or constant).

本文标签： javascripttransform an array of objects with map( )Stack Overflow