Array methods

@Work1

Array.map

@Work1

Map

Wijzig ("map") elk item binnen een array naar een ander formaat

 

 

 

Resultaat: array met zelfde aantal items

Voorbeeld

const numbers = [10, 2, 3, 5];

const mapped = numbers.map((number) => {
  return number * 2;
});

console.log(numbers); // [10, 2, 3, 5]
console.log(mapped); // [20, 4, 6, 10]

Voorbeeld

const teachers = [
  {
    firstName: "Michael",
    lastName: "Vanderpoorten",
  },
  {
    firstName: "Mathieu",
    lastName: "Spillebeen",
  },
];

const names = teachers.map((teacher) => {
  return `${teacher.firstName} ${teacher.lastName}`;
});

console.log(teachers); // [{ ... }, { ... }] (original array)
console.log(names); // ["Michael Vanderpoorten", "Mathieu Spillebeen"]

Array.filter

Placeholder

Filter

Filter de array zodat enkel de items overblijven die aan een bepaalde voorwaarde voldoen

 

 

Resultaat: array met zelfde aantal of minder items

Voorbeeld

const numbers = [10, 2, 3, 5];

const filtered = numbers.filter((number) => {
  return number >= 5;
});

console.log(numbers); // [10, 2, 3, 5]
console.log(filtered); // [10, 5]

Voorbeeld

const teachers = [
  {
    name: "Michael Vanderpoorten",
    group: "1PGMa",
  },
  {
    name: "Mathieu Spillebeen",
    group: "1PGMb",
  },
  {
    name: "Evelien Rutsaert",
    group: "1PGMa",
  },
];

const filtered = teachers.filter((teacher) => {
  return teacher.group === "1PGMa";
});

console.log(teachers); // [{ ... }, { ... }, { ... }] (original array)
console.log(filtered); 
//	[{name: "Michael Vanderpoorten", group: "1PGMa"}, 
//	{ name: "Evelien Rutsaert", group: "1PGMa"}]

Array.find

Placeholder

Find

Met de find methode krijg je het eerste (of geen!) item dat voldoet aan een bepaalde voorwaarde

 

 

 

Resultaat: 1 item OF geen (undefined)

Voorbeeld

const numbers = [10, 2, 3, 5];

const n = numbers.find((number) => {
  return number === 2;
});

console.log(numbers); // [10, 2, 3, 5]
console.log(n); // 2

Voorbeeld

const numbers = [10, 2, 3, 5];

const n = numbers.find((number) => {
  return number === 4;
});

console.log(numbers); // [10, 2, 3, 5]
console.log(n); // undefined

Voorbeeld

const teachers = [
  {
    name: "Michael Vanderpoorten",
    group: "1PGMa",
  },
  {
    name: "Mathieu Spillebeen",
    group: "1PGMb",
  },
  {
    name: "Evelien Rutsaert",
    group: "1PGMa",
  },
];

const teacher = teachers.find((teacher) => {
  return teacher.group === "1PGMa";
});

console.log(teachers); // [{ ... }, { ... }, {...}] (original array)
console.log(teacher); // { name: "Michael Vanderpoorten", group: "1PGMa" }

@Work1 - Array Methods

By Mathieu S. and Michael V.

Made with Slides.com

@Work1 - Array Methods

  • 234

More from Mathieu S. and Michael V.