JavaScript

ARRAYER

Vad är en array?

const numbersArray = [1, 3, 5, 7, 11, 13, 17];

const mixedArray = [100, true, 'Chas Academy', {}];
  • Representerar en mängd av värden, en lista
  • [] - anges med hakparenteser i JS
  • Värdena är separerade med , (komma)
  • Kan innehålla värden av samma datatyp, men också av olika datatyper

 

Använda en array

const numbersArray = [1, 3, 5, 7, 11, 13, 17];

numbersArray[3] // Outputs 7

const mixedArray = [100, true, 'Chas Academy', {}];

mixedArray[0] // Outputs 100
  • Varje position i arrayen kallas för index
  • Första index i en array är alltid 0 och ökar med 1 för varje position
  • För att hämta ett element i arrayen används hakparenteser [] enligt
const element = array[index]

Loopa genom en array

const emotions = ['😠', '😧', '😲', '😷', '😝', '😎', '😀'];

for(let i=0; i<emotions.length; i++) {
  console.log(`Element at index ${i} is ${emotions[i]}`);
}

Ibland vill man göra något med alla element.

Skriva ut, hitta ett element utifrån ett villkor, beräkna totalsumman etc.

Ett sätt är att använda en for-loop!

...och så självklart forEach

Lägga till element i en array

const emotions = ['😠', '😧', '😲', '😷', '😝', '😎', '😀'];

emotions.push('🤠');

console.log(emotions);
// Output ['😠', '😧', '😲', '😷', '😝', '😎', '😀', '🤠']

Använd metoden push() för att lägga till ett element i slutet av arrayen.

Superanvändbart. Det kommer du att använda.

this little guy

Lägga till element i en array. Fast i början.

const emotions = ['😠', '😧', '😲', '😷', '😝', '😎', '😀'];

emotions.unshift('🤠');

console.log(emotions)
// Output ['🤠', '😠', '😧', '😲', '😷', '😝', '😎', '😀']

Använd metoden unshift() för att lägga till ett element i slutet av arrayen.

 

now this little guy is here

Ta bort ett element i en array

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // bort med '🥑'

console.log(salad)

// Output ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Använd metoden pop() för att ta bort  ett element i slutet av arrayen.

 

Ta bort ett element i en array

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.shift(); // bort med 🍅'

console.log(salad)

// Output ['🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Använd metoden shift() för att ta bort  ett element i början av arrayen.

 

Använda splice() för att ta bort specika element

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2);

console.log(days); // ["Monday", "Tuesday"]

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 1);

console.log(days); // ["Monday"]
console.log(months); // ["January", "February", "Tuesday"]
Array.splice(start, removeCount, newItem, newItem, newItem....)

Använda splice() för att lägga till specika element

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 2, "March", "April");

console.log(days); // ["Monday", "Tuesday"]
console.log(months); // ["January", "February", "March", "April"]
Array.splice(start, removeCount, newItem, newItem, newItem....)

slice() fungerar på liknande sätt men returnerar istället en ny array från orginalarrayen

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.slice(2);

console.log(days); // ["Monday", "Tuesday"]
console.log(months); //["January", "February", "Monday", "Tuesday"]

till skillnad från splice som ändrar i den gamla arrayen

Slå ihop alla element i en array

const castles = ['🏰', '🏯', '💒'];

const joined = castles.join();

console.log(joined)
// Output "🏰, 🏯, 💒"

// Separeras med mellanslag
const joined = castles.join(' ');

console.log(joined)
// Output "🏰 🏯 💒"

Använd metoden join() för att slå ihop alla element i arrayen. Returneras en string. Om ingen separator används som parameter använda komma (,)

 

Array Desctructering

let ['soccer', 'golf', 'surfing'] = ['⚽', '⛳', '🏄'];

console.log('soccer', 'golf', 'surfing') 
// Output ['⚽', '⛳', '🏄'];

Svensk översättning 🤷🏻‍♀️

"Plocka ut" - "unpacka" - enskilda variabler från en array.

Ordningen spelar roll. Ger en mer "clean" kod.

Array Desctructering

let [soccer, golf, surfing] = ['⚽', '⛳', '🏄'];

console.log(soccer, golf, surfing) 
// Output ['⚽', '⛳', '🏄'];

Svensk översättning 🤷🏻‍♀️

"Plocka ut" - "unpacka" - enskilda variabler från en array.

Ordningen spelar roll. Ger en mer "clean" kod.

let sports = ['⚽', '⛳', '🏄'];
let soccer = sports[0];
let golf = sports[1];
let surfing = sports[2];

UTAN DESCTRUCTERING

UTAN DESCTRUCTERING

  let a;
  let b;
  let array = ["First", "Second"];
  
  [a, b] = [b, a]; // a och b:s värden byter plats

  console.log("a:", a);
  console.log("b:", b);


# PRESENTING CODE

Exempel "Swapa" variabelvärden

Utan destructering skulle vi behöver en till variabel för att byta värden

Rest Parameter ...

const [shirt, jeans, ...rest] = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

console.log(shirt); // '👔'
console.log(jeans); // '👖'
console.log(rest); // [👢', '👡', '💄', '👠, '👗']

Svensk översättning 🤷🏻‍♀️

Med 3st punkter ... till vänster om "rest"-variablen mappas resterande element i arrayen till denna. Praktiskt!

 

const clothing = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

const clothingCloned = [...clothing];
console.log(clothingCloned); // Outpput ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

// Kom ihåg att kopian INTE är ursprungsarrayen. Endast innehållet har kopierats
clothing === clothingCloned // false
# PRESENTING CODE

Exempel:  Skapa en kopia av en existerande array

const trains = ['🚋', '🚝', '🚉'];
const boat = ['🚤', '🚣', '🚢', '⛵'];

const transportation = [...trains, ...boat]
console.log(transportation) // Output ['🚋', '🚝', '🚉', '🚤', '🚣', '🚢', '⛵']

# PRESENTING CODE

Exempel: Slå ihop (merga) två arrayer

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]
# PRESENTING CODE

Alternativ: Metoden concat() för att slå ihop (merga) två arrayer

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]
# PRESENTING CODE

Alternativ: Metoden concat() för att slå ihop (merga) två arrayer

Skillnad concat() och ... ?

Exempelvis om en merge inte är en array

a = [1, 2, 3]
b = 'sports';

console.log(a.concat(b)) // [1, 2, 3, 4, 'sports']
console.log([...a, ...b]) 
// [1, 2, 3, 's', 'p', 'o', 'r', 't', 's']

Din verktygslåda 🧰

Du ska veta ungefär vad som behövs i vilken situation, du ska känna dig trygg med verktyget. Ok att kolla i manualen för att vara säker.

push() join() ES6
pop() ... rest-parameter
shift() och fler...
unshift() indexOf
slice() includes
splice()

Array metoder (iterativa)

forEach()

map()

filter()

reduce()

find()

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(degree) {
  

  
  
});


# ARRAYMETODER

Exempel forEach()

Higer-order funktion

Callbackfunktion

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(element) {
  
  if(element > 0) {
    console.log(`Today is frozen ${element}`);
  } else {
    console.log(`Today is above or just 0 ${element} `)
  }
  
});


# ARRAYMETODER

Exempel forEach()

Higer-order function

Callbackfunction

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(degree) {
  
  if(degree > 0) {
    console.log(`Today is frozen ${degree}`);
  } else {
    console.log(`Today is above or just 0 ${degree} `)
  }
  
});
// Varje iteration
// 0: function(-1)
// 1: function(-2)
// 2: function(-1)
// 3: function(0)
// ...


# ARRAYMETODER

Exempel forEach()

Higer-order function

Callbackfunction

Applicera en funktion som "mappar om" varje element i listan. Returnerar nya "mappade" arrayen.

const numbers = [65, 44, 12, 4];

function tenTimes(num) {
  return num * 10;
}

const mappedArray = numbers.map(tenTimes);
console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP

Med anonym funktion som parameter

const numbers = [65, 44, 12, 4];

const mappedArray = numbers.map(function(num) {
  return num * 10;
});

console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP

Med arrow-funktion

const numbers = [65, 44, 12, 4];

const mappedArray = numbers.map(num => {
  return num * 10;
});

console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP 

const app = document.getElementById('app')
const ul = document.querySelector('ul')

players = ['Romelu Lukaku', 'Kylian Mbappe', 'Vinicius Junior']

const list = players.map(player => {
	return `<li>${player}</li>`;
}).join('');

ul.innerHTML = list;
# PRESENTING CODE

Smidigt att generera HTML!

join() slår ihop arrayen till en sträng så att vi får applicerbar HTML!

Skapar en ny array med de element som uppfyller villkoret

const ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}
const filteredArray = ages.filter(checkAdult);

console.log(filteredArray) // Output: [32, 33, 40]

FILTER

Skapar en ny array med de element som uppfyller villkoret

const ages = [32, 33, 16, 40];

const filteredArray = ages.filter(age => {
  return age >= 18;
});

console.log(filteredArray) // Output: [32, 33, 40]

FILTER

"Reducerar" arrayen till ett slutgiltigt värde

const numbers = [175, 50, 25];

function reducerFn(accumulator, item) {
  return accumulator + item;
}

let total = numbers.reduce(reducerFn, 0); 
//0 är initiala värdet

console.log(total);

REDUCE

"Reducerar" arrayen till ett slutgiltigt värde

const numbers = [175, 50, 25];

let total = numbers.reduce((accumulator, item) => {
  return accumulator + item;
}, 0); 
//0 är initiala värdet

console.log(total);

REDUCE

Sammanfattning 👍

Returnerar det första element som uppfyller villkoret

const students = [
  {name: 'Tim', age: 31},
  {name: 'Tom', age: 29}, 
  {name: 'Tommy', age: 28}
]

const student = students.find((element) => {
  return element.age < 30;
});

console.log(student.name); // Output Tom

FIND

Returnerar index för det första element som uppfyller villkoret

const students = [
  {name: 'Tim', age: 31},
  {name: 'Tom', age: 29}, 
  {name: 'Tommy', age: 28}
]

const studentIndex = students.findIndex((element) => {
  return element.age < 30;
});

console.log(studentIndex); // Output 1

FINDINDEX

Returnerar 'true' om villkoret uppfylls för minst ett element, annars 'false'

const array = [1, 2, 3, 4, 5];

function even(element) {
  return element % 2 === 0;
}

console.log(array.some(even)); // Output: true

SOME

Returnerar 'true' om villkoret uppfylls på alla element, annars 'false'

const array = [1, 2, 3, 4, 5];

function even(element) {
  return element % 2 === 0;
}

console.log(array.some(even)); // Output: false

EVERY

Sorterar en array utifrån en jämförelsefunktion

 

Hur byter man till fallande ordning? 🤔

const numbers = [175, 50, 25];

let sortedAscending = 
    numbers.sort(comparisonFn); 

function comparisonFn(a, b) {
  //stigande ordning 
   if (a > b) { 
      return 1;
    }
    else if (a < b){
      return -1;
    }
    else {
      return 0;
    }
}

console.log(sortedAscending);

SORT

MDN Array.prototype.sort()

Din verktygslåda 🧰

Du ska veta ungefär vad som behövs i vilken situation, du ska känna dig trygg med verktyget. Ok att kolla i manualen för att vara säker.

forEach() some()
map() every()
filter() sort()
reduce()
find()
findIndex

JavaScript Arrayer

By sandra-larsson

JavaScript Arrayer

  • 47

More from sandra-larsson