PHPdan keyin Javascriptda (Jquery emas) kod yozishni boshlaganimda tilning ba’zi o’ziga xosliklari men uchun yangilik bo’lgan. Quyida ularni tushuntirishga harakat qilaman.
Aminmanki, siz qaysi tildagi dasturchi bo’lishingizdan qat’iy nazar, qachondir Javascript’da kod yozishingizga to’g’ri keladi. Qo’shimchasiga, dasturlashni o’rganmoqchi bo’lib yurganlarga ham PHPdan emas Javascriptdan boshlashni maslahat bergan bo’lardim.
this
Javascriptda this – bu keladigan joyiga (kontekstiga) qarab, turli qiymatlarni o’z ichiga oladi:, U global obyekt, klass obyekti (PHPdagi kabi) yoki funksiyaga bog’langan bo’lishi mumkin.
var person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName
}
}
person.fullName «John Doe» qaytaradi.
const va let
Javascriptda const bilan konstanta e’lon qilinadi.
const person = {}
person konstant – o’zgarmas qiymatga ega. Lekin! konstant obyekt va array e’lon qilib, uni to’ldirish mumkin!
person[firstName] = "John" person[lastName] = "Doe"
O’zgarmasligi shundaki, person ning o’ziga qiymat berish mumkin emas:
person = { firstName: "John", lastName: "Doe" }
^ Ishlamaydi, sababi person avvalroq const bilan e’lon qilib qo’yilgan. Ishlashi uchun, const’ni let’ga o’zgartirish kerak.
Aloqador mavzu: Javascriptda var, let va const
Nuqta-vergul kerakmas (deyarli)
PHP nuqta-vergulni ( ; ) kod/qator ajratuvchi sifatida ko’radi. Javascriptda esa, ba’zi holatlarni hisobga olmasa, qator ohirida nuqta-vergul shartmas. Javascript interpretatori yangi qatorni ham ajratuvchi sifatida ko’radi.
Ba’zi holatlarga
for (let i = 0; i < 10; i++) {}
kiradi.
Spread operatori
PHP 7.4 da nihoyat spread operatorini kiritishdi. Javascriptda bu avvaldan bor va juda qulay. Shuningdek yaramas mutatsiyalardan ham asraydi (mutatsiyalar haqida pastroqda).
const person = {
firstName: "John",
lastName: "Doe"
}
const employee = {
...person,
age: 25
}
console.log(employee) // { firstName: "John", lastName: "Doe", age: 25 }
Funksiyalarni argument sifatida ishlatsa bo’ladi
Funksiyani faqat nomini ishlatib, argument sifatida foydalanish, boshqa o’zgaruvchiga berish, va hk, o’zgaruvchilar bilan nima qilsangiz, funksiyada ham shuni amalga oshirish mumkin.
const notify = function(someVar, anotherVar, someFunc) {
someFunc(someVar)
}
function callbackFunc(funcVar) {
console.log(funcVar)
}
notify(1, 2, callbackFunc)
Yoki funksiyani argumentning o’zida e’lon qilish ham mumkin:
const notify = function(someVar, anotherVar, someFunc) {
someFunc(someVar)
}
notify(1, 2, function(funcVar) { console.log(funcVar) })
Funksiya ichida funksiya yozish mumkin
Bunda parent funksiyadagi o’zgaruvchilarni child funksiya ichida ishlatsa bo’ladi. Javascript’ni tushunish uchun this, scope va context’ni tushunib olishni maslahat bergan bo’lardim. 😉
function notify(someVar, anotherVar, someFunc) {
function sendEmail() {
// do something
}
}
Javascriptda array yo’q!
PHPda biz biladiganimiz – nomer indeksli array, string indeksli array (associative) array, object – barchasi Javascriptda bitta: object. Shuning uchun
const employee["john"] = {}
const employee.john = {}
bir xil. To’rtburchak qavslar, Array funksiyalari – barchasi maskirovka. Isboti:
typeof [] === "object" // true.Javascriptda class ham yo’q!
Ha, nomi bor, class’ga o’xshab ishlaydi. Lekin u class emas, shunchaki funksiyaning (obyektning) dekoratsiyasi. Masalan, quyidagi class va funksiyalar aslida bir xil.
class Person {
constructor(person) {
this.firstName = person.firstName
this.lastName = person.lastName
}
getFullName() {
return console.log(this.firstName + ' ' + this.lastName)
}
}
const employee = new Person({ firstName: "John", lastName: "Doe" })
va
const Person = {
firstName: null,
lastName: null,
getFullname: function() {
return this.firstName + ' ' + this.lastName
}
}
const employee = Person
employee.firstName = "John"
employee.lastName = "Doe"
employee.getFullname()
Sababi, Javascript – prototype’ga asoslangan dasturlash tili.
Shuningdek, Javascriptda class’da private o’zgaruvchi va private metod e’lon qilib bo’lmaydi (2020-yil ohiriga ko’ra).
Destrukturizatsiya
Obyekt yoki array o’zgaruvchi elementlari qiymatini bir vaqtning o’zida bir necha o’zgaruvchiga berish imkoniyati bor. Misollar:
const { id, name } = query // id = query.id, name = query.name
const { firstName, lastName } = { f: "John", l: "Doe" }
const [ year, month, day ] = "2020-11-20".split("-")
// Spread va destrukturizatsiya birgalikda
const person = { firstName: null, lastName: null }
const { ...person, age, occupation } = { firstName: "John", lastName: "Doe", age: 25, occupation: "Engineer" }
Property Value Shorthand
Agar object property qiymati o’zgaruvchi orqali berilsa va o’zgaruvchi hamda property nomi bir xil bo’lsa, ularni qisqartirish mumkin.
const firstName = "John"
const lastName = "Doe"
const person = {
firstName, // firstName: firstName,
lastName, // lastName: lastName
}
Strelkali funksiyalar
Konteksti (yoki this) yo’q bo’lgan funksiyalar ham mavjud. Bu ko’pincha funksiyani qisqartirish uchun qulay. Solishtirib ko’rishga:
const elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
]
// Har bir element nomining uzunligini massiv ko'rinishida qaytaradi: [8, 6, 7, 9]
elements.map(function(element) {
return element.length;
})
// Funksiyani strelka-funksiya ko'rinishida yozish:
elements.map((element) => {
return element.length;
})
// Agar bitta amal bo'ladigan bo'lsa, {} va return'ni ham qisqartirish mumkin
elements.map((element) => element.length)
// Agar argument bitta bo'lsa, qavslarni olib tashlasa bo'ladi
elements.map(element => element.length)
// O'zgaruvchi nomini qisqartiramiz ;)
elements.map(e => e.length)
// Agar object qaytarish kerak bo'lsachi? U holda object () orasiga olinadi.
elements.map(e => ({ length: e.length }))
Javascriptda tuzukroq tartiblash funksiyasi yo’q!
PHPda array’ni tartiblash funksiyalari talaygina, ular hayotimizni osonlashtirgan. Javascriptda faqat bitta .sort() funksiyasi bor. U harflar bo’yicha tartiblaydi, shunda ham to’g’ri tartiblamaydi.
// Noto'g'ri tartiblash [1, 4, 14, 9, 22, 5, 8].sort() // [1, 14, 22, 4, 5, 8, 9] [46, 't', 'Y', 'a', 'c', 'W'].sort() // [46, "W", "Y", "a", "c", "t"] (avval sonlar, keyin katta harflar, ohirida kichik harflar) // To'g'ri tartiblash [1, 4, 14, 9, 22, 5, 8].sort((a, b) => a - b) // [1, 4, 5, 8, 9, 14, 22] [46, 't', 'Y', 'a', 'c', 'W'].sort((a, b) => a.localeCompare(b)) // [46, "a", "c", "t", "W", "Y"]
Promise
PHPda yozilgan kod ketma-ketlikda, qatorma-qator ishlasa, Javascriptdagi ba’zi Promise funksiyalar kelajakda ishlaydi. Masalan:
const wait = time => new Promise((resolve) => setTimeout(resolve, time))
wait(3000).then(() => console.log('Hello!'))
console.log('Bye!')
Kod ishlaganda dastlab «Bye!», 3 sekunddan keyin «Hello!» chiqaradi. PHPda dastlab, 3 sekund kutib «Hello!», keyin «Bye!» ko’rsatgan bo’lardi.
Promise funksiyaning bajarilishi yakunlanishini kutish uchun funksiyaNomi().then(() => { ... }) dan foydalanish kerak. ES6 da esa yengillik bor: Promise funksiya async kalit so’zi bilan e’lon qilinadi. Funksiyaning yakunlanishini kutish uchun funksiya nomidan oldin await so’zi ishlatiladi.
const wait = async (fn, delay) => setTimeout(fn, delay)
await wait(() => console.log('Hello!'), 3000)
console.log('Bye!')
Mutatsiyalar
Javascriptda primitiv ma’lumot tuzilmalari (string, boolean, number) o’zgaruvchiga qiymat berilganidan keyin, ular o’zgarmaydi, mutatsiyaga uchramaydi. Array va Object’da esa, ularning property’si o’zgarganda yoki yangi property qo’shilganda mutatsiyaga uchraydi.
const puppy = {
name: 'Dessi',
age: 9
}
puppy.age = 10
puppy object mutatsiyaga uchradi, uning age property’si o’zgardi.
Ko’pincha mutatsiyalar muammoga olib keladi. Boshqa misolni ko’ramiz.
const myFirstArr = [1, 2, 3, 4] const mySecondArr = myFirstArr myFirstArr.push(5) console.log(myFirstArr) console.log(mySecondArr)
myFirstArr = [1, 2, 3, 4, 5] bo’ldi, to’g’ri. mySecondArr chi? PHP dasturchi [1, 2, 3, 4] ga teng deb javob beradi, javob noto’g’ri. mySecondArr = [1, 2, 3, 4, 5] , mySecondArr ga ham 5 qo’shilgan!
const egg = { name: "Humpty Dumpty" };
const newEgg = egg;
newEgg.name = "Errr … Not Humpty Dumpty";
newEgg.name endi "Errr … Not Humpty Dumpty" ga teng. egg.name esa… u ham "Errr … Not Humpty Dumpty" 😀
Mana bu mutatsiya boshog’rig’i. E’tibor bergan bo’lsangiz, const mutatsiyadan himoya qilmaydi, u faqat o’zgaruvchiga boshqa qiymat berishdan saqlaydi xolos.
Mavzu: Nima uchun mutatsiyalar sodir bo’ladi?
Mutatsiyani chetlab o’tishning bir necha usullari bor. Ulardan eng oddiysi – yangi array’ga eski array’ni to’g’ridan to’gri bermasdan, spread operatori orqali qiymatini berish. Yuqoridagi misollarda mutatsiyadan saqlanish uchun quyidagicha yozish kerak:
const mySecondArr = [...myFirstArr]
const newEgg = {...egg}
Shunda bir array’dagi mutatsiya boshqasiga ta’sir qilmaydi.
Katta proyektlarda, masalan React’da tayyor bibliotekalardan foydalaniladi: https://immutable-js.github.io/immutable-js/
* * *
Hozircha shular. Men maqolada javascriptning g’alati ishlaydigan holatlarini chetlab o’tishga harakat qildim. Qiziqsangiz, bu yerda ular bilan tanishib chiqishingiz mumkin: https://javascriptwtf.com/