เคล็ดลับในการดีบั๊กโค้ดโดยใช้ตัวอย่างลูปใน JavaScript

ตอนนี้ฉันจะสอนวิธีการหาข้อผิดพลาด ในโค้ดให้คุณ ลองนึกภาพว่าคุณเนื่องจาก ความเข้าใจผิดบางอย่างไม่ได้ทำตามคำแนะนำจากบทเรียน ที่แล้วและได้โค้ดที่ทำงานไม่ได้ ลองมา ดูกันว่าจะหาข้อผิดพลาดและทำให้ มันทำงานได้อย่างไร

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

วิธีการที่ถูกต้องคือการแสดงผลตัวแปร ออกคอนโซลและพิจารณาว่าสิ่งที่อยู่ตรงนั้น เป็นสิ่งที่ต้องการหรือไม่ โดยต้องเริ่มจากจุดที่คาดว่าจะมีปัญหาและเคลื่อนขึ้น ไปตามโค้ด ลองมาดูกัน ในทางปฏิบัติ

สมมติสำหรับตัวอย่างว่าคุณมี ภารกิจที่จะวนลูปผ่านอาร์เรย์ที่มีตัวเลข สองหลักและหาตัวเลขที่ หลักแรกมากกว่าหลักที่สองอยู่หนึ่ง สมมติเพื่อความง่ายว่าอาร์เรย์เก็บ ตัวเลขในรูปแบบสตริง

สมมติว่าคุณแก้ไขปัญหานี้และได้ โค้ดต่อไปนี้:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum); // แสดงผล 0

อย่างไรก็ตาม โค้ดแสดงผล 0 ใน กรณีนี้ สิ่งแรกที่ต้องทำคือตรวจสอบ ดูว่าในตัวแปร การทำงานของโค้ดเข้าเงื่อนไข if หรือไม่ ลองแสดงผลบางสิ่งในคอนโซลที่นั่น:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		console.log('!'); // ไม่แสดงผลอะไรเลย
		sum += elem;
	}
}

console.log(sum);

เนื่องจากไม่มีอะไรปรากฏในคอนโซล นั่นหมายความว่าการทำงานของโค้ด ไม่เข้าเงื่อนไข ลองมาดูด้วยตา ว่าเรากำลังเปรียบเทียบอะไร:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	console.log(elem[0], elem[1] + 1); // '2' และ '11', '3' และ '21' ...
	
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum);

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

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) { // แก้ไข
		sum += elem;
	}
}

console.log(sum); // '021324354'

หลังจากการแก้ไข เราเห็นแล้วว่า ในตัวแปร sum มีบางอย่างปรากฏขึ้น แม้ว่าจะไม่ถูกต้อง อย่างไรก็ตาม เห็นได้ชัดว่ามีสิ่งที่เราต้องการอยู่ตรงนั้น แต่มันถูกบวกในรูปแบบสตริง ไม่ใช่ตัวเลข มาแก้ไขปัญหากัน:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) {
		sum += +elem; // แก้ไข
	}
}

console.log(sum); // ทำงานทั้งหมด

แก้ไขข้อผิดพลาดที่เกิดขึ้นในโค้ดต่อไปนี้:

let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;

for (let elem in obj) {
	if (elem[0] === '1' && elem[0] === '2') {
		sum += +elem;
	}
}

console.log(sum);