Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Taulukoiden Muuntaminen Map()-Metodilla | JavaScript-Olioiden Perusteet
Javascriptin tietorakenteet

bookTaulukoiden Muuntaminen Map()-Metodilla

Pyyhkäise näyttääksesi valikon

Tässä osiossa käsitellään keskeisiä taulukkometodeja, joita käytetään päivittäisessä ohjelmoinnissa: map(), filter(), find(), reduce() ja sort(). Aloitetaan map()-metodilla.

Kaikki taulukkometodit löydät virallisesta MDN-dokumentaatiosta.

map()

map()-metodi käy läpi jokaisen taulukon alkion ja luo uuden taulukon palautusarvojen perusteella.

array.map((element, index, array) => {
  // Callback body
});
  • element: nykyinen alkio;
  • index: sijainti taulukossa;
  • array: alkuperäinen taulukko.

              
12345

            
const products = ["Ball", "Shoes", "Mouse"];

const modifiedProducts = products.map((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});
copy

Tärkeimmät asiat map()-metodista:

  • Käsittelee jokaisen alkion;
  • Ei muuta alkuperäistä taulukkoa;
  • Palauttaa uuden taulukon;
  • Tulostaulukolla on sama pituus.

Taulukon alkioiden muuntaminen

map()-metodi on hyödyllinen, kun jokainen taulukon alkio täytyy muuntaa muuttamatta alkuperäistä taulukkoa. Tarkastele seuraavaa esimerkkiä:


              
12345678910

            
const numbers = [3, 5, 11, 32, 87];

/* Use the `map` method to create a new array (`doubledNumbers`) 
  by doubling each element of the `numbers` array. */
const doubledNumbers = numbers.map((element) => {
  return element * 2;
});

console.log("Initial array:", numbers); // Output: 3, 5, 11, 32, 87
console.log("Modified array:", doubledNumbers); // Output: 6, 10, 22, 64, 174
copy

1. Mitä map()-metodi tekee?

2. Mikä on map()-metodin keskeinen ominaisuus?

3. Mitä alla olevassa esimerkissä tekee strings.map((element) => (element += "!"))?

question mark

Mitä map()-metodi tekee?

Select the correct answer

question mark

Mikä on map()-metodin keskeinen ominaisuus?

Select the correct answer

question mark

Mitä alla olevassa esimerkissä tekee strings.map((element) => (element += "!"))?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 31

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Osio 1. Luku 31
some-alt