#interview #js
function reduce(arr, callback, initVal) {
let acc = initVal === 'undefined' ? 'undefined' : 0;
for (let i = 0; i < arr.length; i++) {
if (acc !== 'undefined') {
acc = callback(acc, arr[i], i, arr);
} else {
acc = arr[i];
}
}
return acc
}
const numbers=[1,2,3]
console.log(reduce(numbers,function(acc,val){
return acc+val
},0))function map(arr, callback) {
const newArr = [];
for (let i = 0; i < arr.length; i++) {
const result = callback(arr[i], i, arr);
newArr.push(result);
}
return newArr;
}function customSome(callback) {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
return true;
}
}
return false;
}
Array.prototype.customSome = customSome;function filter(array, callback) {
const filteredArray = [];
for (let i = 0; i < array.length; i++) {
if (callback(array[i], i, array)) {
filteredArray.push(array[i]);
}
}
return filteredArray;
}Quyidagi funksiyani bir necha marta chaqirish orqali, counterni increment qilishni, yo'li self invoked funksiyadan foydalanish
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
console.log(add())for (var i = 1; i <= 10; i++) {
function foo(x) {
setTimeout(() => {
console.log(x);
}, 0);
}
foo(i);
}function addGlobalEventListener(type, selector, callback, options) {
document.addEventListener(type, e => {
if (e.target.matches(selector)) callback(e)
}, options)
}
addGlobalEventListener("click", ".btn", () => {
console.log("Clicked Button")
}, { once: true })Nullish operator qattiqroq tekshiradi logical OR(||) operatorga qaraganda
const x = false;
const y = 0;
const z = '';
const a = x || 'default'; // 'default'
const b = y || 'default'; // 'default'
const c = z || 'default'; // 'default'
const d = x ?? 'default'; // false
const e = y ?? 'default'; // 0
const f = z ?? 'default'; // ''
Javascript dasturlash tilida bir nechta funksiya turlari bor.
1.Function declaration. Ushbu tur juda keng foydalaniladi. Function declarationda funksiya
Misol:
Bu turdagi funksiyani siz anonim tarzda yaratasiz va biror bir o'zgaruvchiga tenglashtirasiz.
Misol:
Misol:
Misol:
1.Function declaration. Ushbu tur juda keng foydalaniladi. Function declarationda funksiya
"function" kalit so'zi bilan boshlanadi va hohlagan nomingizni yozasiz.Misol:
function myFunction(param1, param2) {
// Function body
}
2. Function expression. Bu turdagi funksiyani siz anonim tarzda yaratasiz va biror bir o'zgaruvchiga tenglashtirasiz.
Misol:
const myFunction = function(param1, param2) {
// Function body
};
3. Arrow functionlar. Bu funksiya turi ES6 versiyada kirgizilgan, Bu funksiyalar doim anonimus bo'ladi.Misol:
const myFunction = (param1, param2) => {
// Function body
};
4. Konstrkuturli funksiyalar. Bu turdagi funksiyalar yangi funksiyali obyekt yaratish uchun ishlatiladiMisol:
const myFunction = new Function("param1", "param2", "return param1 + param2");Javascriptda first-class function nima?
First-class function biror bir o'zgaruvchiga tenglashtirilib, boshqa bir funksiya uchun argument sifatida ishlatilinishi mumkin
Misol:
First-class function biror bir o'zgaruvchiga tenglashtirilib, boshqa bir funksiya uchun argument sifatida ishlatilinishi mumkin
Misol:
function multiplyByTwo(num) {
return num * 2;
}
function mapArray(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i]));
}
return result;
}
const numbers = [1, 2, 3, 4];
const doubledNumbers = mapArray(numbers, multiplyByTwo);
console.log(doubledNumbers); // [2, 4, 6, 8]
Bu misolda multiplyByTwo nomli funksiya yaratdik. Shungdek mapArray funksiyani argumentlari, array, va funksiya qabul qiladigan qilib yaratdik. Va natijada biz multiplyByTwo funksiyasini argument sifatida ishlatishimiz va callback qilib chaqirishimiz mumkin#vuejs #interview
Vue.js xususiyatlarini sanab bering?
Quyida javob: 👇
https://telegra.ph/Vuejs-xususiyatlarini-sanab-bering-05-12
Vue.js xususiyatlarini sanab bering?
Quyida javob: 👇
https://telegra.ph/Vuejs-xususiyatlarini-sanab-bering-05-12
Telegraph
Vue.js xususiyatlarini sanab bering?
1.Virtual DOM Vue.js-dagi Virtual DOM - bu foydalanuvchiga interfeysni ko'rsatish samaradorligi oshirish uchun foydalaniladigan usul. HTML DOM-ni to'g'ridan-to'g'ri manipulyatsiya qilish o'rniga (bu sekin va resurs talab qilishi mumkin), Vue.js JavaScript…
#vuejs
Bir qancha reflar yaratishni oldini ol!
reactive object orqali biz state data ni ixchamlashtirishimiz mumkin.
Quyidagi misollarni taqqoslang:
Bir qancha reflar yaratishni oldini ol!
reactive object orqali biz state data ni ixchamlashtirishimiz mumkin.
Quyidagi misollarni taqqoslang:
// Just a bunch a refs :/
const firstName = ref('Michael');
const lastName = ref('Thiessen');
const website = ref('michaelnthiessen.com');
const twitter = ref('@MichaelThiessen');
Endi shuni yagona reactive objectga o'tkazamiz.// A single object to think about
const michael = reactive({
firstName: 'Michael',
lastName: 'Thiessen',
website: 'michaelnthiessen.com',
twitter: '@MichaelThiessen',
});#js #interview
HTML DOM nima?
HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:
HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.
HTML DOM nima?
HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:
HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.
#js #interview
DOM Content Loaded hodisasi nima?
DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.
DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!
Misol:
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik
DOM Content Loaded hodisasi nima?
DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.
DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!
Misol:
<!DOCTYPE html>P.S
<html>
<head>
<title>JS DOMContentLoaded Event</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// handle the click event
console.log("clicked");
});
});
</script>
</head>
<body>
<button id="btn">Click Me!</button>
</body>
</html>
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik
#js #interview
Data attributelar nima❓
✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.
Masalan:
@seniorDevBlog
Data attributelar nima❓
✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.
Masalan:
<div
id="test-div"
data-first-name="Kyle"
data-last-name="Cook"
data-active
></div>
Uni quyidagicha o'qib olishimiz mumkinconst div = document.getElementById("test-div")
console.log(div.dataset)
{
active: ""
firstName: "Kyle"
lastName: "Cook"
}
Real misol sifatida esa quyidagi kodga e'tibor bering:<button data-modal-id="modal-1">Open Modal 1</button>
<button data-modal-id="modal-2">Open Modal 2</button>
<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>
const buttons = document.querySelectorAll("[data-modal-id]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const modalId = button.dataset.modalId
const modal = document.getElementById(modalId)
modal.classList.add("show")
})
})
Yuqorida biz 2 ta turli xil modalni ishga tushirish uchun data attributelardan foydalanib , yagona eventListener funksiya yozdik.@seniorDevBlog
👍2
#js #interview
Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓
Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓
✅ const myObj = { a: 1, b: 2 };
Object.defineProperty(myObj, 'a', { writable: false });
myObj.a = 3; // error: cannot assign to read only property 'a'
@seniorDevBlog#js #tips
Javascriptda "default exports" ishlatishni oldini olgan afzal
Bilganingizdek, JavaScriptda funksiyalarni almashishning ikki xil usuli mavjud: default exports va named exports. default exports moduldan bitta qiymatni eksport qilish uchun ishlatiladi, named exports esa moduldan bir nechta qiymatlarni eksport qilish imkonini beradi.
Funksiya yoki class kabi moduldan biror narsani eksport qilmoqchi bo'lsangiz, default exports asqotadi. Shuning bilan birga, named exports moduldan bir vaqtning o'zida bir nechta narsalarni eksport qilmoqchi bo'lganingizda juda mos keladi.
Ushbu maqolada nega default exportsdan foydalanish tavsiya etilmasligi va undan qochish kerakligini ko'rib chiqamiz.
👉 Maqola Havolasi
@seniorDevBlog
Javascriptda "default exports" ishlatishni oldini olgan afzal
Bilganingizdek, JavaScriptda funksiyalarni almashishning ikki xil usuli mavjud: default exports va named exports. default exports moduldan bitta qiymatni eksport qilish uchun ishlatiladi, named exports esa moduldan bir nechta qiymatlarni eksport qilish imkonini beradi.
Funksiya yoki class kabi moduldan biror narsani eksport qilmoqchi bo'lsangiz, default exports asqotadi. Shuning bilan birga, named exports moduldan bir vaqtning o'zida bir nechta narsalarni eksport qilmoqchi bo'lganingizda juda mos keladi.
Ushbu maqolada nega default exportsdan foydalanish tavsiya etilmasligi va undan qochish kerakligini ko'rib chiqamiz.
👉 Maqola Havolasi
@seniorDevBlog
Telegraph
JavaScriptda "default exports" ishlatishni oldini olgan afzal
Named exports Yuqoridagi misolda biz add nomli funksiyani add.ts faylidan turib eksport qildik.Quyida esa biz app.ts fayldan turib uni funksiya nomi orqali import qilib oldik. Default exports Endi keling yuqoridagi funksiyamizni default exports yordamida…