แนวทางปฏิบัติที่ดีที่สุดสำหรับจาวาสคริปต์
หลีกเลี่ยงตัวแปรสากล หลีกเลี่ยง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()
นี้ใช้เพื่อเรียกใช้ข้อความเป็นโค้ด แทบทุกกรณีไม่จำเป็นต้องใช้
เนื่องจากอนุญาตให้เรียกใช้รหัสที่กำหนดเองได้ จึงแสดงถึงปัญหาด้านความปลอดภัย