ES6
arrow function – => this nie jest przenoszone
ternary operator – ${ condition ? true : false }
template literal, template strings – kod pomiędzy „ pozwala na łamanie lini kodu i zamieszczanie zmiennych jako ${}
const aga = 'Aga'; function getHello(name = 'Agnieszka') { console.log(`Hello ${name}`); } getHello(); //Agnieszka getHello(aga); //Aga
stringi zamknięte w ` ` (backticks) pozwalają na łatwiejsze zapisanie,
- nowa linia jest nową linią zamiast dawania \n i znak + łączenia ciagu z nowej lini
- wstawianie zmiennej jako ${name}
destructuring
wyciąganie zmienny z obiektu lub tablic, zapis do zmiennej za pomocą {}
const newEmployee { name: 'Tom', job: 'frontend', age: '33', hobby: { pet: 'cat', book: 'Sapkowski' } }; const { name, age} = newEmployee; console.log(`Hello ${name}, how are you?`); //Hello Tom, how are you? console.log(age); //33 function newJob({name, job, hobby: {book}}) { console.log('New man is ${name} and he is a ${job} and he like ${book}.`) //New man is Tom and he is a frontman and he like Sapkowski }
zagnieżdzony destructuring hobby: {book}
w tym przypadku hooby nie jest możliwe do użycia jako zmienne ${hobby}, stanowi tylko odnniesienie do zmiennej ${book}
destructuring tablic
Przenoszenie wartości pomiedzy plikami
//file myItemList.js const = myItemList = [ { name: "Name1", category: "cat1", city: "NYC", debt: 44, } { name: "Name2", category: "cat2", city: "LA", debt: 3, } { name: "Name3", category: "cat2", city: "WRO", debt: 15, } { name: "Name4", category: "cat2", city: "WRO", debt: 1, } ]; module.exports = myItemList; //new file const myItemList = require('./'myItemList');
filter
zwraca nową tablice spełniającą określony warunek:
const newItemList = myItemList.filter(item => { return item.category === 'cat2'; }); const newItemList = myItemList.filter(item => item.category === "cat2"); const newItemList = myItemList.filter(({categoty}) => category === "cat2");
find
zwraca pierwszy element spełniający określony warunek:
const myName = myItemList.finf(item => item.name === "Name1");
map
zwraca nową tablice z wykonanymi operacjami na elementach
const myFriends = myItemList.map(item => { return '${item.name} from ${item.city}'; }); const myFriends = myItemList.map({name, city}=> { return '${name} from ${city}'; });
reduce
accumulator object – trzyma wynik każdej operacji zwróconej podczas iteracji po tablicy
po wywołaniu funkcji określamy poczatkową wartość accumulator object
const totalDebt = myItemList.reduce((acc, item) => { return acc + item.debt }, 0);
łączenie:
policzenie zadłuzenia dla znajomych z danej miejscowości:
const debtsOfWro = myItemList .filter(item => item.city === "WRO") .reduce((acc, item) => acc + item.debt, 0); const debtsOfWro = myItemList .filter(({city}) => city === "WRO") .reduce((acc, {debt}) => acc + debt, 0);
the Promise object represents the eventual completion (or failure) of an asynchronous operations, and its resulting value.
const name = "jim holden"; const hero = { [name]: "hello", [1+3]: "Hi!" } hero { "jim holden" : "hello", 3: "Hi!" }
kiedy wartość i deklaracja są takie same pomijamy przypisanie:
const a = "Jim Holden"; const b = true; const c = {}; const obj = { a, b, c }
–
Closures – funkcja ma dostęp do zmiennych rodzica ale do dzieci nie.
Currying – proces konwersji funkcji zawierającej wiele argumentów w funkcje biorące po jednym argumencie
const multiply = (a, b) => a*b; const curriedMultiply = (a) => (b) => a*b; const multiplyBy5 = curriedMultiply(5); multiply(3,4); //12 curriedMultiply(3)(4); //12 multiplyBy5(50); //250
Compose – stworzenie jednej funkcji z dwóch osobnych, gdzie output jednej funkcji jest inputem drugiej
const compose = (f,g) => (a) => f(g(a)); const sum = (num) => num + 1; compose(sum, sum)(5); //7 sum(sum(5));
–
Hope this helps and happy coding :)
Zobacz jeszcze
Rejestracja custom post
dodanie custom post type w pliku function.php a najlepiej w osobnym pliku custom-posts.php który podpinamy do function.php poprzez: include_once...