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));
–
const nums = [1, 2, 3]
Math.min(…nums) // 1
Math.max(…nums) // 3
The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.
… in front of an array will convert array to distinct variables and send them to the function
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...