Giải quyết bài toán FizzBuzz trong JavaScript

Câu chuyện dưới đây của mình sẽ giúp bạn giải quyết bài toán FizzBuzz trong JavaScript, rất bổ ích nên bạn hãy đọc đến cuối bài viết nhé!

Trong khi tớ đang xem qua các video tồn đọng của mình, tớ đã xem video này giải thích việc sử dụng một câu hỏi phỏng vấn viết code. Câu hỏi phỏng vấn viết code FizzBuzz. Tớ muốn tự mình trả lời câu hỏi và muốn chia sẻ quá trình suy nghĩ của mình khi tớ đã làm.

Tớ dừng video vào khoảng 1:40 vì tớ muốn tự mình xem qua câu trả lời mà không thấy câu trả lời trong video.

Viết chương trình in các số từ 1 đến 100. Nhưng đối với bội số của ba thì in “Fizz” thay vì số và đối với bội số của năm thì in “Buzz”. Đối với các số là bội số của cả ba và năm, hãy in “FizzBuzz”.

Giải pháp của mình với bài toán FizzBuzz

Với câu hỏi về bài toán FizzBuzz, suy nghĩ đầu tiên của mình về cách tiếp cận vấn đề này là làm thế nào để xác định bội số của 3 và 5. Điều tớ nghĩ đến là toán tử mô đun/phần dư % mà tớ biết rằng bội số của 3 & 5 nên giữ lại phần dư 0, vì vậy điều này có thể được sử dụng để xác định thời điểm xuất văn bản chính xác.

Để bắt đầu thử thách, tớ đã sử dụng jsfiddle và tớ đã tạo những thứ sau làm điểm bắt đầu của mình:

function fizzbuzz (num) {
  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}Code language: JavaScript (javascript)

Sau đó, mình bắt đầu triển khai, lần đầu tiên trông như thế này:

function fizzbuzz (num) {
  if (num % 3 === 0 && num % 5 === 0) {
    return `fizzbuzz`
  } else if (num % 3 === 0) {
    return `fizz`
  } else if (num % 5 === 0) {
    return `buzz`
  }
  
  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}Code language: JavaScript (javascript)

Đầu tiên, tớ kiểm tra xem số đó có phải là bội số của 3 & 5 hay không nếu vậy tớ trả về fizzbuzz văn bản kết hợp, sau đó mình kiểm tra xem số đó có phải là bội số của 3 hoặc 5 hay không và xuất ra văn bản chính xác, trở lại chỉ trả về số ban đầu.

Điều này khá dài dòng và có một chút trùng lặp với các kiểm tra cho bội số, vì vậy tớ nghĩ mình sẽ cải thiện câu trả lời.

function fizzbuzz (num) {
  const isFizz = num % 3 === 0
  const isBuzz = num % 5 === 0

  if (isFizz && isBuzz) {
    return `fizzbuzz`
  } else if (isFizz) {
    return `fizz`
  } else if (isBuzz) {
    return `buzz`
  }
  
  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}Code language: JavaScript (javascript)

Vì vậy, điều này tốt hơn nhưng vẫn còn hơi dài dòng, chúng tớ đã loại bỏ các kiểm tra trùng lặp thành một kiểm tra duy nhất có thể được sử dụng lại, nhưng vẫn có câu lệnh if bội số. Tớ nghĩ làm thế nào để điều này được giảm bớt và ngắn gọn hơn.

Đây là giải pháp cuối cùng của tớ:

function fizzbuzz (num) {
  const isFizz = num % 3 === 0
  const isBuzz = num % 5 === 0
  
  return `${isFizz ? 'fizz' : ''}${isBuzz ? 'buzz' : ''}` || num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}Code language: JavaScript (javascript)

Tớ đã loại bỏ sự ủng hộ if statement của một số ba trong một ký tự mẫu sử dụng toán tử ngắn mạch để dự phòng cho số. Điều này hoàn thành việc tạo một chuỗi, trước tiên sẽ kiểm tra xem số có phải là bội của 3 hay không, sau đó sẽ thêm từ fizz, sau đó kiểm tra xem số có phải là bội của 5 hay không thì sẽ thêm từ buzz. 

Kết luận

Cái nào sẽ giải thích cho một trong hai và nó sẽ là một chuỗi trống nếu cả hai đều không phải là trung thực trong trường hợp này, toán tử ngắn mạch sẽ đánh giá chuỗi trống là falsey và sẽ sử dụng những gì ở bên phải của toán tử là số ban đầu.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG