ข้อผิดพลาดทั่วไปของ 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"
เมื่อเพิ่มตัวแปร 2 ตัว การคาดการณ์ผลลัพธ์อาจทำได้ยาก:
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 บิต (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
การทำลายสตริง 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;
}
แต่จะเกิดอะไรขึ้นถ้าคุณแบ่งคำสั่ง return เป็นสองบรรทัดดังนี้:
ตัวอย่างที่ 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 จะปิดคำสั่ง return ที่ท้ายบรรทัด เนื่องจากเป็นคำสั่งที่สมบูรณ์
อย่าทำลายคำสั่งส่งคืน
การเข้าถึงอาร์เรย์ด้วยดัชนีที่มีชื่อ
ภาษาโปรแกรมหลายภาษารองรับอาร์เรย์ที่มีดัชนีที่มีชื่อ
อาร์เรย์ที่มีดัชนีที่มีชื่อเรียกว่า associative arrays (หรือ hashes)
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];
ไม่ได้กำหนดไม่ใช่ Null
ออบเจ็กต์ 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)