200 سؤال نظري جافا سكريبت

يوم جيد ، أيها الأصدقاء!



فيما يلي قائمة بالثاني مائة سؤال عن أساسيات JavaScript من هذا المستودع ، مع إجابات قصيرة وروابط إلى Ilya Kantor's Modern JavaScript Tutorial (JSR) و MDN.



تتوفر هذه القائمة ، إلى جانب أكثر من 300 سؤال تدريب ، في تطبيقي .



يطبق التطبيق آلية لحفظ السؤال المدروس ، كما يوفر العمل في وضع عدم الاتصال.



أعتذر عن أي أخطاء محتملة وأخطاء مطبعية. هو موضع تقدير أي شكل من أشكال ردود الفعل.



إصدار 14.09.2019



اطلع على أول 100 سؤال هنا .

101. ما هي استخدامات stopPropagation ()؟

تُستخدم هذه الطريقة لمنع الحدث من الظهور الفقاعي لأعلى أو أعلى السلسلة من أسلاف العنصر الهدف. بمعنى آخر ، يتوقف عن إرسال الحدث من العنصر الهدف إلى أسلافه. لنفكر في مثال:

<div onclick="f2()">
    <div onclick="f1()"></div>
</div>

function f1(event) {
    event.stopPropagation()
    console.log(' ')
}

function f2() {
    console.log(' ')
}

عند النقر فوق حاوية متداخلة ، يتم عرض رسالة "الحاوية الداخلية" في وحدة التحكم. إذا قمت بإزالة event.stopPropagation () ، فعند النقر فوق الحاوية المتداخلة ، سيتم عرض كلتا الرسالتين في وحدة التحكم.



JSR

MDN

102. ماذا تفعل عودة كاذبة؟

تُستخدم هذه العبارة في معالجات الأحداث من أجل:

• إلغاء سلوك المتصفح الافتراضي
• منع انتشار الحدث من خلال DOM
• إيقاف تنفيذ رد الاتصال وإعادة التحكم إلى وظيفة الاستدعاء

لاحظ أنه بدون تحديد قيمة الإرجاع ، ترجع عبارة الإرجاع غير محددة.



JSR

MDN

103. ما هو BOM؟

يسمح BOM أو (Browser Object Model) لـ JavaScript بالتفاعل مع المستعرض. يتضمن هذا النموذج كائنات مثل الملاح والموقع والتاريخ والشاشة و XMLHttpRequest وما إلى ذلك. بمعنى آخر ، BOMs هي كائنات إضافية يوفرها المستعرض للعمل مع كل شيء ما عدا المستند.

يرجى ملاحظة أن BOM ليس معياريًا ، لذلك قد يختلف تنفيذه في متصفحات مختلفة.







شبيبة

104. ما هو استخدام setTimeout ()؟

تُستخدم هذه الطريقة للتنفيذ المؤجل للمهمة. بمعنى آخر ، يسمح لك بتشغيل تنفيذ دالة أو تقييم تعبير بعد وقت معين (بالمللي ثانية). في المثال التالي ، نطبع رسالة إلى وحدة التحكم بعد ثانيتين:

setTimeout(() => console.log('!'), 2000)

//    ,   
const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

JSR

MDN

105. ما هو استخدام setInterval ()؟

تُستخدم هذه الطريقة لتنفيذ مهمة بشكل دوري. بمعنى آخر ، يسمح لك بتشغيل تنفيذ دالة أو تقييم تعبير بعد فترة زمنية معينة (بالمللي ثانية). في المثال التالي ، نطبع رسالة إلى وحدة التحكم كل ثانيتين:

setInterval(() => console.log('!'), 2000)

//    ,    
//    
let i = 0
const timer = setInterval(() => {
    console.log('!')
    i++

    if (i == 2) {
        clearInterval(timer)
    }
}, 2000)

في المثال الثاني ، الرسالة "Hello!" سيطبع على وحدة التحكم مرتين ، وبعد ذلك سيتوقف الموقت



JSR

MDN

106. لماذا يسمى JavaScript واحد مهدّد؟

JavaScript هي لغة برمجة مفردة مترابطة أو متزامنة. هذا يعني أنه يمكن تنفيذ مهمة واحدة فقط في كل مرة. إذا كانت المهمة معقدة ، فقد يستغرق إكمالها وقتًا طويلاً ، وخلال هذا الوقت سيتم حظر الخيط الرئيسي لتنفيذ التعليمات البرمجية. يعني حظر البث بدوره عدم وجود تفاعل على الصفحة. توقف المتصفح عن الاستجابة لإجراءات المستخدم والأحداث الأخرى. لحل هذه المشكلة ، يتم استخدام عمليات الاسترجاعات والوعود وعدم التزامن / الانتظار والعاملين والأدوات الأخرى للعمل مع التعليمات البرمجية غير المتزامنة. في JavaScript ، على عكس Java أو Go أو C ++ على سبيل المثال ، لا توجد طريقة لإنشاء سلاسل عمليات أو عمليات إضافية.



JSR

MDN

107. ما هو تفويض الحدث؟

تفويض الحدث هو تقنية يتم فيها تسجيل حدث على أحد الوالدين للتعامل مع الأحداث التي يرفعها الأطفال.

غالبًا ما تُستخدم لمعالجة نقرات الأزرار في حاوية تجميع أو لتعديل حقول إدخال النص في النماذج ، على سبيل المثال:

<form>
    <input type="text" class="first-input">
    <input type="text" class="second-input">
</form>

<div>
    <button class="first-button">click</button>
    <button class="second-button">click</button>
</div>

const form = document.querySelector('form')
const buttons = document.querySelector('div')

form.addEventListener('input', event => {
    console.log(event.target.className)
})

buttons.addEventListener('click', event => {
    console.log(event.target.className)
})

في المثال أعلاه ، بدلاً من تسجيل المعالجات على العناصر الفرعية ، نقوم بتسجيلها في العناصر الأصلية. يؤدي إدخال نص في حقل أو النقر فوق زر إلى إخراج اسم فئة العنصر المقابل لوحدة التحكم.



شبيبة

108. ما هو ECMAScript؟

ECMAScript هي لغة البرمجة وراء JavaScript. هذا نوع من النمط أو المخطط الذي تم "إنشاء" جافا سكريبت بواسطته. تم توحيد ECMAScript في مواصفات ECMA-262 من قبل منظمة المعايير Ecma International.



JSR

MDN

109. اسم ميزات بناء جملة JSON

يحتوي بناء جملة JSON على الميزات التالية:

• البيانات هي أزواج المفتاح / القيمة
• يتم تغليف المفتاح والقيمة بعلامات اقتباس مزدوجة ، ما لم تكن القيمة رقمًا ("المفتاح": "القيمة")
• البيانات مفصولة بفواصل
• يتم لف الأشياء بأقواس متعرجة
• المصفوفات - في المربع

JSR

MDN

110. ماذا تفعل JSON.stringify ()؟

عند إرسال البيانات إلى الخادم ، يجب أن يكون لها تنسيق سلسلة خاص. تُستخدم طريقة JSON.stringify () لتحويل كائن إلى سلسلة JSON:

const user = { name: '', age: 30 }
const str = JSON.stringify(user)
console.log(str) // {"name":"","age":30}

JSR

MDN

111. ماذا يفعل JSON.parse ()؟

عند تلقي البيانات من الخادم ، يكون لديهم تنسيق سلسلة خاص. تُستخدم طريقة JSON.parse () لتحويل هذه البيانات إلى كائن JavaScript:

const str = { "name":"","age":30 }
const user = JSON.parse(str)
console.log(user) // {name: "", age: 30}

JSR

MDN

112. ما هو JSON؟

عند تبادل البيانات بين العميل والخادم ، يمكن أن تكون هذه البيانات سلاسل فقط. نظرًا لأن JSON نص ، فهو مثالي لذلك. يمكن أيضًا استخدامه كتنسيق بيانات بواسطة أي لغة برمجة ، إلى جانب تنسيقات أخرى مثل XML أو Protobuf.



JSR

MDN

113. ما هو PWA (تطبيق الويب التقدمي - تطبيق الويب التقدمي)؟

باختصار ، PWAs هي مواقع ويب تتصرف مثل التطبيقات الأصلية. يمكن تثبيتها على الهاتف أو الكمبيوتر ، وعادة ما تعمل أيضًا في وضع عدم الاتصال. بالنسبة لهذا الأخير ، يتم استخدام عمال الخدمة وواجهة التخزين المؤقت. تتمثل ميزة PWAs على تطبيقات الهاتف المحمول في حجمها وسهولة تطويرها النسبية. أيضًا ، لا تحتاج إلى إنفاق الموارد على إنشاء تطبيقين لموقع واحد - الويب والجوال. كما أنه يحافظ على تجربة مستخدم جيدة.



MDN

114. ما هو استخدام clearTimeout ()؟

تُستخدم هذه الطريقة لإيقاف تشغيل مؤقت بواسطة setTimeout (). للقيام بذلك ، تتم كتابة معرف المؤقت إلى متغير ، ثم يتم تمريره إلى clearTimeout () كوسيطة.

const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

في المثال أعلاه ، بعد ثانيتين ، يتم عرض رسالة "Hello!" على وحدة التحكم ، وبعد ذلك يتوقف المؤقت. يتم ذلك حتى يتمكن جامع البيانات المهملة من إزالة المؤقت الذي تم تشغيله.



JSR

MDN

115. ما هي استخدامات clearInterval ()؟

تُستخدم هذه الطريقة لإيقاف مؤقت بدأ بـ setInterval (). للقيام بذلك ، تتم كتابة معرف المؤقت إلى متغير ، ثم يتم تمريره إلى clearInterval () كوسيطة.

let i = 1
const timer = setInterval(() => {
    console.log(i)
    i++

    if (i === 3) clearInterval(timer)
}, 1000)

في المثال أعلاه ، تتم طباعة قيمة المتغير i على وحدة التحكم كل ثانية ، والتي تزداد بمقدار 1 (1 ، 2) في كل مرة. عندما أصبح 3 ، يتوقف المؤقت.



JSR

MDN

116. كيف يمكنني إعادة التوجيه؟

للقيام بذلك ، يمكنك استخدام خاصية الموقع لكائن النافذة:

location.href = 'newPage.html'
// 
location.replace('newPage.html')
// 
location.assign('newPage.html')

MDN

117. كيفية التحقق من وجود سلسلة فرعية في سلسلة؟

هناك ثلاث طرق على الأقل للقيام بذلك.

String.prototype.includes ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.includes(subStr) // true

String.prototype.indexOf ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.indexOf(subStr) !== -1 // true

RegExp

const mainStr = 'hello'
const regex = /hel/
regex.test(mainStr) // true

JSR

MDN - يتضمن

MDN - indexOf

MDN - test

118. كيف تتحقق من صحة عنوان البريد الإلكتروني؟

يمكن القيام بذلك باستخدام HTML ، عن طريق تعيين نوع حقل الإدخال إلى قيمة البريد الإلكتروني (<input type = "email">). ومع ذلك ، لا تعتبر هذه الطريقة موثوقة للغاية. لذلك ، عادةً ما يتم التحقق من صحة البريد الإلكتروني باستخدام تعبير عادي. من المستحسن القيام بذلك على جانب الخادم حيث قد يتم تعطيل JavaScript على العميل:

const validateEmail = email =>
    /\S+@\S+.\S+/
        .test(email.toString()
        .toLowerCase())
const email = 'myemail@example.com'
validateEmail(email) // true

يستخدم هذا المثال أحد أبسط التعبيرات العادية للتحقق من صحة عنوان البريد الإلكتروني. يبدو التعبير الأكثر موثوقية كما يلي (RFC 2822): [a-z0-9! # $٪ & '* + / =؟ ^ _ \ `{|} ~ -] + (؟:. [A-z0-9! # $٪ & '* + / =؟ ^ _ \ `{|} ~ -] +) * @ (؟: [a-z0-9] (؟: [a-z0-9 -] * [a-z0- 9]) ؟.) + [A-z0-9] (؟: [A-z0-9 -] * [a-z0-9])؟

119. كيف أحصل على URL الحالي؟

للقيام بذلك ، يمكنك استخدام خاصية الموقع لكائن النافذة أو خاصية URL لكائن المستند:

console.log(' URL', location.href)
console.log(' URL', document.URL) //  Chrome     " URL chrome-search://local-ntp/local-ntp.html"

MDN - الموقع

MDN - document.URL

120. ما هي خصائص كائن الموقع؟

يمكن استخدام خصائص كائن الموقع للحصول على أجزاء من عنوان URL للصفحة الحالية:

• href - عنوان URL كامل
• الأصل - البروتوكول والمضيف والمنفذ (الأصل ، المستخدم في سياسة المنشأ المشتركة (SOP) ومشاركة الموارد (CORS))
• بروتوكول
• المضيف - المضيف والميناء
• اسم المضيف - المضيف
• ميناء
• اسم المسار - المسار
• البحث - سلسلة الاستعلام بعد؟
• تجزئة - سلسلة الاستعلام بعد # (مرساة)
• اسم المستخدم - اسم المستخدم قبل المجال
• كلمة المرور - كلمة المرور قبل المجال

MDN

121. كيفية الحصول على سلسلة الاستعلام؟

يمكنك استخدام مُنشئ URL لهذا:

const url = new URL('https://example.com?foo=1&bar=2')
console.log(url.search) // ?foo=1&bar=2
console.log(url.searchParams.get('foo')) // 1

MDN

122. كيفية التحقق من وجود خاصية في كائن؟

هناك ثلاث طرق على الأقل للقيام بذلك.

في المشغل

const user = { name: '' }
console.log('name' in user) // true
console.log(!('age' in user)) // true

أسلوب HasOwnProperty ()

const user = { name: '' }
console.log(user.hasOwnProperty('name')) // true
console.log(!user.hasOwnProperty('age')) // true

مقارنة مع غير محدد

const user = { name: '' }
console.log(user.name !== undefined) // true
console.log(user.age === undefined) // true

JSR

MDN - لـ ... في

MDN - hasOwnProperty

123. كيف تتكرر على الخصائص المعدودة لكائن؟

للقيام بذلك ، يمكنك استخدام for ... in loop مع طريقة hasOwnProperty () لاستبعاد الخصائص الموروثة.

const user = {
    name: '',
    age: 30
}

for (key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(\`${key}: ${user[key]}\`) // name:  age: 30
    }
}

JSR

MDN

124. كيفية التحقق من أن الكائن فارغ؟

هناك ثلاث طرق على الأقل للقيام بذلك.

طريقة المدخلات () Object

const obj = {}
console.log(Object.entries(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.entries(obj2).length === 0 && obj2.constructor === Object) // false

طريقة Object.keys ()

const obj = {}
console.log(Object.keys(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.keys(obj2).length === 0 && obj2.constructor === Object) // false

لـ ... in loop و Object.hasOwnProperty () method

const obj = {}
const obj2 = {key: 'value'}

const isEmpty = obj => {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) return false
    }
    return true
}

console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false

JSR - كائنات JSR

- مفاتيح الكائنات والقيم والمدخلات

MDN - Object.entries

MDN - Object.keys

MDN - لـ ... في

MDN - Object.hasOwnProperty

125. ما هو كائن الحجج؟

الوسيطات عبارة عن كائن يشبه المصفوفة (مصفوفة زائفة) يحتوي على الوسائط التي تم تمريرها إلى الوظيفة:

function sum () {
    let total = 0
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total

    // 
    let total = 0
    for (const i of arguments) {
        total += i
    }
    return total

    // 
    return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

لاحظ أن دالات الأسهم لا تحتوي على وسيطات. بدلاً من الوسيطات ، يوصى باستخدام عامل التشغيل الباقي ... (معلمات أخرى) ، والذي يعمل في كل من الوظائف العادية ووظائف الأسهم:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

sum(1, 2, 3) // 6

JSR

MDN

126. كيفية كتابة الحرف الأول من السلسلة بأحرف كبيرة؟

يمكن القيام بذلك باستخدام طرق charAt () و toUpperCase () و slice ():

String.prototype.capitilize = function () {
    return this.charAt(0).toUpperCase() + this.slice(1)
}

console.log('hello'.capitilize()) // Hello

JSR

MDN - charAt

MDN - toUpperCase

MDN - شريحة

127. كيفية الحصول على التاريخ الحالي؟

يمكن القيام بذلك باستخدام كائن Date أو مُنشئ Intl.DateTimeFormat:

console.log(new Date().toLocaleDateString()) // 02.09.2020

console.log(new Intl.DateTimeFormat(
    'ru-Ru',
    {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    }
).format(new Date())) // , 2  2020 .

JSR - التاريخ

JSR = Intl

MDN - التاريخ

MDN - Intl.DateTimeFormat

128. كيفية المقارنة بين عنصرين من عناصر التاريخ؟

للقيام بذلك ، يجب ألا تقارن الكائنات نفسها ، ولكن ، على سبيل المثال ، القيم التي يتم إرجاعها بواسطة طريقة getTime ():

const d1 = new Date()
const d2 = new Date(d1)

console.log(d1.getTime() === d2.getTime()) // true
console.log(d1 === d2) // false

JSR

MDN

129. كيف نتحقق من أن الخط يبدأ على خط مختلف؟

يمكنك استخدام طريقة startWith () المضمنة للقيام بذلك:

console.log('Good morning'.startsWith('Good')) // true
console.log('Good morning'.startsWith('morning')) // false

وفقًا لـ CanIUse ، تدعم 94٪ تقريبًا من متصفحات



JSR MDN هذه الطريقة

130. كيفية إزالة المشاكل في السطر؟

للقيام بذلك ، يمكنك استخدام الطرق المضمنة trimStart () (بداية السطر) ، و trimEnd () (نهاية السطر) ، و trim () (بداية ونهاية السطر):

console.log('  hello world   '.trim()) // hello world

تقليم لا يعمل للمسافات بين الكلمات. في هذه الحالة ، يمكنك استخدام طريقة replace () والتعبير العادي:

console.log('hello   world'.replace(/s+/, ' ')) // hello world
//    
console.log('hello   world'.replace(/s{2,}/, ' ')) // hello world
console.log('key   value'.replace(/s{2,}/, ' -> ')) // key -> value

وفقًا لـ CanIUse ، يتم دعم trimStart () و trimEnd () بواسطة 93٪ من المتصفحات.



MDN

131. كيفية إضافة خاصية جديدة إلى كائن؟

هناك طريقتان للقيام بذلك. لنفترض أن لدينا كائنًا مثل هذا:

const obj = {
    name: '',
    age: 30
}

يمكننا إضافة خاصية جديدة إليها باستخدام إما تدوين النقطة أو القوسين:

obj.job = ''
obj['job'] = ''

يتمثل أحد الاختلافات بين هذه الطرق في أنه عند استخدام تدوين الأقواس ، يمكن أن يكون المفتاح المضاف رقمًا:

const obj = {}
obj[1] = ''
console.log(obj) // { 1: '' }
obj.2 = '' // SyntaxError: Unexpected number

JSR

MDN

132. هل التعبير! - عامل خاص؟

لا ليس كذلك. إنه مزيج من عاملين: المشغل! (لا منطقي) والعامل - (إنقاص). إذا كنت تستخدم التعبير المحدد بأي قيمة ، فسيتم أولاً تقليل هذه القيمة بمقدار واحد ، ثم يتم تحويلها إلى نوع منطقي ويتم عكسها:

const fun = val => !--val
const a = 1
const b = 2
console.log(fun(a)) // !0 -> not false -> true
console.log(fun(b)) // !1 -> not true -> false

JSR

MDN - منطقي وليس

MDN - إنقاص

133. كيفية تخصيص قيمة افتراضية لمتغير؟

للقيام بذلك ، يمكنك استخدام || (منطقي أو):

const a = b || 'default'

في هذه الحالة ، سيتم تعيين القيمة الافتراضية للمتغير a إذا كانت قيمة المتغير b خاطئة (خطأ ، غير محدد ، فارغ ، NaN ، 0 ، '').

إذا كنا نتحدث عن القيم القياسية لمعلمات الوظيفة ، فيمكن تعيينها على النحو التالي:

const greet = (name = '') => \`, ${name}!\`
console.log(greet('')) // , !
console.log(greet()) // , !

علاوة على ذلك ، يمكن للمعلمات اللاحقة استخدام قيم القيم السابقة كقيم قياسية:

const sum = (a = 1, b = a + 2) => a + b
console.log(sum()) // 4

JSR

MDN

134. كيفية إنشاء سلسلة متعددة الأسطر؟

في السابق ، كان يتم القيام بشيء من هذا القبيل (أحرف التحكم في التسلسل وفاصل السطر):

const str =
    ' ' + ' ' +
    ' ' + ' ' +
    '!'

// 
const str = '  a
  
 !'
console.log(str)
/*
     
     
    !
*/

الآن يفعلون ذلك على النحو التالي (نموذج حرفي):

const str =
    \` 
     
    !\`

JSR

MDN

135. هل يمكننا إضافة خصائص إلى الوظائف؟

نظرًا لأن الوظائف هي كائنات أيضًا ، يمكننا بسهولة إضافة خصائص إليها. يمكن أن تكون قيمة خاصية الوظيفة دالة أخرى:

function someFun () {}
someFun.somePropName = 'somePropValue'

console.log(someFun.somePropName) // somePropValue
//  
console.log(someFun.name) // someFun

const sum = (x, y) => x + y
console.log(sum(1, 2)) // 3

sum.curry = x => y => x + y
console.log(sum.curry(1)(2)) // 3

JSR

MDN

136. كيف تعرف كم عدد الوسائط التي تتوقع دالة أن تتلقاها؟

يمكن استخدام خاصية length لهذا:

const sum = (a, b, c) => +a + +b + +c
console.log(sum(1, '1', true)) // 3
console.log(sum(0, '', [])) // 0

console.log(sum.length) // 3

MDN

137. ما هو بوليفيل؟

يتم استخدام Polyfills لجعل JavaScript الحديثة تعمل في المتصفحات القديمة. يتم ذلك عن طريق تطبيق ميزات جديدة للغة باستخدام الصيغة القديمة. تسمى عملية تحويل الكود الجديد إلى كود قديم بالترجمة. برنامج التحويل الأكثر شيوعًا لرمز JavaScript هو Babel.

على سبيل المثال ، إحدى أحدث ميزات JavaScript هي طريقة Promise.allSettled () ، والتي ، بخلاف Promise.all () ، لا تنتهي عند رفض أي من الوعود التي تم تمريرها إليها.

ومع ذلك ، اعتبارًا من اليوم ، فإن دعم المستعرض وفقًا لبيانات CanIUse يبلغ 80٪ ، لذلك هناك حاجة إلى تعبئة متعددة :

const promise1 = Promise.resolve('promise1')
const promise2 = Promise.reject('promise2')
const promise3 = Promise.resolve('promise3')

//     Promise.allSettled()
Promise
    .allSettled([promise1, promise2, promise3])
    .then(console.log)
/*
    [
        {status: "fulfilled", value: "promise1"},
        {status: "rejected", reason: "promise2"},
        {status: "fulfilled", value: "promise3"},
    ]
*/

//    
//  Promise.all() = 94%
const allSettled = promises => {
    const wrappedPromises = promises
        .map(p => Promise.resolve(p)
        .then(
            val => ({
                status: 'fulfilled',
                value: val
            }),
            err => ({
                status: 'rejected',
                reason: err
            })))
    return Promise.all(wrappedPromises)
}
allSettled([promise1,promise2,promise3])
    .then(console.log)

JSR

MDN

138. ما هي استخدامات عبارات المواصلة والكسر؟

يتم استخدام تعليمة break للخروج من الحلقة. بعد إيقاف التكرار ، يستمر الكود:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible'
}

for (key in obj) {
    if (obj[key] === 'impossible') break

    console.log(obj[key]) // Everything is
}

console.log('possible') // possible

يتم استخدام عبارة المتابعة لتخطي التكرار:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible',
    4: 'possible'
}

for (key in obj) {
    if (obj[key] === 'impossible') continue

    console.log(obj[key]) // Everything is possible
}

MDN - استراحة

MDN - تابع

139. ما هي التسمية؟

تسمح لك الملصقات بتسمية الحلقات وكتل التعليمات البرمجية. يمكن استخدامها ، على سبيل المثال ، للخروج من حلقة أو كشرط لتنفيذ التعليمات البرمجية:

loop1:
for (let i = 0; i < 3; i++) {
    loop2:
    for (let j = 0; j < 3; j++) {
        if (i === j) continue loop1

        console.log(\`i = ${i}, j = ${j}\`)
    }
}

/*
    i = 1, j = 0
    i = 2, j = 0
    i = 2, j = 1
*/

يعتبر استخدام الملصقات ممارسة سيئة.



MDN

140. ما هي مزايا التصريح عن المتغيرات في بداية الكود؟

يوصى بالإعلان عن المتغيرات في بداية كل نص أو وظيفة. يوفر هذا الفوائد التالية:

• يحافظ على الكود نظيفا
• جميع المتغيرات في مكان واحد
• يتجنب إنشاء المتغيرات العالمية عن طريق الخطأ
• يمنع تجاوزات المتغيرات غير المرغوب فيها

JSR

MDN

141. ما هي مزايا بدء متغير عند التصريح عنه؟

يوصى بتهيئة جميع المتغيرات في وقت الإعلان. يوفر هذا الفوائد التالية:

• يحافظ على الكود نظيفا
• المتغيرات وقيمها في مكان واحد
• يمنع تعيين المتغيرات غير المهيأة على أنها غير محددة

JSR

MDN

142. ما هي التوصيات الرئيسية لإنشاء كائن

لإنشاء كائن ، بدلاً من كائن جديد منشئ الكائن Object () ، يوصى باستخدام تدوين الأقواس {}. أيضًا ، بناءً على نوع القيمة ، يوصى باستخدام ما يلي:

• سلسلة مثل "" بدلاً من سلسلة جديدة ()
• رقم ، على سبيل المثال 0 بدلاً من رقم جديد ()
• قيمة منطقية مثل false بدلاً من Boolean ()
• [] بدلاً من المصفوفة الجديدة ()
• // بدلاً من RegExp () الجديد
• function () {} بدلاً من الوظيفة الجديدة ()

JSR

MDN

143. كيف يتم تعريف مصفوفة بتنسيق JSON؟

مصفوفة JSON هي مصفوفة من كائنات JSON ، على سبيل المثال:

[
    { "name": "", "age": 30 },
    { "name": "", "age": 20 }
]

JSR

MDN

144. كيف يتم تنفيذ دالة ترجع عددًا صحيحًا عشوائيًا في نطاق معين؟

يمكن تنفيذ هذه الوظيفة باستخدام طرق Math.random () و Math.floor () للكائن Math:

const getRandomInteger = (min, max) => Math.floor(min + Math.random() * (max + 1 - min))

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. ما هو اهتزاز الشجرة؟

اهتزاز الشجرة هو إزالة رمز الوحدات غير المستخدمة. لا يتم تضمين هذه الوحدات في التجميع النهائي (الحزمة). لكي يتمكن منشئ الوحدات (المجمع) من تحديد الوحدات المستخدمة وأيها غير مستخدم ، يجب أن تستند بنية البرنامج إلى وحدات ES6. تم تعميم هذه التقنية بواسطة أداة التجميع Rollup.



MDN

146. ما هي استخدامات اهتزاز الأشجار؟

يمكن أن يؤدي اهتزاز الشجرة إلى تقليل حجم التجميع (الحزمة) بشكل كبير عن طريق إزالة رمز الوحدات غير المستخدمة منه. كلما كان حجم التجميع أصغر ، كان أداء التطبيق أفضل. يتم تنفيذ اهتزاز الشجرة في منشئي الوحدات النمطية مثل Rollup و Webpack.



MDN

147. ما هو التعبير العادي؟

التعبير العادي هو سلسلة من الأحرف التي تشكل نمط بحث. يمكن استخدام هذا النمط للبحث عن البيانات في النص ، مثل السلاسل الفرعية في سلسلة. تستخدم التعبيرات العادية على نطاق واسع في العديد من لغات البرمجة لعمليات البحث عن النص واستبداله. يبدو نمط regex العام كما يلي:

//

مثال:

const regex = /java/i
const str = 'JavaScript'
console.log(regex.test(str)) // true

يمكنك أيضًا استخدام مُنشئ RegExp لإنشاء تعبير عادي:

const regex = new RegExp('java', 'i')
const str = 'JavaScript'
console.log(regex.test(str)) // true

JSR

MDN

148. ما هي الطرق المستخدمة في التعبيرات النمطية؟

هناك طريقتان رئيسيتان تستخدمان في التعبيرات النمطية: exec () و test ().

يبحث أسلوب exec () عن تطابق تعبير عادي في السلسلة التي تم تمريرها إليها كوسيطة. يعتمد سلوك هذه الطريقة على ما إذا كان التعبير النمطي يحتوي على علامة g أم لا. إذا لم يتم إرجاع المباراة الأولى. إذا كان العلم g موجودًا ، فحينئذٍ:

• تقوم استدعاء exec () بإرجاع التطابق الأول وتخزين الموضع بعده في الخاصية lastIndex.
• تبدأ المكالمة التالية البحث في الموضع lastIndex ، وتعيد المطابقة التالية ، وتتذكر الموضع الذي يليها في lastIndex.
• إذا لم يكن هناك المزيد من التطابقات ، فستُرجع exec () قيمة خالية ويتم تعيين lastIndex على 0.

const str = 'Java  JavaScript -   '
const regex = /Java/g

let result
while (result = regex.exec(str)) {
    console.log(
        \` ${result[0]}   ${result.index}\`
    )
}
/*
     Java   0
     Java   7
*/

يُرجع التابع test () قيمة منطقية اعتمادًا على ما إذا تم العثور على تطابق في السلسلة:

const str = '  JavaScript'

console.log(
    / /.test(str) // true
)

JSR

MDN

149. ما هي العلامات المستخدمة في التعبيرات النمطية؟

const regex = /([-]+)s([-]+)/i
const str = ' '
const newStr = str.replace(regex, '$2 $1')
console.log(newStr) //  

JSR

MDN

150. ما هي الأحرف الخاصة المستخدمة في التعبيرات النمطية؟

يمكن تقسيم الأحرف الخاصة المستخدمة في التعبيرات النمطية إلى عدة مجموعات.

فئات الشخصيات الأساسية:



مجموعات الأحرف:



الحدود:



التجمع:



محددو الكمية:



JSR

MDN

151. كيف يمكنني تغيير أنماط عنصر HTML؟

يمكن القيام بذلك إما باستخدام خاصية النمط أو عن طريق تعيين فئة مناسبة للعنصر:

document
    .querySelector(selector)
    .style.property = value
document
    .querySelector('title')
    .fontSize = '2rem'

document.querySelector(selector)
    .className = 'class-name'
document.querySelector(selector)
    .classList.add('class-name')
document.querySelector('button')
    .classList.add('active')

JSR

MDN - أسلوب

MDN - اسم_الفئة

MDN - classList

152. ما هو المصحح؟

يوفر تعبير مصحح الأخطاء إمكانية الوصول إلى أي وظيفة تصحيح أخطاء متوفرة في بيئة معينة ، على سبيل المثال ، تعيين نقاط التوقف (نقاط التوقف ونقاط التوقف). إذا لم تكن وظيفة التصحيح متاحة في وقت التشغيل ، فلن يكون لهذا التعبير أي تأثير:

const fun = () => {
    // 
    debugger //       
    // 
}

JSR

MDN

153. ما هي نقاط توقف مصحح الأخطاء المستخدمة؟

تُستخدم نقاط التحقق لإيقاف تنفيذ وظيفة أو رمز آخر مؤقتًا في مكان معين لمعرفة سبب عدم عمل البرنامج بشكل صحيح. بمجرد التوقف ، يمكن متابعة الوظيفة.



JSR

MDN

154. هل يمكن استخدام الكلمات المحجوزة كمعرفات؟

لا ، لا يمكنك استخدام الكلمات المحجوزة كأسماء للمتغيرات أو التسميات أو الوظائف أو الكائنات:

const class = '    ' // SyntaxError: Unexpected token 'class'

155. كيف تحدد عرض الصورة وارتفاعها؟

ويمكن القيام بذلك في عدد من الطرق. هنا هو واحد:

const getImgSize = src => {
    const img = new Image()
    img.src = src
    img.addEventListener('load', () => console.log(\`${img.width} x ${img.height}\`)) // 276 x 110
    document.body.append(img)
}
getImgSize('http://www.google.com/ intl/en_ALL/images/logo.gif')

MDN

156. كيفية إرسال طلب HTTP متزامن؟

للقيام بذلك ، يمكنك استخدام كائن XMLHttpRequest بتمريره إلى الطريقة open () مع وسيطة اختيارية ثالثة بالقيمة false:

const getUsers = url => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.send()
    console.table(xhr.response)

    const response = JSON.parse(xhr.response)
    const template = \`
        <table>
            ${response.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body
        .insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

157. كيف يتم عمل طلب HTTP غير متزامن؟

يمكن استخدام طريقة fetch () لهذا:

const getUsers = async url => {
    const response = await fetch(url)
    const data = await response.json()
    console.table(data)

    const template = \`
        <table>
            ${data.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body.insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

158. كيف يتم الحصول على التاريخ بالشكل المطلوب؟

يمكن استخدام طريقة toLocaleString () لهذا:

console.log(
    new Date().toLocaleString('ru-Ru', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
) // , 6  2020 .

MDN

159. كيف أحصل على أقصى أحجام للصفحة؟

للقيام بذلك ، تحتاج إلى العثور على القيم القصوى لخصائص scrollWidth و offsetWidth و clientWidth و scrollHeight و offsetHeight و clientHeight of the document.body and document.documentElement كائنات:

const pageWidth = Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
)
const pageHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
)
const pageSize = {
    width: pageWidth,
    heigth: pageHeight
}
console.log(pageSize)

const pageCenter = {
    centerX: pageWidth / 2,
    centerY: pageHeight / 2
}
console.log(pageCenter)

شبيبة

160. ما هو العامل الشرطي أو الثلاثي؟

العامل الثلاثي هو طريقة مختصرة لكتابة كتلة if ... else:

let accesAllowed
const age = propmt('  ?')

// if...else
if (age > 18) {
    accesAllowed = true
} else {
    accessAllowed = false
}

//  
(age > 18)
    ? accesAllowed = true
    : accessAllowed = false

JSR

MDN

161. هل يمكن استخدام سلسلة من العمليات الثلاثية؟

نعم ، في هذه الحالة العامل الثلاثي هو بديل لـ if ... else if ... else block:

let accessAllowed
const getAge = () => prompt('  ?')

//     -    
// if...else if...else
const checkAge = (age = getAge()) => {
    console.log(age)
    if (isNaN(age)) {
        Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
    } else if (age === null || age === '') {
        Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
    } else if (age < 0) {
        Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
    } else if (age > 100) {
        Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
    } else if (age < 18) {
        Promise.resolve(alert(',   ')).then(accessAllowed = false)
    } else {
        Promise.resolve(alert(' !')).then(accessAllowed = true)
    }
    console.log(accessAllowed)
}

//  
const checkAge = (age = getAge()) => {
    isNaN(age)
        ? Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
        : (age === null || age === '')
          ? Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
          : (age < 0)
            ? Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
            : (age > 100)
            ? Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
            : (age < 18)
                ? Promise.resolve(alert(',   ')).then(accessAllowed = false)
                : Promise.resolve(alert(' !')).then(accessAllowed = true)
    console.log(accessAllowed)
}

JSR

MDN

162. كيف تبدأ تنفيذ الكود بعد تحميل الصفحة بالكامل؟

ويمكن القيام بذلك بعدة طرق.

ضع علامة البرنامج النصي قبل علامة إغلاق النص الأساسي أو أضف سمة مؤجلة إليها:

<body>
    ...
    <script src="script.js"></script>
</body>

<!--  -->
<head>
    ...
    <script src="script.js" defer></script>
</head>

إذا كان البرنامج النصي الخاص بك هو وحدة نمطية ، فبدلاً من سمة التأجيل ، تحتاج إلى تحديد سمة النوع مع وحدة القيمة:

<script src="script.js" type="module"></script>

أضف سمة onload إلى علامة body:

<body onload="script()"></body>

أضف التعليمات البرمجية كمعالج لحدث التحميل لكائن النافذة:

window.onload = () => console.log('  ')

// 
window.addEventListener('load', () => console.log('  '))

افعل الشيء نفسه مع document.body:

document.body.onload = () => console.log('  ')

163. ما هو الفرق بين __proto__ والنموذج الأولي؟

الخاصية __proto__ ([[النموذج الأولي]] الخاصية المخفية الداخلية) هي كائن يرث منه مثيل الحقول والأساليب. والنموذج الأولي هو كائن يتم استخدامه لإنشاء __proto__ عند إنشاء مثيل له باستخدام الكلمة الأساسية الجديدة:

class Person {
    constructor(firstName, secondName) {
        this.firstName = firstName
        this.secondName = secondName
    }
    getFullName() {
        return \`${this.firstName} ${this.secondName}\`
    }

}

const user = new Person('', '')
console.log(user.getFullName()) //  
console.log(user.__proto__.getFullName === Person.prototype.getFullName) // true
console.log(Person.prototype) // {constructor: ƒ, getFullName: ƒ}
console.log(user.prototype === undefined) // true

JSR

MDN

164- أعط مثالاً على الاستخدام الإلزامي للفاصلة المنقوطة

أحد الاستخدامات الإلزامية للفواصل المنقوطة هو استخدام IIFE (التعبير الفوري المستدعى Fuction Expression):

على سبيل المثال ، الكود التالي:

try {
    const x = ''

    (() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

سيتم تفسيره على النحو التالي:

try {
    const x = ''(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

لذلك ، في كتلة try ، نحصل على خطأ TypeError: "To be" ليس وظيفة ، ويتم تمرير التحكم إلى كتلة catch ، ويتم إخراج "Not to be" إلى وحدة التحكم.

لكي يعمل الكود بالشكل المتوقع ، يجب أن يبدو كالتالي:

try {
    //       
    const x = '';
    //  
    ;(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

أيضًا ، لا تنس حالات التنسيب التلقائي للفاصلة المنقوطة.

165. ما هي طريقة التجميد () المستخدمة؟

هذه الطريقة ، كما يوحي اسمها ، تعمل على "تجميد" كائن. الجسم المجمد غير قابل للتغيير (غير قابل للتغيير). هذا يعني أنه لا يمكنك إضافة خصائص جديدة إلى مثل هذا الكائن ، أو حذف أو تعديل الخصائص الموجودة. تقوم هذه الطريقة أيضًا بتعيين قابل للتكوين: خطأ وقابل للكتابة: خطأ للخصائص الحالية. تقوم الطريقة بإرجاع كائن مجمّد.

'use strict'
const obj = {
    mission: 'possible'
}

Object.freeze(obj)
obj.mission = 'impossible' // TypeError: Cannot assign to read only property 'mission' of object '#<Object>'

delete obj.mission // TypeError: Cannot delete property 'mission' of #<Object>

لاحظ أنه في الوضع غير المقيد ، لا يتم طرح أي استثناء ، ولا يتم تنفيذ الكود ببساطة.



JSR

MDN

166. لماذا نحتاج إلى طريقة التجميد ()؟

ينص نموذج البرمجة الكائنية على أن الواجهة التي تحتوي على عدد معين من العناصر يجب أن تكون غير قابلة للتغيير ، أي يجب أن يكون من المستحيل توسيع أو تعديل أو استخدام عناصر خارج السياق الحالي. هذه الطريقة هي اسم مستعار للكلمة الأساسية النهائية في بعض لغات البرمجة الأخرى.



JSR

MDN

167. كيف تستغل الحرف الأول من كل كلمة في السطر؟

طريقة واحدة للقيام بذلك هي كما يلي:

const capitilize = str => str.replace(
    /[-]S+/gi,
    txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
)

console.log(capitilize(', , ')) // , , 

168. كيف أعرف أن JavaScript معطل في الصفحة؟

يمكنك استخدام علامة noscript لهذا الغرض. لن يتم تنفيذ الكود الموجود داخل هذه العلامة إلا إذا تم تعطيل JavaScript في الصفحة:

    console.log('JavaScript ')

<noscript>
    <p> JavaScript,    </p>
</noscript>

لتعطيل JavaScript في Chrome ، انتقل إلى الإعدادات -> قسم "الخصوصية والأمان" -> إعدادات الموقع -> قسم "المحتوى" -> JavaScript.



MDN

169. ما هي عوامل التشغيل التي يدعمها JavaScript؟

تستخدم العوامل للعمل مع القيم أو المعاملات. يدعم JavaScript العوامل التالية:

• الحساب: + (إضافة ، تحويل إلى رقم ، تسلسل) ، - (طرح) ، * (ضرب) ، / (قسمة) ،٪ (نموذج ، مع باقي) ، ++ (زيادة) ، - (إنقاص) ، * * (الأس)
• عوامل المقارنة: == (مساواة مجردة ، فضفاضة) ،! = (عدم مساواة مجردة) ، === (مساواة صارمة ، التحقق من الهوية) ،!
• منطقي: && (و) ، || (أو)،! (not) (!!! (نفي مزدوج) ليس عاملًا منفصلاً)
• عوامل التعيين: = ، + = ، - = ، * = ، / = ،٪ =
• ثلاثي:؟ ...: (إذا ... آخر)
• نوع المعامل: يحدد نوع المعامل
• أحادي المعامل: & (و) ، | (أو) ، ^ (حصري أو) ، ~ (لا) ، << (إزاحة لليسار) ، >> (إزاحة لليمين) ، >>> (إزاحة لليمين بدون مساحة فارغة)
• جديد: ؟؟ .. (سلسلة اختيارية) ؟؟ (دمج فارغ)

//  
const obj = {
    foo: {
        baz: {
            qux: 'bar'
        }
    }
}

// 
console.log(obj.foo.bar.baz.qux) // TypeError: Cannot read property 'baz' of undefined

if (
    obj.foo !== undefined &&
    obj.foo.bar !== undefined &&
    obj.foo.bar.baz !== undefined
) {
    console.log(obj.foo.bar.baz.qux) //   
}

// 
console.log(obj?.foo?.bar?.baz?.qux) // undefined

//   null
console.log(
    0 || 'default null', // 'default null'
    0 ?? 'default null', // 0
    '' || 'default string', // default string
    '' ?? 'default string', // ''
)

JSR - معاملات JSR - العوامل

المنطقية

JSR - عوامل المقارنة

JSR -

عوامل JSR الشرطية - مشغلات

MDN على مستوى البت - مشغل التسلسل الاختياري

MDN - مشغل الدمج الفارغ

170. ما هو عامل الباقي ... (متغيرات أخرى) المستخدمة؟

عامل الراحة هو بديل لكائن الوسائط ويعيد مصفوفة من الوسائط التي تم تمريرها إلى الوظيفة:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

console.log(sum(1, 2, 3)) // 6

يرجى ملاحظة أنه يجب تمرير العامل الباقي باعتباره الوسيطة الأخيرة:

const fun = (x, ...rest, y) => console.log(rest) // SyntaxError: Rest parameter must be last formal parameter

JSR

MDN

171. ما هو عامل الانتشار المستخدم؟

يتم استخدام عامل الانتشار لتوسيع (فك ، توسيع) الكيانات القابلة للتكرار (المصفوفات ، السلاسل). التفريغ يعني تحويل ، على سبيل المثال ، مصفوفة من الأرقام إلى مجموعة من القيم البسيطة:

const sum = (x, y, z) => x + y + z

const nums = [1, 2, 3]

console.log(sum(...nums)) // 6

JSR

MDN

172. كيف يمكن تحديد ما إذا تم تجميد الشيء؟

من أجل تحديد ما إذا كان كائن ما مجمداً ، أي هل هي ثابتة (غير قابلة للتغيير) يتم استخدام طريقة isFrozen ():

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

console.log(Object.isFrozen(obj)) // true

MDN

173. كيفية تحديد تساوي القيم باستخدام كائن؟

يمكن استخدام طريقة () لهذا:

Object.is('  ', '  ') // true
Object.is(0.1 + 0.2, 0.3) // false
Object.is(window, window) // true
Object.is(+0, -0) // false

const objA = {}
const objB = objA
Object.is(objA, objB) // true
Object.is({}, {}) // false

القيم متساوية إذا:

• كلاهما غير معرف
• كلاهما فارغ
• كلاهما صحيح أو خطأ
• كلاهما سلاسل من نفس الطول بنفس الأحرف
• كلاهما يشير إلى نفس الكائن
• كلاهما أرقام ، +0 ، -0 أو NaN

JSR

MDN

174. كيفية إنشاء نسخة من كائن؟

واحدة من أكثر الطرق موثوقية للقيام بذلك هي استخدام طريقة تعيين ():

const objA = {a: 1, b: 2}
const objB = Object.assign(objA)

console.log(objB) // {a: 1, b: 2}

console.log(objA === objB) // true

تتيح لك هذه الطريقة أيضًا دمج الكائنات ، باستثناء العناصر المكررة:

const objA = {a: 1, b: 2}
const objB = {b: 2, c: 3}

const objC = Object.assign(objA, objB)
console.log(objC) {a: 1, b: 2, c: 3}

يمكنك استخدام الربط JSON.parse-JSON.stringify لنسخ كائنات بسيطة:

const objA = {a: 1, b: 2}

const objB = JSON.parse(JSON.stringify(objA))

console.log(objB) // {a: 1, b: 2}

JSR

MDN

175. ما هو الوكيل؟

كائن الوكيل "يلتف" حول كائن آخر ويمكنه اعتراض (وإذا رغبت في معالجة) إجراءات مختلفة به ، على سبيل المثال ، خصائص القراءة / الكتابة وغيرها.

const handler = {
    get: (obj, prop) => prop in obj
        ? obj[prop]
        : 0
}

// new Proxy(, )
const p = new Proxy({}, handler)

p.a = 1
p.b = true

console.log(p.a, p.b) // 1 true
console.log( 'c' in p, p.c) // false 0

176. ما هي طريقة () الختم المستخدمة؟

هذه الطريقة "تعتم" الكائن ، وتمنع إضافة / إزالة الخصائص. كما أنه يحدد التهيئة: خطأ لجميع الخصائص الموجودة. ومع ذلك ، يمكن تغيير قيم خصائص هذا الكائن. يتم استخدام طريقة isSealed () للتحقق مما إذا كان الكائن مغلقًا.

'use strict'
const obj = {
    prop: '    JavaScript!'
}

Object.seal(obj)

obj.prop = ' ,   '
console.log(Object.isSealed(obj)) // true
delete obj.prop // TypeError: Cannot delete property 'prop' of #<Object>
console.log(obj.prop) //  ,   

لاحظ أنه في وضع lax ، ستفشل محاولة حذف خاصية على كائن مغلق بصمت.



JSR

MDN

177. ما هو الفرق بين طريقة التجميد () وطريقة الختم ()؟

طريقة Object.seal () ، بخلاف طريقة Object.freeze () ، تسمح لك بتعديل الخصائص الموجودة للكائن.

'use strict'
const objA = {
    prop: ''
}
Object.freeze(objA)
objA.prop = ' ' // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

const objB = {
    prop: ' '
}
Object.seal(objB)
objB.prop = ''
console.log(objB.prop) // 

178. كيف يتم تعداد أزواج المفتاح / القيمة لشيء ما؟

ترجع طريقة Object.entries () مصفوفة من أزواج مفتاح / قيمة الكائن التي تم تعدادها كمصفوفات فرعية بنفس ترتيب for ... in loop:

const obj = {
    x: 1,
    y: 2
}

console.log(Object.entries(obj)) // [["x", 1], ["y", 2]]

for (let [key, value] of Object.entries(obj)) {
    console.log(\`${key}: ${value}\`) // x: 1 y: 2
}

JSR

MDN

179. ما هو الفرق الرئيسي بين طرق Object.keys () و Object.values ​​() و Object.entries ()؟

تُرجع طريقة Object.keys () مفاتيح كائن ، بينما تُرجع طريقة Object.values ​​() قيم خصائصها ، وتُعيد Object.entries () مصفوفة من أزواج المفاتيح / القيم:

const user = {
    name: '',
    age: 30
}

console.log(Object.keys(user)) // ["name", "age"]
console.log(Object.values(user)) // ["", 30]
console.log(Object.entries(user)) // [["name", ""], ["age", 30]]

JSR

MDN - Object.keys ()

MDN - Object.values ​​()

MDN - Object.entries ()

180. كيف يمكن إنشاء كائن بنموذج أولي معين دون استخدام دالة منشئ وفئات؟

يمكن استخدام طريقة Object.create () لهذا:

const firstUser = {
    name: '',
    sayHi() {
        console.log(\`,   ${this.name}!\`)
    }
}

const secondUser = Object.create(firstUser)

secondUser.name = ''
secondUser.sayHi() // ,   !

JSR

MDN

181. ما هي استخدامات WeakSet؟

يتم استخدام WeakSet لتخزين مجموعة من الكائنات المرجعية الضعيفة. بمعنى آخر ، إنه بمثابة تخزين إضافي للكائنات المستخدمة بواسطة التعليمات البرمجية الأخرى. تتم إزالة هذه الكائنات تلقائيًا بواسطة جامع القمامة عندما يتعذر الوصول إليها (غير مستخدمة) ، أي عندما يبقى المفتاح فقط في WeakSet.

const ws = new WeakSet()
let user = {}

ws.add(user)
console.log(ws.has(user)) // true

user = null
console.log(ws.has(user)) // false,    

JSR

MDN

182. ما هو الفرق بين Set و WeakSet؟

يتمثل الاختلاف الرئيسي بينهما في أن العناصر المخزنة في WeakSet تتم الإشارة إليها بشكل ضعيف ، أي يتم حذفها تلقائيًا بمجرد أن يتعذر الوصول إليها. الاختلافات الأخرى هي كما يلي:

• يمكن لـ Set تخزين أي قيم ، ويمكن لـ WeakSet تخزين الكائنات فقط.
• WeakSet ليس له خاصية الحجم
• لا يحتوي WeakSet على طرق clear () ، و keys () ، والقيم () ، و forEach ()
• WeakSet ليس كيانًا متكررًا

JSR

MDN

183. ما هي الأساليب المتوفرة في WeakSet؟

WeakSet لديه الطرق التالية:

• add (): يضيف كائنًا إلى المجموعة
• حذف (): يزيل كائنًا من مجموعة
• has (): يحدد ما إذا كان الكائن موجودًا في المجموعة
• length (): إرجاع طول المجموعة

const ws = new WeakSet()
const objA = {}
const objB = {}

ws.add(objA)
ws.add(objB)
console.log(ws.has(objA)) // true
console.log(ws.lenghth()) // 2
ws.delete(objA)
console.log(ws.has(objA)) // false

JSR

MDN

184. ما هي استخدامات WeakMap؟

يتم استخدام WeakMap لتخزين أزواج المفاتيح / القيمة حيث يتم الإشارة إلى المفاتيح بشكل ضعيف. بمعنى آخر ، إنه بمثابة مستودع إضافي للمفاتيح المستخدمة بواسطة رمز آخر. تتم إزالة هذه المفاتيح تلقائيًا بواسطة جامع البيانات المهملة عندما يتعذر الوصول إليها (غير مستخدمة) ، أي عندما يبقى المفتاح فقط في WeakMap.

const wm = new WeakMap()
let user = {}
wm.set(user, 'user')
console.log(wm.has(user)) // true
user = null
console.log(wm.has(user)) // false,    

JSR

MDN

185. ما هو الفرق بين Map و WeakMap؟

الفرق الرئيسي بينهما هو أن المفاتيح المخزنة في WeakMap تمت الإشارة إليها بشكل ضعيف ، أي يتم حذفها تلقائيًا بمجرد أن يتعذر الوصول إليها. الاختلافات الأخرى هي كما يلي:

• يمكن أن تستخدم الخريطة أي قيم كمفاتيح ، بينما يمكن لـ WeakMap استخدام الكائنات فقط
• WeakMap ليس له خاصية الحجم
• لا يحتوي WeakMap على clear () ، والمفاتيح () ، والقيم () ، والإدخالات () ، و forEach ().
• WeakMap ليس كيانًا متكررًا

JSR

MDN

186. ما هي الأساليب المتوفرة في WeakMap؟

يحتوي WeakMap على الطرق التالية:

• set (): يضيف زوج مفتاح / قيمة إلى كائن
• حذف (): يحذف قيمة بالمفتاح
• has (): يحدد ما إذا كانت القيمة موجودة بالمفتاح
• get (): إرجاع القيمة بالمفتاح

const wm = new WeakMap()
const firstUser = {}
const secondUser = {}

wm.set(firstUser, '')
wm.set(secondUser, '')
console.log(wm.has(firstUser)) // true
console.log(wm.get(firstUser)) // 
wm.delete(secondUser)
console.log(wm.has(secondUser)) // false

JSR

MDN

187. كيف يتم ترميز URL؟

يمكنك استخدام طريقة encodeURI () لهذا الغرض. تقوم هذه الطريقة بتحويل جميع الأحرف الخاصة باستثناء /؟: @ = + $ #

const url = 'https://ru.wikipedia.org/wiki/,__'
const encoded = encodeURI(url)
console.log(encoded) // https://ru.wikipedia.org/wiki/%D0%9B%D0...

JSR

MDN

188. كيفية فك شفرة URL؟

يمكن استخدام طريقة decodeURI () لهذا:

const url = 'https://ru.wikipedia.org/wiki/%D0%9B%D0...'
const decoded = decodeURI(url)
console.log(decoded) // https://ru.wikipedia.org/wiki/,__

JSR

MDN

189. كيف تتم طباعة محتوى الصفحة؟

يمكنك استخدام طريقة الطباعة العامة () لهذا الغرض. تفتح هذه الطريقة مربع حوار خاص به إعدادات الطباعة:

<button></button>

document.querySelector('button')
    .addEventListener('click', () => print())

MDN

190. ما هي وظيفة مجهولة؟

الوظيفة المجهولة هي وظيفة غير مسماة. غالبًا ما يتم تخصيص هذه الوظائف للمتغيرات وتستخدم أيضًا كردود نداء:

const sayHi = function () {
    console.log('')
}
sayHi() // 
// 
const sayBye = () => console.log('')
sayBye() // 

window.addEventListener('click', function () {
    console.log('  ,   ')
})
// 
window.addEventListener('contextmenu', e => {
    e.preventDefault()
    console.log('  -   ')
})

JSR

MDN

191. ما هي أولوية استخدام المتغيرات المحلية والعالمية؟

المتغيرات المحلية لها الأسبقية على الكرة الأرضية التي تحمل الاسم نفسه:

let question = ' '

function toBe () {
    question = ''
    console.log(question)
}
toBe() // 

JSR

MDN

192. ما هي الملحقات؟

الموصّلات أو الخصائص المحسوبة هي محصلات ومحددات. يتم استخدام Getters للحصول على قيم خصائص الكائن ، ويتم استخدام المحددات لتعيينها:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    get access () {
        return this.#access
    }

    set access (bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.access) // false
user.access = true
console.log(user.access) // true

المحصلون والمحددون خصائص ، والطرق هي وظائف:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    getAccess () {
        return this.#access
    }

    setAccess(bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.getAccess()) // false
user.setAccess(true)
console.log(user.getAccess()) // true

شبيبة

193. كيف يمكن تعريف خاصية في منشئ الكائن؟

يمكن استخدام طريقة Object.defineProperty () لهذا الغرض. تتيح لك هذه الطريقة إضافة خصائص جديدة إلى الكائن وتعديل الخصائص الموجودة ، وكذلك تغيير الإعدادات للوصول إلى الكائن:

'use strict'
const obj = {}

Object.defineProperty(obj, 'prop', {
    value: 1,
    writable: false
})

console.log(obj.prop) // 1
obj.prop = 2 // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

في وضع التراخي ، ستفشل محاولة تغيير خاصية للقراءة فقط بصمت.



JSR

MDN

194. ما هي ميزات أدوات القياس والواضعين؟

الملامح الرئيسية للأحرف والمستوصفات هي كما يلي:

• لديهم بناء جملة أبسط مقارنة بالطرق.
• تستخدم لتحديد الخصائص المحسوبة - الموصلات
• تمكن نفس العلاقة بين الخصائص والطرق
• يمكن أن توفر جودة أفضل للبيانات
• يسمح لك بأداء المهام خلف الكواليس عندما يتعلق الأمر بالتغليف

شبيبة

195. هل يمكن إضافة أدوات التسجيل والمحددات إلى كائن باستخدام طريقة Object.defineProperty ()؟

الى حد كبير:

const obj = {counter: 0}

Object.defineProperty(obj, 'increment', {
    get() {return ++this.counter}
})
Object.defineProperty(obj, 'decrement', {
    get() {return --this.counter}
})

Object.defineProperty(obj, 'sum', {
    set(val) {return this.counter += val}
})
Object.defineProperty(obj, 'sub', {
    set(val) {return this.counter -= val}
})

obj.sum = 10
obj.sub = 5
console.log(obj) // {counter: 5}
console.log(obj.increment) // 6
console.log(obj.decrement) // 5

JSR

MDN

196. ما هو التبديل ... القضية المستخدمة؟

switch ... case هي بديل لـ if ... else وهي طريقة مرئية أكثر لتنفيذ التعليمات البرمجية اعتمادًا على الشرط الذي تم تمريره:

const calc = (x, y, operator) => {
    let result

    try {
        switch (operator) {
            case '+':
                result = x + y
                break
            case '-':
                result = x - y
                break
            case '*':
                result = x * y
                break
            case '/':
                result = x / y
                break
            default:
                throw new Error(' ')
        }

        if (isNaN(result)) {
            throw new Error('   ')
        }

        console.log(result)
        return result
    } catch (e) {
        console.error(e.message)
    }
}

calc(1, 2, '+') // 3
calc(3, 4, '*') // 12
calc('a', 1, '-') //    
calc(5, 6, 'x') //  

JSR

MDN

197. اسم قواعد استخدام التبديل ... حالة

عند استخدام المفتاح ... بناء الحالة ، يجب عليك الالتزام بالقواعد التالية:

• يمكن أن يكون الشرط رقمًا أو سلسلة
• القيم المكررة غير مسموح بها
• العبارة الافتراضية اختيارية. إذا لم يتم العثور على حالة ، يتم تنفيذ الكتلة الافتراضية
• كسر يستخدم لإيقاف الحلقة
• كسر اختياري أيضًا ، ولكن بدونه ، سيستمر تنفيذ الحلقة

JSR

MDN

198. قم بتسمية أنواع البيانات الأولية.

أنواع البيانات الأولية ("بدائية") في JavaScript هي القيم التالية:

• رقم لأي رقم: عدد صحيح أو نقطة عائمة ، القيم الصحيحة محدودة بـ ± 2 ⁵³
• bigint للأعداد الصحيحة ذات الطول التعسفي
• سلسلة للسلاسل. يمكن أن تحتوي السلسلة على حرف واحد أو أكثر ، ولا يوجد نوع منفصل للحرف
• قيمة منطقية لصواب / خطأ
• خالية للقيم غير المعروفة - نوع مميز بقيمة فارغة واحدة
• undefined للقيم غير المعينة - نوع منفصل له قيمة واحدة غير محددة
• symbol

MDN

Habr — JavaScript?

Habr — JavaScript ?

JavaScript ?

Medium — Advanced JavaScript ES6 — Temporal Dead Zone, Default Parameters And Let vs Var — Deep dive!

JavaScript:

̆ JavaScript

Medium — JavaScript.

Habr — JavaScript

Medium — Understanding Prototypes in JavaScript

Medium — apply(), call() bind(), JavaScript

JavaScript:

Medium — JavaScript Classes: An In-Depth look (Part 1)

Medium — JavaScript slice(), splice() split()

JavaScript

JavaScript- .map(), .filter() .reduce()

reduce() JavaScript

̆ ̆ ECMAScript 2019, for-of

ES2020,

DigitalOcean — map set JavaScript

Medium — JavaScript

Medium — What is Memoization in Javascript?

Redd — Debounce vs Throttle: Definitive Visual Guide

JavaScript

Habr — 5 JSON.stringify()

Habr — () «» JavaScript

Habr — JavaScript- : . 1

Habr — -

GoogleDevelopers — Service Workers: an Introduction

Habr —

WebDevBlog — IndexedDB

GoogleDevelopers — Working with IndexedDB

Habr — Web Storage API:

Habr — -

Medium — A Simple Introduction to Web Workers in JavaScript

Habr — JavaScript,

Habr — Async/Await

Habr — CORS: