Lära Transformera Arrayer med Metoden Map() | Avancerade Arraymetoder och Transformationer

Detta avsnitt utforskar flera vanliga metoder för att arbeta med arrayer i JavaScript. JS erbjuder ett brett utbud av metoder, men vi fokuserar specifikt på de som är ovärderliga i vardaglig programmering: map(), filter(), find(), reduce() och sort(). Dessa metoder är valda för sin praktiska användbarhet och löser vanliga situationer som uppstår vid kodningsuppgifter.

För en fullständig lista över alla array-metoder kan du hänvisa till den officiella MDN-dokumentation.

map()

Metoden map() itererar över varje element i den ursprungliga arrayen och tillämpar en angiven callback-funktion för att skapa en ny array.

Grundläggande syntax:

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

element: Det aktuella elementet som behandlas i arrayen;
index: Det aktuella elementets index i arrayen. Representerar elementets position i arrayen;
array: Den array som map() anropades på. Refererar till den ursprungliga arrayen som itereras över.

Här illustreras vad element, index och array representerar:


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

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

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

Itererar över det ursprungliga arrayet element för element;
Modifierar inte det ursprungliga arrayet;
Callback-funktionens resultat används för att skapa en ny array;
Returnerar en ny array med samma längd.

Transformera arrayelement

Metoden map() är särskilt användbar när varje element i en array behöver transformeras utan att det ursprungliga arrayet ä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

1. Vad gör metoden `map()`?

2. Vad är en nyckeleigenskap hos metoden `map()`?

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

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 1

Fråga AI

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

Awesome!

Completion rate improved to 2.27

Svep för att visa menyn

För en fullständig lista över alla array-metoder kan du hänvisa till den officiella MDN-dokumentation.

map()

Metoden map() itererar över varje element i den ursprungliga arrayen och tillämpar en angiven callback-funktion för att skapa en ny array.

Grundläggande syntax:

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

element: Det aktuella elementet som behandlas i arrayen;
index: Det aktuella elementets index i arrayen. Representerar elementets position i arrayen;
array: Den array som map() anropades på. Refererar till den ursprungliga arrayen som itereras över.

Här illustreras vad element, index och array representerar:


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

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

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

Itererar över det ursprungliga arrayet element för element;
Modifierar inte det ursprungliga arrayet;
Callback-funktionens resultat används för att skapa en ny array;
Returnerar en ny array med samma längd.

Transformera arrayelement

Metoden map() är särskilt användbar när varje element i en array behöver transformeras utan att det ursprungliga arrayet ä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

1. Vad gör metoden `map()`?

2. Vad är en nyckeleigenskap hos metoden `map()`?

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

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 1

Transformera Arrayer med Metoden Map()

map()

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

Transformera arrayelement

1. Vad gör metoden map()?

2. Vad är en nyckeleigenskap hos metoden map()?

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

Awesome!

Transformera Arrayer med Metoden Map()

map()

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

Transformera arrayelement

1. Vad gör metoden map()?

2. Vad är en nyckeleigenskap hos metoden map()?

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

1. Vad gör metoden `map()`?

2. Vad är en nyckeleigenskap hos metoden `map()`?

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

1. Vad gör metoden `map()`?

2. Vad är en nyckeleigenskap hos metoden `map()`?

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