Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Transformera Arrayer med Map()-Metoden | Grunderna i JavaScript-Objekt
Javascript Datastrukturer

bookTransformera Arrayer med Map()-Metoden

Svep för att visa menyn

Detta avsnitt behandlar viktiga arraymetoder som används i vardaglig programmering: map(), filter(), find(), reduce() och sort(). Vi börjar med map().

För en fullständig lista över alla arraymetoder, se den officiella MDN-dokumentation.

map()

Metoden map() itererar genom varje element i en array och skapar en ny array baserat på returvärdet från callback-funktionen.

array.map((element, index, array) => {
  // Callback body
});
  • element: aktuellt objekt;
  • index: position i arrayen;
  • array: originalarrayen.

              
12345

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

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

Viktiga punkter att komma ihåg om map():

  • Bearbetar varje element;
  • Modifierar inte den ursprungliga arrayen;
  • Returnerar en ny array;
  • Den resulterande arrayen har samma längd.

Transformera arrayelement

Metoden map() är särskilt användbar när varje element i en array behöver transformeras utan att den ursprungliga arrayen ändras. Se följande exempel:


              
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. Vad gör metoden map()?

2. Vad är en nyckelkaraktäristik för metoden map()?

3. I exemplet nedan, vad gör strings.map((element) => (element += "!"))?

question mark

Vad gör metoden map()?

Select the correct answer

question mark

Vad är en nyckelkaraktäristik för metoden map()?

Select the correct answer

question mark

I exemplet nedan, vad gör strings.map((element) => (element += "!"))?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 31

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Avsnitt 1. Kapitel 31
some-alt