٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش اشتباهات مشترک JavaScript

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

محمد یوسفی

23 جولای 2021

این فصل به برخی اشتباهات رایج 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");
}


اضافه کردن و الحاق گیج کننده

جمع در مورد جمع اعداد است .

الحاق در مورد افزودن رشته ها است .

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

به همین دلیل ، افزودن یک عدد به عنوان یک عدد نتیجه ای متفاوت از افزودن یک عدد به عنوان یک رشته خواهد داشت:

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"

سو Mis تفاهم شناورها

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

تمام زبانهای برنامه نویسی ، از جمله 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

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

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

مثال 1

let x =
"Hello World!";

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

مثال 2

let x = "Hello
World!";

اگر باید بیانیه ای را در یک رشته بشکنید ، باید از “بک اسلش” استفاده کنید:

مثال 3

let x = "Hello \
World!";

let x = “Hello \
World!”
;

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

شکستن بیانیه بازگشت

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

به همین دلیل ، این دو مثال نتیجه یکسانی را برمی گردانند:

مثال 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!

چرا؟ از آنجا که جاوا اسکریپت فکر کرد منظورتان این است:

مثال 5

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

توضیح

اگر عبارتی ناقص باشد مانند:

این اتفاق می افتد زیرا بستن (پایان دادن) عبارات با نقطه ویرگول در 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"

در جاوا اسکریپت ، اشیا از نمایه های نامگذاری شده استفاده می کنند .

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

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

مثال:

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,];

هشدار !!

اینترنت اکسپلورر 8 خراب می شود.

JSON اجازه استفاده از ویرگول را نمی دهد.

JSON:

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

JSON:

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

تعریف نشده پوچ نیست

اشیا Java ، متغیرها ، خصوصیات و روش های JavaScript می توانند باشند undefined.

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

این می تواند آزمایش خالی بودن یک شی object را کمی دشوار کند.

با آزمایش نوع می توانید اشیا if را آزمایش کنید undefined:

مثال:

if (typeof myObj === "undefined")

اما نمی توانید شی object را امتحان کنید null، زیرا اگر این شی object باشد خطایی ایجاد می کند undefined:

غلط:

if (myObj === null)

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

اما این هنوز هم می تواند خطایی ایجاد کند:

غلط:

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

به همین دلیل ، باید undefinedقبل از آزمایش عدم آزمایش ، عدم را امتحان کنید null:

درست:

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها