Oppiskele Taulukoiden Muuntaminen Map()-Metodilla | Edistyneet Taulukkometodit ja Muunnokset

Tässä osiossa tarkastellaan useita yleisesti käytettyjä menetelmiä taulukoiden käsittelyyn JavaScriptissä. JS tarjoaa laajan valikoiman menetelmiä, mutta keskitymme erityisesti niihin, jotka ovat korvaamattomia jokapäiväisessä ohjelmoinnissa: map(), filter(), find(), reduce() ja sort(). Nämä menetelmät on valittu niiden käytännöllisen hyödyn vuoksi, sillä ne ratkaisevat yleisiä tilanteita, joita ohjelmointitehtävissä kohdataan.

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

map()

map()-metodi käy läpi alkuperäisen taulukon jokaisen alkion ja soveltaa määriteltyä palautefunktiota tuottaen uuden taulukon.

Perussyntaksi:

array.map((element, index, array) => {
  // Callback body
});

element: Käsiteltävä alkio taulukossa;
index: Käsiteltävän alkion indeksi taulukossa. Edustaa alkion sijaintia taulukossa;
array: Taulukko, johon map()-metodia on kutsuttu. Viittaa alkuperäiseen taulukkoon, jota käydään läpi.

Havainnollistetaan, mitä element, index ja array tarkoittavat:


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

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

Tärkeitä huomioita map()-metodista:

Käy alkuperäisen taulukon läpi alkio kerrallaan;
Ei muuta alkuperäistä taulukkoa;
Paluuarvo palautetaan uuden taulukon muodostamiseen;
Palauttaa uuden taulukon, jonka pituus on sama kuin alkuperäisen.

Taulukon alkioiden muuntaminen

map()-metodi on hyödyllinen, kun jokainen taulukon alkio halutaan 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

1. Mitä `map()`-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee `strings.map((element) => (element += "!"))`?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 1

Kysy tekoälyä

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

Suggested prompts:

Can you explain how the map() method differs from forEach()?

What happens if the callback in map() does not return a value?

Can you show an example of using map() with objects instead of numbers?

Awesome!

Completion rate improved to 2.27

Pyyhkäise näyttääksesi valikon

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

map()

map()-metodi käy läpi alkuperäisen taulukon jokaisen alkion ja soveltaa määriteltyä palautefunktiota tuottaen uuden taulukon.

Perussyntaksi:

array.map((element, index, array) => {
  // Callback body
});

element: Käsiteltävä alkio taulukossa;
index: Käsiteltävän alkion indeksi taulukossa. Edustaa alkion sijaintia taulukossa;
array: Taulukko, johon map()-metodia on kutsuttu. Viittaa alkuperäiseen taulukkoon, jota käydään läpi.

Havainnollistetaan, mitä element, index ja array tarkoittavat:


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

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

Tärkeitä huomioita map()-metodista:

Käy alkuperäisen taulukon läpi alkio kerrallaan;
Ei muuta alkuperäistä taulukkoa;
Paluuarvo palautetaan uuden taulukon muodostamiseen;
Palauttaa uuden taulukon, jonka pituus on sama kuin alkuperäisen.

Taulukon alkioiden muuntaminen

map()-metodi on hyödyllinen, kun jokainen taulukon alkio halutaan 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

1. Mitä `map()`-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee `strings.map((element) => (element += "!"))`?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 1

Taulukoiden Muuntaminen Map()-Metodilla

map()

Tärkeitä huomioita map()-metodista:

Taulukon alkioiden muuntaminen

1. Mitä map()-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee strings.map((element) => (element += "!"))?

Awesome!

Taulukoiden Muuntaminen Map()-Metodilla

map()

Tärkeitä huomioita map()-metodista:

Taulukon alkioiden muuntaminen

1. Mitä map()-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee strings.map((element) => (element += "!"))?

1. Mitä `map()`-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee `strings.map((element) => (element += "!"))`?

1. Mitä `map()`-metodi tekee?

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

3. Alla olevassa esimerkissä, mitä tekee `strings.map((element) => (element += "!"))`?