JavsScript CheetSheet 2022 🏢
🗡️
[OOP Example]
Create Class
class Valid {
constructor ( email , password , isValid ) {
this . email = email
this . password = password
this . isValid = isValid
}
validate ( ) {
if ( `${ ( this . password ) . length } ` >= 6 ) {
this . isValid = true
console . log ( 'isValid = ' + this . isValid ) ;
} else {
console . log ( 'isValid = ' + this . isValid ) ;
}
}
}
Class Extends
class Valid2 extends Valid {
constructor ( email , password , isValid , emailError = '' , passwordError = '' ) {
super ( email , password , isValid )
this . emailError = emailError
this . passwordError = passwordError
}
// Метод переопределяется если такое же имя в родительском классе
validate ( ) {
if ( this . password . length >= 6 && this . email ) {
this . isValid = true
console . log ( 'isValid = ' + this . isValid ) ;
}
if ( this . password . length < 6 ) {
this . isValid = false
this . passwordError = 'min length 6'
console . log ( 'isValid = ' + this . isValid ) ;
console . log ( 'Password Error: ' + this . passwordError ) ;
}
if ( ! this . email ) {
this . emailError = 'emailEmpty'
console . log ( 'Email Error: ' + this . emailError ) ;
}
}
}
Instance of Class
let valid6 = new Valid2 ( 'qwe@mail.yy' , '12345678' )
// Class method
valid6 . validate ( )
🧷
[Local Storage]
const out6 = document . querySelector ( '.out-6' ) ;
const b6 = document . querySelector ( '#b-6' ) ;
const a6 = {
'hello' : 6 ,
'hi' : 'mahai'
} ;
const t1 = ( ) => {
localStorage . setItem ( "a6_key" , JSON . stringify ( a6 ) ) ;
console . log ( 'JSON.stringify: ==> ' + a6 ) ;
const ls6 = localStorage . getItem ( "a6_key" ) ;
let newLs6 = JSON . parse ( ls6 ) ;
console . log ( 'JSON.stringify: ' + newLs6 ) ;
console . log ( typeof newLs6 ) ; // object
for ( let k in newLs6 ) {
out6 . innerHTML += `${ k } <br>` ;
console . log ( k ) ;
}
}
b6 . onclick = ( ) => t1 ( ) ;
localStorage . clear ( ) ;
📌
[map filter reduce find]
Array.prototype.map() takes an array, does something on its elements and returns an array with the transformed elements.
Array.prototype.filter() takes an array, decides element by element if it should keep it or not and returns an array with the kept elements only
Array.prototype.reduce() takes an array and aggregates the elements into a single value (which is returned)
Array.prototype.find() takes an array, and returns the first element that satisfies the provided condition.
const numbers = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 ] ;
const doubledNumbers = numbers . map ( n => n * 2 ) ; // [0, 2, 4, 6, 8, 10, 12]
const evenNumbers = numbers . filter ( n => n % 2 === 0 ) ; // [0, 2, 4, 6]
const sum = numbers . reduce ( ( prev , next ) => prev + next , 0 ) ; // 21
const greaterThanFour = numbers . find ( ( n ) => n > 4 ) ; // 5
const students = [
{ name : "Nick" , grade : 10 } ,
{ name : "John" , grade : 15 } ,
{ name : "Julia" , grade : 19 } ,
{ name : "Nathalie" , grade : 9 } ,
] ;
const aboveTenSum = students
. map ( student => student . grade ) // we map the students array to an array of their grades
. filter ( grade => grade >= 10 ) // we filter the grades array to keep those 10 or above
. reduce ( ( prev , next ) => prev + next , 0 ) ; // we sum all the grades 10 or above one by one
console . log ( aboveTenSum ) // 44 -- 10 (Nick) + 15 (John) + 19 (Julia), Nathalie below 10 is ignored
🧺
[XMLHttpRequest]
let xhttp = new XMLHttpRequest ( )
xhttp . onreadystatechange = function ( ) {
if ( this . readyState == 4 && this . status == 200 ) {
myFunction ( this . responseText )
}
}
xhttp . open ( "GET" , "http://localhost:8001?num1=888&num2=88" , true )
xhttp . send ( )
function myFunction ( data ) {
console . log ( data ) ;
}
🏝️
[this arrow f Call Apply]
// Контекст = область видимости + переменная this
// this = ссылка на объект, которая вызывает код в данный момент
- В стрелочной функции нет своего контеста (указывает на window)
function f1 ( n ) {
this . textContent = n
console . log ( this )
}
document . querySelector ( '#btn-1' ) . addEventListener ( "click" , ( ) => {
f1 . call ( document . querySelector ( '#btn-2' ) , 'Harry' ) // bind context to (btn-2) + pass argument
} )
! apply так же как и call но аргумент массив
⚱️
[Bind]
🩺
[Fetch]
fetch ( 'http://localhost:8001?num1=1&num2=88' )
. then ( response => response . json ( ) )
. then ( console . log ( 'Fetch Request ' ) )
. then ( iJson => console . log ( iJson ) )
. then ( data => {
console . log ( data ) ;
console . log ( `Status => ${ data . status } ` ) ;
console . log ( `URL => ${ data . url } ` ) ;
res = data
return console . log ( res ) ;
} )
🏳️🌈
[Promise All]
let num1 = new Promise ( ( resolve , rej ) => {
fetch ( 'http://localhost:8001?name=Kolya' ,
// method: "GET",
{ mode : 'no-cors' } ,
{ responseType : 'json' }
)
. then ( data => {
resolve ( data . text ( ) )
// console.log(data);
} )
} )
let num2 = new Promise ( ( res , rej ) => {
fetch ( 'http://localhost:8001?name2=Tuzik' , {
method : "GET" ,
mode : 'no-cors'
} )
. then ( data => {
console . log ( data . text ( ) ) ;
res ( data . text ( ) )
} )
} )
let arr = [ num1 , num2 ]
Promise . all ( arr ) . then ( value => {
console . log ( value [ 1 ] ) ;
console . log ( value [ 0 ] ) ;
} )
⏳
[Callback]
function f1a ( arr , cbFunc , where ) {
let newArr = arr . map ( item => myPow ( item ) )
cbFunc ( where , newArr )
}
const out3 = document . querySelector ( '.o3' )
const myPow = num => Math . pow ( num , 3 )
function drawThis ( block , elem ) {
block . textContent += elem
}
f1a ( [ 1 , 2 , 3 , 4 , 5 ] , drawThis , out3 )
- RED
+ Green green
! text in orange
# text in gray
@@ text in purple (and bold)@@