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 ต่างมีปัญหาในการจัดการตัวเลขเล็กน้อย

var x = 0.1;
var y = 0.2;
var z = x + y             // ผลลัพธ์ใน z จะไม่เป็น 0.3

ทดลองด้วยตัวเอง

เพื่อแก้ปัญหาดังกล่าว โปรดใช้การคูณและการแบ่ง

ตัวอย่าง

var z = (x * 10 + y * 10) / 10;       // ผลลัพธ์ใน z จะเป็น 0.3

ทดลองด้วยตัวเอง

การสลับบรรทัดของตัวอักษร JavaScript

JavaScript อนุญาตให้คุณสลับบรรทัดคำสั่งเป็นสองบรรทัด

ตัวอย่าง 1

var x =
"Hello World!";

ทดลองด้วยตัวเอง

แต่การสลับบรรทัดในตัวอักษรกลางนั้นไม่ถูกต้อง

ตัวอย่าง 2

var x = "Hello
World!";

ทดลองด้วยตัวเอง

หากต้องการสลับบรรทัดในตัวอักษร ต้องใช้ขีดเหลี่ยมตัด

ตัวอย่าง 3

var x = "Hello \
World!";

ทดลองด้วยตัวเอง

สัญญาณขีดเหลี่ยมปิดที่ผิดตำแหน่ง

เพราะสัญญาณขีดเหลี่ยมปิดที่ผิดที่นี่ บล็อครหัสนี้จะทำงานอย่างไม่แน่ชัดตามค่า x

if (x == 19);
{
     // บล็อครหัส
}

ทดลองด้วยตัวเอง

การสลับบรรทัดของคำสั่ง return

การปิดคำสั่งอย่างอัตโนมัติที่จุดสิ้นสุดบรรทัดเป็นพฤติกรรมที่มาตรฐานของ JavaScript

ดังนั้น ตัวอย่างทั้งสองจะกลับค่าเดียวกัน

ตัวอย่าง 1

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

ทดลองด้วยตัวเอง

ตัวอย่าง 2

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

ทดลองด้วยตัวเอง

JavaScript ยังอนุญาตให้คุณสลับบรรทัดคำสั่งเป็นสองบรรทัด

ดังนั้น ตัวอย่าง 3 จะกลับค่าเดียวกัน

ตัวอย่าง 3

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

ทดลองด้วยตัวเอง

แต่ถ้าใช้ return ทำไมจะเกิดเหตุดังกล่าวเมื่อสลับบรรทัดคำสั่งเป็นสองบรรทัด?

ตัวอย่าง 4

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

ทดลองด้วยตัวเอง

ฟังก์ชันนี้จะกลับค่า undefined!

ทำไมเรียกว่านั้น? เพราะ JavaScript จะคิดว่าคุณตั้งใจ

ตัวอย่าง 5

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

ทดลองด้วยตัวเอง

การอธิบาย

หากคำสั่งไม่เต็มที่

var

JavaScript จะใช้อ่านบรรทัดต่อไปเพื่อเสริมคำสั่งนี้

power = 10;

แต่เพราะคำสั่งนี้เป็นคำสั่งที่เต็มที่

return

JavaScript จะปิดคำสั่งอย่างอัตโนมัติ

return;

เหตุผลที่มีการเกิดเหตุนี้คือ ใน JavaScript การใช้สัญญาณขีดเหลี่ยมปิด (ปิดคำสั่ง) นั้นเป็นทางเลือก

JavaScript จะปิดบรรทัดอย่างอัตโนมัติที่จุดสิ้นสุดบรรทัด return คำสั่ง เพราะมันเองเป็นคำสั่งที่เต็มที่แล้ว

ดังนั้น ไม่ควรที่จะ return ให้คำสั่งสลับบรรทัด

ผ่านการใช้รหัสชื่อเพื่อเข้าถึงแบบจำลอง

มากมายของภาษาแปลงภาษาสามารถสนับสนุน Array ที่มีดัชนีชื่อ

Array ที่มีดัชนีชื่อเรียกว่า Array ที่เป็น Hash Table (หรือ Associative Array)

JavaScript ไม่สนับสนุนArray ที่มีดัชนีชื่อ

ใน JavaScriptArrayใช้ดัชนีเลข：

ตัวอย่าง

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"

ทดลองด้วยตัวเอง

ใน JavaScriptObjectใช้ดัชนีชื่อ。

หากคุณใช้ดัชนีชื่อ ในการเข้าถึง Array JavaScript จะปรับรหัสให้เป็น Object มาตรฐาน

หลังจากการปรับรหัสอัตโนมัติ หน้าต่างหรือคุณสมบัติของ Array อาจทำให้ผลลัพธ์ที่ไม่มีค่าหรือผิดพลาด

ตัวอย่าง

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"

ทดลองด้วยตัวเอง

ใช้คำบอกไว้ท้ายเพื่อสิ้นสุดการกำหนด

คำบอกไว้ท้ายในการกำหนด Object และ Array นั้นถูกต้องใน ECMAScript 5

ตัวอย่างของ Object

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

ตัวอย่างของ Array

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 Object, ตัวแปร, 屬件 และ หน้าต่าง สามารถไม่มีค่าได้

นอกจากนี้ ค่าของ JavaScript Object ที่ว่างอาจเป็น null。

นี่อาจทำให้ทดสอบว่าวัตถุที่ทดสอบนั้นว่างหรือไม่เป็นไปได้ทันที

คุณสามารถทดสอบประเภทของคุณที่อยู่ใน undefined，เพื่อทดสอบว่าวัตถุนี้มีอยู่หรือไม่：

ตัวอย่าง

if (typeof myObj === "undefined")

ทดลองด้วยตัวเอง

แต่คุณไม่สามารถทดสอบว่าวัตถุเป็น: nullเพราะถ้าวัตถุไม่มีการกำหนด จะทำให้เกิดข้อผิดพลาด:

ที่ผิดพลาด:

if (myObj === null)

เพื่อแก้ปัญหานี้ ต้องทดสอบว่าวัตถุเป็น: nullแทนที่จะ undefined。

แต่นี้ยังคงจะทำให้เกิดข้อผิดพลาด:

ที่ผิดพลาด:

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

ดังนั้น ก่อนที่จะทดสอบว่าวัตถุไม่ใช่ null ต้องทดสอบว่าวัตถุไม่ใช่ undefined ก่อน:

ที่ถูกต้อง:

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

ทดลองด้วยตัวเอง

หวังว่าจะมีสถานที่ทำงานของบล็อค

JavaScript จะไม่จะสร้างสถานที่ทำงานใหม่สำหรับแต่ละบล็อครหัส。

หลายภาษาการเขียนโปรแกรมต่างๆ มีลักษณะเช่นนี้ แต่ JavaScript ไม่ใช่นั้น。

เชื่อว่ารหัสดังนี้จะกลับมา undefined，เป็นความผิดพลาดที่พบบ่อยของนักเรียน JavaScript ใหม่:

ตัวอย่าง

for (var i = 0; i < 10; i++) {
  // บล็อครหัส
}
return i;

ทดลองด้วยตัวเอง