JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


แนวทางปฏิบัติที่ดีที่สุดสำหรับจาวาสคริปต์


หลีกเลี่ยงตัวแปรสากล หลีกเลี่ยงnewหลีกเลี่ยง==หลีกเลี่ยงeval()


หลีกเลี่ยงตัวแปรส่วนกลาง

ลดการใช้ตัวแปรส่วนกลางให้น้อยที่สุด

ซึ่งรวมถึงชนิดข้อมูล ออบเจ็กต์ และฟังก์ชันทั้งหมด

ตัวแปรและฟังก์ชันโกลบอลสามารถเขียนทับโดยสคริปต์อื่นได้

ใช้ตัวแปรท้องถิ่นแทน และเรียนรู้วิธีใช้ การปิด


ประกาศตัวแปรท้องถิ่นเสมอ

ตัวแปรทั้งหมดที่ใช้ในฟังก์ชันควรประกาศเป็นตัวแปรท้องถิ่น

ต้องประกาศตัวแปรท้องถิ่น ด้วย var คีย์เวิร์ดหรือletคีย์เวิร์ด หรือconstคีย์เวิร์ด มิฉะนั้นจะกลายเป็นตัวแปรส่วนกลาง

โหมดเข้มงวดไม่อนุญาตให้ใช้ตัวแปรที่ไม่ได้ประกาศ


ประกาศด้านบน

แนวทางปฏิบัติในการเขียนโค้ดที่ดีคือการใส่การประกาศทั้งหมดไว้ที่ด้านบนสุดของแต่ละสคริปต์หรือฟังก์ชัน

นี่จะ:

  • ให้รหัสทำความสะอาด
  • ให้ที่เดียวเพื่อค้นหาตัวแปรท้องถิ่น
  • ทำให้ง่ายต่อการหลีกเลี่ยงตัวแปรส่วนกลาง (โดยนัย) ที่ไม่ต้องการ
  • ลดความเป็นไปได้ของการประกาศซ้ำที่ไม่ต้องการ
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

สิ่งนี้ใช้กับตัวแปรลูปด้วย:

for (let i = 0; i < 5; i++) {


เริ่มต้นตัวแปร

แนวทางปฏิบัติในการเข้ารหัสที่ดีในการเริ่มต้นตัวแปรเมื่อคุณประกาศตัวแปร

นี่จะ:

  • ให้รหัสทำความสะอาด
  • จัดให้มีที่เดียวในการเริ่มต้นตัวแปร
  • หลีกเลี่ยงค่าที่ไม่ได้กำหนด
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

การเริ่มต้นตัวแปรให้แนวคิดเกี่ยวกับการใช้งานที่ตั้งใจไว้ (และประเภทข้อมูลที่ตั้งใจไว้)


ประกาศวัตถุด้วยconst

การประกาศอ็อบเจ็กต์ด้วย const จะป้องกันการเปลี่ยนแปลงประเภทโดยไม่ได้ตั้งใจ:

ตัวอย่าง

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

ประกาศอาร์เรย์ด้วยconst

การประกาศอาร์เรย์ด้วย const จะป้องกันการเปลี่ยนแปลงประเภทโดยไม่ได้ตั้งใจ:

ตัวอย่าง

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

อย่าใช้วัตถุใหม่ ()

  • ใช้""แทนnew String()
  • ใช้0แทนnew Number()
  • ใช้falseแทนnew Boolean()
  • ใช้{}แทนnew Object()
  • ใช้[]แทนnew Array()
  • ใช้/()/แทนnew RegExp()
  • ใช้function (){}แทนnew Function()

ตัวอย่าง

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

ระวังการแปลงประเภทอัตโนมัติ

JavaScript ถูกพิมพ์อย่างหลวม ๆ

ตัวแปรสามารถมีข้อมูลได้ทุกประเภท

ตัวแปรสามารถเปลี่ยนประเภทข้อมูลได้:

ตัวอย่าง

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

ระวังว่าตัวเลขอาจถูกแปลงเป็นสตริงหรือNaN(ไม่ใช่ตัวเลข) โดยไม่ได้ตั้งใจ

เมื่อทำการคำนวณทางคณิตศาสตร์ JavaScript สามารถแปลงตัวเลขเป็นสตริงได้:

ตัวอย่าง

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

การลบสตริงออกจากสตริงจะไม่สร้างข้อผิดพลาด แต่จะส่งคืนNaN(ไม่ใช่ตัวเลข):

ตัวอย่าง

"Hello" - "Dolly"    // returns NaN

ใช้ === เปรียบเทียบ

ตัว==ดำเนินการเปรียบเทียบจะแปลง (เป็นประเภทที่ตรงกัน) ก่อนการเปรียบเทียบเสมอ

ตัว===ดำเนินการบังคับให้เปรียบเทียบค่าและประเภท:

ตัวอย่าง

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

ใช้ค่าเริ่มต้นของพารามิเตอร์

หากมีการเรียกใช้ฟังก์ชันโดยมีอาร์กิวเมนต์ที่หายไป ค่าของอาร์กิวเมนต์ที่ขาดหายไปจะถูกตั้งค่า undefinedเป็น

ค่าที่ไม่ได้กำหนดสามารถทำลายโค้ดของคุณได้ เป็นนิสัยที่ดีในการกำหนดค่าเริ่มต้นให้กับอาร์กิวเมนต์

ตัวอย่าง

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015อนุญาตพารามิเตอร์เริ่มต้นในการกำหนดฟังก์ชัน:

function (a=1, b=1) { /*function code*/ }

อ่านเพิ่มเติมเกี่ยวกับพารามิเตอร์ฟังก์ชันและอาร์กิวเมนต์ได้ที่Function Parameters


ปิดสวิตช์ของคุณด้วยค่าเริ่มต้น

ลงท้ายswitchประโยคด้วยdefault. ทั้งที่คิดว่าไม่จำเป็น

ตัวอย่าง

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

หลีกเลี่ยง Number, String และ Boolean เป็น Objects

ปฏิบัติกับตัวเลข สตริง หรือบูลีนเป็นค่าดั้งเดิมเสมอ ไม่เป็นวัตถุ

ประกาศประเภทเหล่านี้เป็นวัตถุ ชะลอความเร็วในการดำเนินการ และสร้างผลข้างเคียงที่น่ารังเกียจ:

ตัวอย่าง

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

หรือแย่กว่านั้น:

ตัวอย่าง

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

หลีกเลี่ยงการใช้ eval()

ฟังก์ชันeval()นี้ใช้เพื่อเรียกใช้ข้อความเป็นโค้ด แทบทุกกรณีไม่จำเป็นต้องใช้

เนื่องจากอนุญาตให้เรียกใช้รหัสที่กำหนดเองได้ จึงแสดงถึงปัญหาด้านความปลอดภัย