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);
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...