ข้อผิดพลาดของจาวาสคริปต์

สารบัญ

บทนี้ชี้ให้เห็นถึงข้อผิดพลาดทั่วไปของ JavaScript

ใช้ผู้ปฏิบัติงานที่ได้รับมอบหมายโดยไม่ได้ตั้งใจ

โปรแกรม JavaScript อาจสร้างผลลัพธ์ที่ไม่คาดคิดหากโปรแกรมเมอร์ ใช้ตัวดำเนินการมอบหมาย (=) โดยไม่ได้ตั้งใจ แทนตัวดำเนินการเปรียบเทียบ (==) ในคำสั่ง if

คำสั่ง if นี้ส่งคืน false (เป็น คาดว่า) เพราะ x คือ ไม่เท่ากับ 10:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>This returns false (as expected) because x is not equal to 10:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

คำสั่ง if นี้ส่งคืน true (อาจจะไม่ ตามที่คาดไว้) เพราะ 10 คือ จริง:

let x = 0;
if (x = 10)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This returns true (maybe not as expected), because 10 is true:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

คำสั่ง if นี้ส่งคืน false (อาจจะไม่ ตามที่คาดไว้) เพราะ 0 คือ เท็จ:

let x = 0;
if (x = 0)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This if statement returns false (maybe not as expected), because 0 is false:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

การมอบหมายงานจะส่งกลับค่าของงานเสมอ

คาดว่าจะมีการเปรียบเทียบแบบหลวมๆ

ในการเปรียบเทียบปกติ ประเภทข้อมูลไม่สำคัญ คำสั่ง if นี้ส่งคืน จริง:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In regular comparison, data type does not matter. This if statement returns true:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

ในการเปรียบเทียบที่เข้มงวด ประเภทข้อมูลมีความสำคัญ คำสั่ง if นี้ส่งคืนค่าเท็จ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In strict comparison, data type does matter. This if statement returns false:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

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

case switch นี้จะแสดงการแจ้งเตือน:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case 10: document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

case switch นี้จะไม่แสดงการแจ้งเตือน:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will not work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case "10": document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

การบวกและการต่อข้อมูลที่น่าสับสน

การบวกเป็นเรื่องเกี่ยวกับการเพิ่ม ตัวเลข

การต่อข้อมูลเป็นเรื่องเกี่ยวกับการเพิ่ม สตริง

ใน JavaScript การดำเนินการทั้งสองใช้ตัวดำเนินการ + เดียวกัน

ด้วยเหตุนี้ การเพิ่มตัวเลขเป็นตัวเลขจะทำให้เกิดตัวเลขที่แตกต่างกัน ผลลัพธ์จากการเพิ่มตัวเลขเป็นสตริง:

let x = 10;
x = 10 + 5;       // 
    Now x is 15

let y = 10;
y += "5";        
    // Now y is "105"

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let y = 10
y += "5";
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

เมื่อเพิ่มตัวแปรสองตัว การคาดการณ์ผลลัพธ์อาจเป็นเรื่องยาก:

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"

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "5";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

การลอยตัวที่เข้าใจผิด

ตัวเลขทั้งหมดใน JavaScript จะถูกจัดเก็บเป็น ตัวเลขทศนิยม แบบ 64 บิต (ลอย).

ภาษาการเขียนโปรแกรมทั้งหมด รวมถึง JavaScript มีปัญหาด้วย ค่าจุดลอยตัวที่แม่นยำ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

ในการแก้ปัญหาข้างต้น การคูณและหารจะช่วยได้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values.</p>
<p>To solve the problem, it helps to multiply and divide:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

ทำลายสตริง JavaScript

JavaScript จะช่วยให้คุณสามารถแบ่งคำสั่งออกเป็นสองบรรทัด:

ตัวอย่างที่ 1

let x =
"Hello World!";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Breaking a JavaScript Statement</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>

</body>
</html>

แต่การทำลายคำสั่งตรงกลางสตริงจะไม่ทำงาน:

ตัวอย่างที่ 2

let x = "Hello
World!";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>
<p>Breaking a statement in the middle of a string will not work:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

คุณต้องใช้ "แบ็กสแลช" หากคุณต้องทำลายคำสั่งในสตริง:

ตัวอย่างที่ 3

let x = "Hello \
World!";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>You must use a "backslash" if you must break a statement in a string:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>

</body>
</html>

อัฒภาควางผิดที่

เนื่องจากอัฒภาควางผิดที่ บล็อกโค้ดนี้จะดำเนินการโดยไม่คำนึงถึง ค่าของ x:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p id="demo"></p>

<script>
let x = 5;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

ทำลายคำชี้แจงการคืนสินค้า

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

ด้วยเหตุนี้ สองตัวอย่างนี้จึงส่งคืนผลลัพธ์เดียวกัน:

ตัวอย่างที่ 1

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10
  return a * power
}
</script>

</body>
</html>

ตัวอย่างที่ 2

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10;
  return a * power;
}
</script>

</body>
</html>

JavaScript ยังช่วยให้คุณสามารถแบ่งคำสั่งออกเป็นสองบรรทัดได้

ด้วยเหตุนี้ ตัวอย่างที่ 3 จะส่งกลับผลลัพธ์เดียวกันด้วย:

ตัวอย่างที่ 3

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return a * power;
}
</script>

</body>
</html>

แต่จะเกิดอะไรขึ้นหากคุณแยกคำสั่ง return ออกเป็นสองบรรทัดเช่น นี้:

ตัวอย่างที่ 4

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return
  a * power;
}
</script>

</body>
</html>

ฟังก์ชั่นจะส่งคืน unknown!

ทำไม เพราะ JavaScript คิดว่าคุณหมายถึง:

ตัวอย่างที่ 5

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return;
  a * power;
}
</script>

</body>
</html>

คำอธิบาย

หากคำสั่งไม่สมบูรณ์เช่น:

let

JavaScript จะพยายามทำให้คำสั่งสมบูรณ์โดยอ่านบรรทัดถัดไป:

 power = 10;

แต่เนื่องจากข้อความนี้เสร็จสมบูรณ์แล้ว:

 return

JavaScript จะปิดโดยอัตโนมัติดังนี้:

 return;

สิ่งนี้เกิดขึ้นเนื่องจากคำสั่งปิด (สิ้นสุด) ด้วยอัฒภาคเป็นทางเลือก จาวาสคริปต์

JavaScript จะปิดคำสั่ง return ที่ท้ายบรรทัดเพราะว่า มันเป็นข้อความที่สมบูรณ์

อย่าทำลายคำสั่งส่งคืน

การเข้าถึงอาร์เรย์ด้วยดัชนีที่มีชื่อ

ภาษาการเขียนโปรแกรมหลายภาษารองรับอาร์เรย์ที่มีดัชนีที่ระบุชื่อ

อาร์เรย์ที่มีดัชนีระบุชื่อเรียกว่าการเชื่อมโยง อาร์เรย์ (หรือแฮช)

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"

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

ใน 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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

การสิ้นสุดคำจำกัดความด้วยเครื่องหมายจุลภาค

เครื่องหมายจุลภาคต่อท้ายในคำจำกัดความของวัตถุและอาร์เรย์นั้นถูกกฎหมายใน 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];

ไม่ได้กำหนดไม่เป็นค่าว่าง

อ็อบเจ็กต์ JavaScript ตัวแปร คุณสมบัติ และวิธีการสามารถ unknown ได้

นอกจากนี้ อ็อบเจ็กต์ JavaScript ที่ว่างเปล่าสามารถมีค่า null ได้

ซึ่งอาจทำให้การทดสอบวัตถุว่างเปล่าได้ยากเล็กน้อย

คุณสามารถทดสอบได้ว่ามีออบเจ็กต์อยู่หรือไม่โดยการทดสอบว่าประเภทนั้นเป็น ไม่ได้กำหนด หรือไม่:

ตัวอย่าง :

if (typeof myObj === "undefined")

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>To test if an object does not exist, test if the type is undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>

</body>
</html>

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

ไม่ถูกต้อง:

if (myObj === null)

เพื่อแก้ปัญหานี้ คุณต้องทดสอบว่าวัตถุไม่ null หรือไม่ และไม่ใช่ unknown

แต่สิ่งนี้ยังสามารถทำให้เกิดข้อผิดพลาดได้:

ไม่ถูกต้อง:

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

ด้วยเหตุนี้ คุณต้องทดสอบว่าไม่ใช่ unknown ก่อนจึงจะสามารถทำได้ ทดสอบว่าไม่ใช่ null:

ถูกต้อง :

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you want to test if an object is not null, you must test if it not undefined first.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>

</body>
</html>