اشکال رایج JavaScript

این فصل اشتباهات رایج JavaScript را بررسی می‌کند.

استفاده ناخواسته از عملگر تخصیص

اگر برنامه‌نویس در if در استفاده ناخواسته از عملگر تخصیص در=)) در عوض عملگر مقایسه استفاده می‌شود (====)، برنامه‌های JavaScript ممکن است نتایج غیرمنتظره‌ای تولید کنند.

این if این دستورالعمل‌ها نتیجه می‌دهند falseهمانطور که انتظار می‌رفت)، زیرا x برابر با 10 نیست:

var x = 0;
if (x == 10)

خودتان امتحان کنید

این if این دستورالعمل‌ها نتیجه می‌دهند trueشاید مانند انتظار نباشد)، زیرا 10 true است:

var x = 0;
if (x = 10)

خودتان امتحان کنید

این if این دستورالعمل‌ها نتیجه می‌دهند falseشاید مانند انتظار نباشد)، زیرا 0 false است:

var x = 0;
if (x = 0)

خودتان امتحان کنید

تخصیص همیشه مقدار تخصیص شده را برمی‌گرداند.

این انتظار مقایسه گسترده است

در مقایسه معمولی، نوع داده‌ها مهم نیست. این if این دستورالعمل‌ها نتیجه می‌دهند true:

var x = 10;
var y = "10";
if (x == y)

خودتان امتحان کنید

در مقایسه دقیق، نوع داده‌ها واقعاً مهم است. این if این دستورالعمل‌ها نتیجه می‌دهند false:

var x = 10;
var y = "10";
if (x === y)

خودتان امتحان کنید

یک اشتباه رایج فراموش کردن استفاده از switch در این دستورالعمل‌ها از مقایسه دقیق استفاده می‌شود:

این switch این دستورالعمل‌ها پیغام‌های اعلانی را نمایش می‌دهند:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

خودتان امتحان کنید

این switch این دستورالعمل‌ها پیغام‌های اعلانی را نمایش نمی‌دهند:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

خودتان امتحان کنید

جمع و پیوند مبهم

جمعبرای اضافه کردناعدادبازگرداند.

پیوند (Concatenation)برای اضافه کردنرشتهبازگرداند.

در JavaScript، هر دو عملیات از یک عملگر مشترک استفاده می‌کنند + عملگر.

به همین دلیل، اضافه کردن اعداد به عنوان اعداد، با اضافه کردن اعداد به عنوان رشته‌ها، نتایج متفاوتی به بار می‌آورد:

var x = 10 + 5;          // نتیجه x 15 است
var x = 10 + "5";         // نتیجه x "105" است

خودتان امتحان کنید

اگر دو متغیر به هم اضافه شوند، نتایج پیش‌بینی‌ناپذیر است:

var x = 10;
var y = 5;
var z = x + y;            // نتیجه z 15 است
var x = 10;
var y = "5";
var z = x + y;            // نتیجه z "105" است

خودتان امتحان کنید

اعداد اعشاری مبهم

اعداد در JavaScript به صورت 64 بیتی ذخیره می‌شونداعداد اعشاری (Floats)بازگرداند.

همه‌ی زبان‌های برنامه‌نویسی، از جمله JavaScript، مشکلاتی در مدیریت اعداد اعشاری دارند:

متغیر x = 0.1;
متغیر y = 0.2;
متغیر z = x + y             // نتیجه در z 0.3 نخواهد بود

خودتان امتحان کنید

برای حل این مشکل، از عملیات ضرب و تقسیم استفاده کنید:

مثال

متغیر z = (x * 10 + y * 10) / 10;       // نتیجه در z 0.3 خواهد بود

خودتان امتحان کنید

ترتیب‌دهی رشته‌ی JavaScript را در خطوط مختلف قرار دهید

JavaScript به شما اجازه می‌دهد که یک ترتیب‌دهی را به دو خط تقسیم کنید:

مثال 1

متغیر x =
"Hello World!";

خودتان امتحان کنید

اما، قرار دادن خطوط مختلف در وسط رشته اشتباه است:

مثال 2

متغیر x = "Hello
World!";

خودتان امتحان کنید

اگر باید در یک رشته خطوط مختلف را قرار دهید، باید از خط تیره استفاده کنید:

مثال 3

متغیر x = "Hello ",
World!";

خودتان امتحان کنید

نقطه و کامای اشتباه

به دلیل نقطه و کامای اشتباه، این بلوک کد بدون توجه به مقدار x همیشه اجرا خواهد شد:

اگر (x == 19);
{
     // بلوک کد
}

خودتان امتحان کنید

ترتیب‌دهی return را در خطوط مختلف قرار دهید

بسته شدن خودکار ترتیب‌دهی در پایان خط یک رفتار پیش‌فرض JavaScript است.

به همین دلیل، دو مثال زیر بازگشت مشابهی دارند:

مثال 1

دستور
    متغیر قدرت = 10  
    بازگشت a * قدرت
}

خودتان امتحان کنید

مثال 2

دستور
    متغیر قدرت = 10;
    بازگشت a * قدرت;
}

خودتان امتحان کنید

JavaScript به شما اجازه می‌دهد که یک ترتیب‌دهی را به دو خط تقسیم کنید.

به همین دلیل، مثال 3 نیز بازگشت مشابهی خواهد داشت:

مثال 3

دستور
    متغیر
    قدرت = 10;  
    بازگشت a * قدرت;
}

خودتان امتحان کنید

اما اگر بازگشت چه اتفاقی می‌افتد اگر یک ترتیب‌دهی را به دو خط تقسیم کنیم:

مثال 4

دستور
    متغیر
    قدرت = 10;  
    بازگشت
    a * قدرت;
}

خودتان امتحان کنید

این تابع بازگشت undefined!

چرا؟ زیرا JavaScript فکر می‌کند که شما می‌خواهید:

مثال 5

دستور
     متغیر
    قدرت = 10;  
    بازگشت;
    a * قدرت;
}

خودتان امتحان کنید

توضیح

اگر یک ترتیب‌دهی ناقص باشد:

متغیر

JavaScript از طریق خواندن خط بعدی این ترتیب‌دهی را کامل خواهد کرد:

قدرت = 10;

اما به دلیل اینکه این ترتیب‌دهی کامل است:

بازگشت

JavaScript به طور خودکار این ترتیب‌دهی را بسته خواهد کرد:

بازگشت;

این موضوع به این دلیل است که در JavaScript، استفاده از نقطه و کاما برای بسته شدن (پایان) ترتیب‌دهی‌ها انتخابی است.

JavaScript در پایان خط بسته خواهد شد بازگشت ترتیب‌دهی نکنید، زیرا خود آن یک ترتیب‌دهی کامل است.

بنابراین، هرگز به بازگشت ترتیب‌دهی می‌شود.

با استفاده از شماره‌ی دسترسی به آرایه‌ها

بسیاری از زبان‌های برنامه‌نویسی از آرایه‌هایی با شماره‌های نامگذاری شده پشتیبانی می‌کنند.

آرایه‌هایی با شماره‌های نامگذاری شده به عنوان آرایه‌های مرتبط (یا هش) شناخته می‌شوند.

JavaScript پشتیبانی نمی‌شودآرایه‌هایی با شماره‌های نامگذاری شده.

در JavaScript،آرایهاستفاده می‌شودشماره‌های عددی:

مثال

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length به 3 برمی‌گردد
var y = person[0];              // person[0] به "Bill" برمی‌گردد

خودتان امتحان کنید

در JavaScript،اشیاءاستفاده می‌شودشماره‌های نامگذاری شدهبازگرداند.

اگر از شماره‌های نامگذاری شده استفاده کنید، JavaScript آرایه را به یک اشیاء استاندارد تبدیل می‌کند.

در حالی که در حال بازتعریف خودکار هستند، روش‌ها یا ویژگی‌های آرایه‌ها نتایج تعریف نشده یا نادرست تولید می‌کنند:

مثال

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length به 0 برمی‌گردد
var y = person[0];              // person[0] به undefined برمی‌گردد

خودتان امتحان کنید

از کاما برای پایان تعریف استفاده کنید

کاما در تعریف اشیاء و آرایه‌ها در ECMAScript 5 قانونی است.

مثال رویه‌ای اشیاء:

person = {firstName:"Bill", lastName:"Gates", age:62,};

مثال رویه‌ای آرایه:

points = [35, 450, 2, 7, 30, 16,];

اخطار!!

Internet Explorer 8 می‌تواند از کار بیفتد.

JSON اجازه نمی‌دهد که کاما در انتهای خط وجود داشته باشد.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62};

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined نه Null است

اشیاء JavaScript، متغیرها، ویژگی‌ها و روش‌ها می‌توانند تعریف نشده باشند.

به علاوه، مقادیر اشیاء JavaScript خالی می‌تواند nullبازگرداند.

این ممکن است باعث شود که بررسی اینکه آیا اشیاء خالی هستند کمی دشوار شود.

می‌توانید نوع بررسی کنید که آیا نوع آن undefined،آیا اشیاء موجود هستند را آزمایش می‌کنیم:

مثال

اگر (typeof myObj === "undefined")

خودتان امتحان کنید

اما شما نمی‌توانید بررسی کنید که آیا شیء nullاست، زیرا اگر شیء تعریف نشده باشد، خطایی رخ خواهد داد:

نا درست است:

اگر (myObj === null)

برای حل این مشکل، باید بررسی کنید که آیا شیء null، نه undefined.

اما این همچنان باعث خطا خواهد شد:

نا درست است:

اگر (myObj !== null && typeof myObj !== "undefined")

بنابراین، قبل از اینکه غیر از null بررسی کنید، باید ابتدا بررسی کنید که آیا تعریف نشده است:

درست است:

اگر (typeof myObj !== "undefined" && myObj !== null)

خودتان امتحان کنید

به محدوده بلوکی امیدوار باشد

JavaScript نخواهدیک محدوده جدید برای هر بلوک کد ایجاد می‌کند.

در بسیاری از زبان‌های برنامه‌نویسی اینگونه است، اما JavaScript اما اینطور نیستبازگرداند.

این کد به نظر می‌رسد که باید undefined، یک خطای رایج در توسعه‌دهندگان جدید JavaScript است:

مثال

برای (تنوع i = 0; i < 10; i++) {
  // بلوک کد
}
بازگشت i;

خودتان امتحان کنید