پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

ورود / عضویت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

۲۲
آبان

جلسه ۴۹ : اشتباهات رایج در جاوا اسکریپت

دسته‌بندی‌ها :

جلسه ۴۹ : اشتباهات رایج در جاوا اسکریپت

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در دو بخش اخیر به بررسی قواعد و اصول کد نویسی صحیح در جاوا اسکریپت که جلوی بسیاری از خطاها و مشکلات کدها را می گیرد پرداختیم. برخی از این اصول برای افزایش خوانایی کدها و بهینه سازی آن و برخی دیگر نیز جهت رفع خطاهای نحوی و … باید رعایت شوند. در این بخش نیز قصد داریمتا به برخی از اشتباهات رایج در جاوا اسکریپت که ممکن است نتایج اشتباه به همراه داشته باشد، بپردازیم.

اشتباهات رایج در جاوا اسکریپت

چند مورد از اشتباهات رایج در جاوا اسکریپت وجود دارد که نتایجی تولید می کند که با نتیجه مورد انتظار شما متفاوت است.

استفاده ی اشتباه از عملگرهای تخصیص

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

دستور if زیر false را برمی گرداند چراکه مقدار x با ۱۰ برابر نیست :

مثال : نتیجه ی اشتباه

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

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

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

دستور if زیر اما نتیجه ی true برمی گرداند چراکه به x مقدار ۱۰ اختصاص می یابد:

مثال : اختصاص مقدار 10 به x

var x = 0;
if (x = 10)

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

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

دستور if زیر نیز مقدار false را برمی گرداند چراکه ۰ برابر با false است:

مثال : مقدار false

var x = 0;
if (x = 0)

1 2	var x = 0; if (x = 0)

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

نکته : یک عملگر تخصیص همیشه مقدار تخصیص یافته را باز می گرداند.

نوع داده در مقایسه

در مقایسه های منظم، نوع داده مهم نیست. این عبارت مقدار true برمی گراند:

مثال : مقایسه ی اشتباه

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

1

2

3

var x = 10;

var y = "10";

if (x == y)

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

در مقایسه دقیق، نوع داده مهم است. این بیانیه اگر نادرست باز گردد:

مثال : مقایسه ی دقیق

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

1

2

3

var x = 10;

var y = "10";

if (x === y)

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

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

این سوئیچ مورد هشدار را نمایش می دهد:

مثال : اشتباه رایج

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

1

2

3

4

var x = 10;

switch(x) {

case 10: alert("Hello");

}

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

دستور switch زیر پیغام alert را نمایش می دهد :

مثال : مقدار سوئیچ اشتباه

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

1

2

3

4

var x = 10;

switch(x) {

case "10": alert("Hello");

}

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

ترکیب و جمع دو نوع

افزونه در مورد اضافه کردن اعداد است.

ترکیب بندی در مورد اضافه کردن رشته ها است.

در جاوا اسکریپت هر دو عملیات از عملگر + استفاده می کنند.

به این دلیل، اضافه کردن یک عدد به عنوان یک عدد نتیجه دیگری از اضافه کردن یک عدد به عنوان یک رشته است:

مثال :

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"

1 2	var x = 10 + 5; // the result in x is 15 var x = 10 + "5"; // the result in x is "105"

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

هنگام اضافه کردن دو متغیر، پیش بینی نتایج ممکن است دشوار باشد.

مثال : افزودن دو متغیر

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"

1

2

3

4

5

6

7

var x = 10;

var y = 5;

var z = x + y; // the result in z is 15

var x = 10;

var y = "5";

var z = x + y; // the result in z is "105"

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

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

تمام اعداد در جاوا اسکریپت به عنوان ۶۴ بیت تعداد اعداد شناور (شناورها) ذخیره می شوند.

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

مثال : اشتباه اعشاری

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3

1

2

3

var x = 0.1;

var y = 0.2;

var z = x + y // the result in z will not be 0.3

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

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

مثال : مشکل اعشاری زیر

var z = (x * 10 + y * 10) / 10;       // z will be 0.3

1	var z = (x * 10 + y * 10) / 10; // z will be 0.3

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

شکستن یک رشته در جاوا اسکریپت

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

مثال : شکستن یک رشته در جاوا اسکریپت

var x =
"Hello World!";

1 2	var x = "Hello World!";

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

اما شکستن یک دستور در وسط یک رشته کار نخواهد کرد:

مثال : شکستن دستور در وسط رشته

var x = "Hello
World!";

1 2	var x = "Hello World!";

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

برای شکستن از وسط یک رشته باید از بک اسلش (/) استفاده کنید :

مثال : شکستن صحیح رشته ها

var x = "Hello \
World!";

1 2	var x = "Hello \ World!";

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

قرار دادن اشتباه سمی کالون

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

مثال : تنظیم اشتباه سمی کولون

if (x == 19);
{
  // code block  
}

1

2

3

4

if (x == 19);

{

// code block

}

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

بستن خودکار انتهای دستورات

در صورتی که در جاوا اسکریپت انتهای دستورات را با سمی کالن مشخص نکنید، جاوا اسکریپت دچار مشکل نمی شود.

مثال : عدم استفاده از سمی کالن

function myFunction(a) {
  var power = 10  
  return a * power
}

1

2

3

4

function myFunction(a) {

var power = 10

return a * power

}

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

مثال : استفاده از سمی کالن

function myFunction(a) {
  var power = 10;
  return a * power;
}

1

2

3

4

function myFunction(a) {

var power = 10;

return a * power;

}

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

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

به همین دلیل، مثال ۳ همان نتایج را نیز به دست می آورد:

مثال : شکستن خط دستور

function myFunction(a) {
  var
  power = 10;  
  return a * power;
}

1

2

3

4

5

function myFunction(a) {

var

power = 10;

return a * power;

}

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

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

مثال : شکستن خط دوم دستور

function myFunction(a) {
  var
  power = 10;  
  return
  a * power;
}

1

2

3

4

5

6

function myFunction(a) {

var

power = 10;

return

a * power;

}

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

نتیجه این است که تابع فوق undefined را برمی گرداند!

چرا؟ چون جاوا اسکریپت return را یک دستور جداگانه در نظر می گیرد.

در واقع جاوا اسکریپت آن را به صورت زیر تفسیر می کند :

مثال : تفسیر حالت فوق

function myFunction(a) {
  var
  power = 10;  
  return;
  a * power;
}

1

2

3

4

5

6

function myFunction(a) {

var

power = 10;

return;

a * power;

}

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

توضیحات فوق :

اگر یک دستور مانند نمونه زیر ناقص باشد :

مثال :

var

1

var

جاوا اسکریپت سعی خواهد کرد که با خواندن خط بعد آن را کامل کند :

مثال :

power = 10;

1	power = 10;

اما اگر یک دستور کامل باشد (حداقل ها را داشته باشد) :

مثال :

return

1

return

جاوا اسکریپت به صورت خودکار آن را مانند نمونه ی زیر می بندد، و با این صورت یک دستور کامل در نظر گرفته می شود:

مثال :

return;

1

return;

این اتفاق می افتد زیرا بسته شدن (پایان دادن) اظهارات با semicolon در جاوا اسکریپت اختیاری است.

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

نکته : پس هرگز سعی نکنید که یک خط دستور return را به دو خط یا بیشتر بشکنید.

دسترسی به آرایه ها با نام گذاری index ها

بسیاری از زبان های برنامه نویسی آرایه ها را با index ها نام گذاری می کنند.

آرایه هایی که با نام شناخته می شوند آرایه های انجمنی (یا هش ها) نامیده می شوند.

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

در جاوا اسکریپت، آرایه ها از index های عددی استفاده می کنند:

مثال : نام گذاری آرایه در جاوا اسکریپت

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;       // person.length will return 3
var y = person[0];           // person[0] will return "John"

1

2

3

4

5

6

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length; // person.length will return 3

var y = person[0]; // person[0] will return "John"

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

در جاوا اسکریپت، اشیاء به عنوان شاخص استفاده می شود.

اگر شما از یک index نام استفاده کنید، هنگام دسترسی به یک آرایه، جاوا اسکریپت آرایه را به آبجکت استاندارد تعریف می کند.

پس از تعریف مجدد خودکار، متدهای آرایه و خواص نتیجه های نامشخص یا نادرستی را تولید می کنند:

مثال : تعریف نادرست آرایه

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;      // person.length will return 0
var y = person[0];          // person[0] will return undefined

1

2

3

4

5

6

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length; // person.length will return 0

var y = person[0]; // person[0] will return undefined

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

مشخص کردن پایان تعاریف با کاما

کاما گذاشتن در تعریف آبجکت و آرایه در ECMAScript 5 قانونی است.

مثال آبجکت-

مثال :

person = {firstName:"John", lastName:"Doe", age:46,}

1	person = {firstName:"John", lastName:"Doe", age:46,}

مثال آرایه-

مثال :

points = [40, 100, 1, 5, 25, 10,];

1	points = [40, 100, 1, 5, 25, 10,];

هشدار :

اینترنت اکسپلورر ۸ خطا خواهد داد.

JSON اجازه نمی دهد کاما ها در کنار هم قرار بگیرد.

مثال JSON :

مثال :

person = {"firstName":"John", "lastName":"Doe", "age":46}

1	person = {"firstName":"John", "lastName":"Doe", "age":46}

مثال :

points = [40, 100, 1, 5, 25, 10];

1	points = [40, 100, 1, 5, 25, 10];

نوع undefined در واقع NULL نیست

آبجکت های جاوا اسکریپت، متغیرها، خواص و متد ها می تواند نامشخص باشد.

علاوه بر این، آبجکت های جاوا اسکریپت خالی می توانند مقدار صفر باشند.

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

شما می توانید به صورت زیر تست کنید که اگر آبجکت وجود دارد آیا مقدار آن undefined است:

مثال : تست مقدار undefined

if (typeof myObj === "undefined")

1	if (typeof myObj === "undefined")

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

اما شما نمی توانید تست کنید که یک آبجکت صفر است یا خیر، زیرا اگر یک آبجکت undefined باشد خطایی رخ خواهد داد:

مثال-

مثال :

if (myObj === null)

1	if (myObj === null)

برای حل مشکل فوق شما باید هم تست کنید که آبجکت NULL نباشد و هم تست کنید که undefined نباشد.

اما این حالت نیز هنوز کامل نبوده و خطا دارد :

مثال :

if (myObj !== null && typeof myObj !== "undefined")

1	if (myObj !== null && typeof myObj !== "undefined")

چرا که شما باید قبل از تست NULL نبودن ابتدا undefined نبودن را تست کنید:

مثال : حالت صحیح

if (typeof myObj !== "undefined" && myObj !== null)

1	if (typeof myObj !== "undefined" && myObj !== null)

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

سطح block در Scope

جاوا اسکریپت یک محدوده جدید برای هر بلوک کد ایجاد نمی کند.

این در بسیاری از زبان های برنامه نویسی درست است، اما در جاوا اسکریپت درست نیست.

این کد مقدار (i (10 را حتی خارج از بلوک حلقه نمایش می دهد:

مثال : سطح block

for (var i = 0; i < 10; i++) {
  // some code
}
return i;

1

2

3

4

for (var i = 0; i < 10; i++) {

// some code

}

return i;

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

کلام آخر

در هر یک از زبان های برنامه نویسی بی دقتی در برخی مسائل ساده خطاهای بزرگی را در برنامه ایجاد می کند که ممکن است زمان زیادی را صرف رفع آن کنید، از این رو در این بخش سعی کرده ایم تا برخی از اشتباهات رایج در جاوا اسکریپت و روش صحیح آن را ارائه دهیم تا شما بتوانید این اشتباهات را به حداقل برسانید.

QR: جلسه ۴۹ : اشتباهات رایج در جاوا اسکریپت

به اشتراک بگذارید

اشتباهات رایج در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0