GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing da.javascript.info — Map til objekter

  • Tutorial
  • The JavaScript language
  • Data typer
  • Array-metoder
tilbage til lektionen

Map til objekter

vigtighed: 5

Du har et array af user objekter, hvert med name, surname og id.

Skriv koden, der laver et nyt array fra det, bestående af objekter med id og fullName, hvor fullName genereres ud fra name og surname.

For eksempel:

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = /* ... din kode ... */

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith
``` Så, faktisk skal du mappe et array af objekter til et andet. Prøv at bruge `=>` her. Der er en lille "catch".
let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ); // 1
alert( usersMapped[0].fullName ); // John Smith

Vær opmærksom på at med arrow funktionen vi brug for yderligere parenteser.

:

let usersMapped = users.map(user => {
  fullName: `${user.name} ${user.surname}`,
  id: user.id
});

Som vi husker, er der to typer arrow funktioner: uden krop value => expr og med krop value => {...}.

I dette tilfælde vil JavaScript behandle { som starten på funktionskroppen, ikke starten på objektet. Løsningen er at omslutte dem i “almindelige” parenteser:

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

Nu virker det fint.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.