أخطاء JavaScript الشائعة
يوضح هذا الفصل بعض أخطاء JavaScript الشائعة.
استخدام مشغل التخصيص بطريق الخطأ
قد تؤدي برامج JavaScript إلى نتائج غير متوقعة إذا استخدم المبرمج عن طريق الخطأ عامل تعيين ( =) ، بدلاً من عامل مقارنة ( ==) في عبارة if.
ifترجع هذه العبارة false(كما هو متوقع) لأن x لا يساوي 10:
let x = 0;
if (x == 10)
ifتعود هذه العبارة true(ربما ليس كما هو متوقع) ، لأن 10 صحيحة:
let x = 0;
if (x = 10)
ifترجع هذه العبارة false(ربما ليس كما هو متوقع) ، لأن 0 خطأ:
let x = 0;
if (x = 0)
يُرجع الواجب دائمًا قيمة المهمة.
توقع مقارنة فضفاضة
في المقارنة المنتظمة ، لا يهم نوع البيانات. هذه ifالعبارة تعود صحيحة:
let x = 10;
let y = "10";
if (x == y)
في المقارنة الصارمة ، نوع البيانات مهم. هذه ifالعبارة ترجع خطأ:
let x = 10;
let y = "10";
if (x === y)
من الخطأ الشائع أن ننسى أن switchالعبارات تستخدم المقارنة الصارمة:
case switchسيعرض هذا تنبيهًا :
let x = 10;
switch(x) {
case 10: alert("Hello");
}
لن يؤدي هذا case switchإلى عرض تنبيه:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
الخلط بين الجمع والتسلسل
الجمع يتعلق بجمع الأرقام .
يتعلق التسلسل بإضافة سلاسل .
في JavaScript ، تستخدم كلتا العمليتين نفس +عامل التشغيل.
لهذا السبب ، فإن إضافة رقم كرقم سينتج نتيجة مختلفة عن إضافة رقم كسلسلة:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
عند إضافة متغيرين ، قد يكون من الصعب توقع النتيجة:
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
يطفو سوء الفهم
يتم تخزين جميع الأرقام في JavaScript كأرقام ذات فاصلة عائمة 64 بت (عوامات).
تواجه جميع لغات البرمجة ، بما في ذلك JavaScript ، صعوبات في قيم الفاصلة العائمة الدقيقة:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
لحل المشكلة أعلاه ، من المفيد الضرب والقسمة:
مثال
let z = (x * 10 + y * 10) / 10; // z will be 0.3
كسر سلسلة JavaScript
سوف تسمح لك JavaScript بتقسيم العبارة إلى سطرين:
مثال 1
let x =
"Hello World!";
لكن كسر جملة في منتصف السلسلة لن ينجح:
مثال 2
let x = "Hello
World!";
يجب عليك استخدام "شرطة مائلة للخلف" إذا كان عليك كسر جملة في سلسلة نصية:
مثال 3
let x = "Hello \
World!";
وضع الفاصلة المنقوطة في غير موضعها
بسبب وجود فاصلة منقوطة في غير مكانها ، سيتم تنفيذ كتلة التعليمات البرمجية هذه بغض النظر عن قيمة x:
if (x == 19);
{
// code block
}
كسر بيان العودة
من سلوك JavaScript الافتراضي إغلاق العبارة تلقائيًا في نهاية السطر.
لهذا السبب ، سيعود هذان المثالان إلى نفس النتيجة:
مثال 1
function myFunction(a) {
let power = 10
return a * power
}
مثال 2
function myFunction(a) {
let power = 10;
return a * power;
}
سيسمح لك JavaScript أيضًا بتقسيم العبارة إلى سطرين.
لهذا السبب ، سيعود المثال 3 أيضًا إلى نفس النتيجة:
مثال 3
function myFunction(a) {
let
power = 10;
return a * power;
}
ولكن ، ماذا سيحدث إذا كسرت عبارة الإرجاع في سطرين مثل هذا:
مثال 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
ستعود الوظيفة undefined!
لماذا ا؟ لأن JavaScript اعتقدت أنك تقصد:
مثال 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
تفسير
إذا كان البيان غير مكتمل مثل:
let
ستحاول JavaScript إكمال البيان بقراءة السطر التالي:
power = 10;
ولكن بما أن هذا البيان مكتمل:
return
ستقوم JavaScript بإغلاقه تلقائيًا كما يلي:
return;
يحدث هذا لأن عبارات الإغلاق (النهائية) بالفاصلة المنقوطة اختيارية في JavaScript.
ستغلق JavaScript تعليمة الإرجاع في نهاية السطر ، لأنها جملة كاملة.
أبدا كسر بيان العودة.
الوصول إلى المصفوفات ذات الفهارس المسماة
تدعم العديد من لغات البرمجة المصفوفات ذات الفهارس المسماة.
تسمى المصفوفات ذات الفهارس المسماة المصفوفات الترابطية (أو التجزئة).
لا يدعم JavaScript المصفوفات ذات الفهارس المسماة.
في JavaScript ، تستخدم المصفوفات فهارس مرقمة :
مثال
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
في JavaScript ، تستخدم الكائنات فهارس مسماة .
إذا كنت تستخدم فهرسًا مُسمى ، عند الوصول إلى مصفوفة ، فإن JavaScript سيعيد تعريف المصفوفة إلى كائن قياسي.
بعد إعادة التحديد التلقائي ، ستنتج طرق وخصائص المصفوفة نتائج غير محددة أو غير صحيحة:
مثال:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
تعريفات النهاية بفاصلة
الفواصل اللاحقة في تعريف الكائن والمصفوفة قانونية في ECMAScript 5.
مثال على الكائن:
person = {firstName:"John", lastName:"Doe", age:46,}
مثال على المصفوفة:
points = [40, 100, 1, 5, 25, 10,];
تحذير !!
سوف يتعطل Internet Explorer 8.
لا يسمح JSON بفواصل لاحقة.
جسون:
person = {"firstName":"John", "lastName":"Doe", "age":46}
جسون:
points = [40, 100, 1, 5, 25, 10];
غير محدد ليس فارغًا
يمكن أن تكون كائنات JavaScript ومتغيراتها وخصائصها وطرقها undefined.
بالإضافة إلى ذلك ، يمكن أن تحتوي كائنات JavaScript الفارغة على قيمة null.
هذا يمكن أن يجعل من الصعب قليلاً اختبار ما إذا كان الكائن فارغًا.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)