JavaScript – różne

zamieszczenie atrybutu defer w znaczniku html script pozwala na pobranie zamieszczonego w parametrze src skryptu równolegle z ładowaniem strony ale wykonanie go kiedy strona zostanie już wyrenderowana. Czyli uruchamia go jakby był po zamknięciu body.

< script defer src='app.js' > < / script >

 

template literals

const rect = box.getBoundingClientRect() – zwraca nam informacje/obiekt DOMRect o prostokącie otaczającym div.box, gdzie mamy wartości takie jak: hight, width, top, bottom, left, right, x, y
wartości top, bottom odnoszą się do odległości miedzy top okna przeglądarki a top lub bottom wskazanego diva
wartości left, right odnoszą się do odległości od lewej krawędzi okna przeglądarki a lewą, prawą krawędzią wskazanego diva

wartość x jest wartością x górnego, lewego rogu diva, czyli odległością od góry okna przeglądarki
wartość y jest wartością y górnego, lewego rogu diva, czyli odległością od lewej strony okna przeglądarki

różnica w typach zmiennych

zmienne typu primitive:

  • string
  • number
  • boolean
  • null
  • undefined

zmienne typu object:

  • array
  • object
  • function
  • map
  • set

Główną różnicą jest przypisywanie wartości. W przypadku zmiennych typu primitive, masz doczynienia z konkretnymi wartościami, więc kiedy przypiszesz wartość jednej zmiennej do drugiej, robisz kopię jej wartości. Następnie kiedy nadpiszesz wartość jednej zmiennej, obie beda miały odmienne wartości.
Zmiana jednej zmiennej nie wpływa na drugaKażde przypisanie zmiennej odwołuje się do tych samych wartości, nie sa one odseparowane, ale tym samym. NIe tworzysz nowego obiektu poprzez przypisanie, ale tworzysz referencję do tego samego miejsca w pamięci.

let user1 = {name: "Anna", age: 32};
let user2 = user1;

user2.name = 'Tom';

console.log(user1); // Tom
console.log(user2); // Tom

Aby tego uniknąć i stworzyć jeden obiekt na podstawie drugiego możesz użyć spread operator { …name}, wtedy każdy z obiektów będzie oddzielnym obiektem:

let user1 = {name: "Anna", age: 32};
let user2 = { ...user1};

user2.name = 'Tom';

console.log(user1); // Anna
console.log(user2); // Tom

alternatywa dla foreach

Nie zawsze użycie forEach jest najlepszym rozwiązaniem, JS oferuje kilka innych podejść:

  • arr.some(x => x > 1)
  • arr.every(x => x > 0)
  • arr.find(x => x > 1)
  • arr.findIndex(x => x > 1)
  • arr.flatMap(x => [x, x * 2])

Poniższe metody nie modyfikują tablicy tylko tworzą nową i w niej zwracają obliczone wartości. Czyli transformujemy dane z jednej tablicy na drugą.

  • Metoda map zwraca nową tablicę poprzez dodanie funkcji to każdego elementu tablicy na jakiej ją wywołujemy. Czyli dzięki map przekształcisz dane z jednej tablicy w drugą.
  • Metoda filter zwraca nową tablicę zawierającą tylko te elementy, które spełniły konkretne wymagania, warunek który podajemy w callbacku musi zwrucić true, wtedy element 'przechodzi’ do nowej tablicy.
  const numbers = [1,2,3,4];
  const newArr = numbers.map((n) =>{
    return n * 3;
  });
  console.log(newArr); // [3, 6, 9, 12]

  const numbersA = [1,2,3,4,5,6,7,8,9,10];
  const newArrA = numbersA.filter((n) => {
    return n % 2 !== 0;
  });
  console.log(newArrA); // [1, 3, 5, 7, 9]

użycie map na tablicy obiektów, ze zmiana tylko jednego parametru obiektu

  const users = [
    {name: 'Krin', subscription: 56, city: 'Berlin'},
    {name: 'Suzanne', subscription: 24, city: 'Milan'},
    {name: 'Marlene', subscription: 49, city: 'Barcelona'},
    {name: 'Ramon', subscription: 119, city: 'Malaga'},
    {name: 'Dawn', subscription: 68, city: 'Gdańsk'},
    {name: 'Andrew', subscription: 18, city: 'Palermo'}
  ];

  const blackFriday = users.map((user) => {
    return {
      ...user,
      subscription: user.subscription *0.3
    }
  });

  const names = users.map((user) => {
    return user.name
  });

  const plans = users.map((user) => {
    let plan;
    if(user.subscription < 20) plan = 'bronze';
    else if (user.subscription < 50) plan = 'silver';
    else plan = 'gold';
    return {...user, plan};
  });

One line arrow function

Notacja którą możesz wykorzystać np. podczas definiowania zmiany na tablicy z wykorzystaniem metody map, kiedy mamy tylko jeden parametr i jedynym co robi callback funkcji jest return możemy skrócić zapis .map do jednej lini, ta notacja nazywa się one line arrow function.

const newArr = numbers.map(num => num * 3);
const goodPrice = users.filter(user => user.subscription < 50);
javascript

Hope this helps and happy coding :)

Zobacz jeszcze

sprawdzenie wersji jQuery w oknie przeglądarki

w oknie konsoli przeglądarki wpisujemy polecenie $().jquery; lub $.fn.jquery i wyświetla nam się wersja jQuery użyta na danej stronie lub info o braku tej...

Programowanie zorientowane obiektowo - php

OOP (ang. Object-Oriented Programming) - programowanie zorientowane obiektowo Proceduralny php od obiektowego różni się tym, że w proceduralnym php wszystkie elementy mamy w jednym pliku,...