Toán học cơ bản trong JavaScript — số và toán tử

Mọi người đều thích toán học

Được rồi, có thể không phải. Một số người trong chúng ta thích toán học, một số người đã ghét toán học kể từ khi chúng ta phải học bảng nhân và phép chia dài ở trường, và một số người nằm ở đâu đó giữa hai thái cực đó. Nhưng không ai trong chúng ta có thể phủ nhận rằng toán học là một phần cơ bản của cuộc sống mà chúng ta không thể tiến xa mà không có. Điều này đặc biệt đúng khi chúng ta đang học lập trình JavaScript (hoặc bất kỳ ngôn ngữ nào khác cho vấn đề đó) — nhiều việc chúng ta làm dựa vào việc xử lý dữ liệu số, tính toán các giá trị mới, v.v., và bạn sẽ không ngạc nhiên khi biết rằng JavaScript có một bộ các hàm toán học đầy đủ tính năng.

Bài viết này chỉ thảo luận về những phần cơ bản mà bạn cần biết ngay bây giờ.

Các kiểu số

Trong lập trình, ngay cả hệ thống số thập phân khiêm tốn mà tất cả chúng ta đều biết rõ cũng phức tạp hơn bạn có thể nghĩ. Chúng ta sử dụng các thuật ngữ khác nhau để mô tả các kiểu số thập phân khác nhau, ví dụ:

• Số nguyên là những số không có phần thập phân. Chúng có thể là dương hoặc âm, ví dụ: 10, 400 hoặc -5.
• Số dấu phẩy động (số thực) có dấu chấm thập phân và chữ số thập phân, ví dụ: 12.5 và 56.7786543.

Chúng ta thậm chí có các loại hệ thống số khác nhau! Thập phân là cơ số 10 (có nghĩa là nó sử dụng 0–9 ở mỗi chữ số), nhưng chúng ta cũng có những thứ như:

• Nhị phân — Ngôn ngữ cấp thấp nhất của máy tính; 0 và 1.
• Bát phân — Cơ số 8, sử dụng 0–7 ở mỗi chữ số.
• Thập lục phân — Cơ số 16, sử dụng 0–9 và sau đó a–f ở mỗi chữ số. Bạn có thể đã gặp những số này trước đây khi thiết lập màu sắc trong CSS.

Trước khi bạn bắt đầu lo lắng não của mình sẽ tan chảy, hãy dừng lại! Để bắt đầu, chúng ta sẽ chỉ gắn bó với số thập phân trong suốt khóa học này; bạn hiếm khi gặp nhu cầu bắt đầu suy nghĩ về các kiểu khác, nếu có.

Tin tốt thứ hai là không giống như một số ngôn ngữ lập trình khác, JavaScript chỉ có một kiểu dữ liệu cho số, cả số nguyên và thập phân — bạn đoán đúng, Number. Điều này có nghĩa là dù kiểu số nào bạn đang xử lý trong JavaScript, bạn xử lý chúng theo cùng một cách.

Tất cả chỉ là số đối với tôi

Hãy nhanh chóng chơi với một số con số để làm quen lại với cú pháp cơ bản mà chúng ta cần. Nhập các lệnh được liệt kê bên dưới vào bảng điều khiển (console) JavaScript công cụ dành cho nhà phát triển của bạn.

1. Đầu tiên hãy khai báo một vài biến và khởi tạo chúng với một số nguyên và một số thực, tương ứng, sau đó gõ lại tên biến để kiểm tra xem mọi thứ có đúng thứ tự không:

   js

   const myInt = 5;
   const myFloat = 6.667;
   myInt;
   myFloat;
   

2. Giá trị số được gõ mà không có dấu nháy — hãy thử khai báo và khởi tạo thêm một vài biến chứa số trước khi bạn tiếp tục.

3. Bây giờ hãy kiểm tra rằng cả hai biến gốc của chúng ta đều có cùng kiểu dữ liệu. Có một toán tử gọi là typeof trong JavaScript thực hiện điều này. Nhập hai dòng bên dưới như hiển thị:

   js

   typeof myInt;
   typeof myFloat;
   

   Bạn sẽ nhận được "number" được trả về trong cả hai trường hợp — điều này làm mọi thứ trở nên dễ dàng hơn cho chúng ta so với nếu các số khác nhau có các kiểu dữ liệu khác nhau, và chúng ta phải xử lý chúng theo những cách khác nhau. Phew!

Các phương thức Number hữu ích

Đối tượng Number, một thể hiện đại diện cho tất cả các số tiêu chuẩn bạn sẽ sử dụng trong JavaScript của mình, có một số phương thức hữu ích cho bạn để thao tác số. Chúng ta không đề cập chi tiết trong bài này vì chúng ta muốn giữ nó như là phần giới thiệu và chỉ đề cập những điều thiết yếu cơ bản thực sự cho bây giờ; tuy nhiên, khi bạn đã đọc qua mô-đun này một vài lần, hãy đến trang tham chiếu đối tượng và tìm hiểu thêm về những gì có sẵn.

Ví dụ, để làm tròn số của bạn đến một số chữ số thập phân cố định, hãy sử dụng phương thức toFixed(). Gõ các dòng sau vào bảng điều khiển (console) của trình duyệt của bạn:

const lotsOfDecimal = 1.7665849587;
lotsOfDecimal;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

Chuyển đổi sang kiểu dữ liệu số

Đôi khi bạn có thể kết thúc với một số được lưu trữ như kiểu chuỗi, điều này làm cho việc thực hiện các phép tính với nó trở nên khó khăn. Điều này thường xảy ra nhất khi dữ liệu được nhập vào ô nhập liệu của biểu mẫu, và kiểu nhập liệu là text. Có một cách để giải quyết vấn đề này — truyền giá trị chuỗi vào hàm tạo Number() để trả về phiên bản số của cùng giá trị đó.

Ví dụ, hãy thử gõ những dòng này vào bảng điều khiển (console) của bạn:

let myNumber = "74";
myNumber += 3;

Bạn kết thúc với kết quả 743, không phải 77, vì myNumber thực sự được định nghĩa là chuỗi. Bạn có thể kiểm tra điều này bằng cách gõ vào:

typeof myNumber;

Để sửa phép tính, bạn có thể làm điều này:

let myNumber = "74";
myNumber = Number(myNumber) + 3;

Kết quả là 77, như mong đợi ban đầu.

Toán tử số học

Toán tử số học được sử dụng để thực hiện các phép tính toán học trong JavaScript:

Chúng ta có lẽ không cần dạy bạn cách làm toán cơ bản, nhưng chúng ta muốn kiểm tra sự hiểu biết của bạn về cú pháp liên quan. Hãy thử nhập các ví dụ bên dưới vào bảng điều khiển (console) JavaScript công cụ dành cho nhà phát triển để làm quen với cú pháp.

1. Đầu tiên hãy thử nhập một số ví dụ đơn giản của riêng bạn, chẳng hạn như

   js

   10 + 7;
   9 * 8;
   60 % 3;
   

2. Bạn cũng có thể thử khai báo và khởi tạo một số số bên trong biến, và thử sử dụng chúng trong các phép tính — các biến sẽ hoạt động chính xác như các giá trị chúng chứa cho mục đích của phép tính. Ví dụ:

   js

   const num1 = 10;
   const num2 = 50;
   9 * num1;
   num1 ** 3;
   num2 / num1;
   

3. Cuối cùng cho phần này, hãy thử nhập thêm một số biểu thức phức tạp, chẳng hạn như:

   js

   5 + 10 * 3;
   (num2 % 9) * num1;
   num2 + num1 / 8 + 2;
   

Một số phần của tập hợp tính toán cuối cùng này có thể không cho bạn kết quả mà bạn mong đợi; phần bên dưới có thể cung cấp câu trả lời tại sao.

Thứ tự ưu tiên của toán tử

Hãy xem ví dụ cuối cùng từ trên, giả sử rằng num2 chứa giá trị 50 và num1 chứa giá trị 10 (như được nêu ban đầu ở trên):

num2 + num1 / 8 + 2;

Là một con người, bạn có thể đọc điều này là "50 cộng 10 bằng 60", sau đó "8 cộng 2 bằng 10", và cuối cùng "60 chia 10 bằng 6".

Nhưng trình duyệt thực hiện "10 chia 8 bằng 1.25", sau đó "50 cộng 1.25 cộng 2 bằng 53.25".

Điều này là do thứ tự ưu tiên của toán tử — một số toán tử được áp dụng trước các toán tử khác khi tính toán kết quả của một phép tính (được gọi là biểu thức, trong lập trình). Thứ tự ưu tiên của toán tử trong JavaScript giống như được dạy trong các lớp toán ở trường — nhân và chia luôn được thực hiện trước, sau đó cộng và trừ (phép tính luôn được đánh giá từ trái sang phải).

Nếu bạn muốn ghi đè thứ tự ưu tiên của toán tử, bạn có thể đặt dấu ngoặc đơn xung quanh các phần mà bạn muốn được xử lý rõ ràng trước. Vì vậy, để có kết quả là 6, chúng ta có thể làm điều này:

(num2 + num1) / (8 + 2);

Hãy thử nhập dòng trước vào bảng điều khiển (console) để kiểm tra điều này.

Toán tử tăng và giảm

Đôi khi bạn sẽ muốn liên tục cộng hoặc trừ một vào hoặc từ một giá trị biến số. Điều này có thể được thực hiện một cách thuận tiện bằng cách sử dụng các toán tử tăng (++) và giảm (--). Chúng ta đã sử dụng ++ trong trò chơi "Đoán số" trong bài JavaScript lần đầu tiên, khi chúng ta thêm 1 vào biến guessCount của mình để theo dõi người dùng còn lại bao nhiêu lượt đoán sau mỗi lượt.

guessCount++;

Hãy thử chơi với những thứ này trong bảng điều khiển (console) của bạn. Để bắt đầu, hãy lưu ý rằng bạn không thể áp dụng những thứ này trực tiếp cho một số, điều này có thể có vẻ lạ, nhưng chúng ta đang gán cho biến một giá trị mới được cập nhật, không thao tác trên giá trị bản thân. Đoạn sau sẽ trả về một lỗi:

3++;

Vì vậy, bạn chỉ có thể tăng một biến hiện có. Hãy thử điều này:

let num1 = 4;
num1++;

Được rồi, điều kỳ lạ số 2! Khi bạn làm điều này, bạn sẽ thấy một giá trị 4 được trả về — điều này là vì trình duyệt trả về giá trị hiện tại, sau đó tăng biến. Bạn có thể thấy rằng nó đã được tăng lên nếu bạn trả lại giá trị biến một lần nữa:

num1;

Điều tương tự đúng với --: hãy thử đoạn sau

let num2 = 6;
num2--;
num2;

Toán tử gán

Toán tử gán là những toán tử gán một giá trị cho một biến. Chúng ta đã sử dụng toán tử cơ bản nhất, =, nhiều lần — nó gán cho biến ở bên trái giá trị được nêu ở bên phải:

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

Nhưng có một số kiểu phức tạp hơn, cung cấp các phím tắt hữu ích để giữ cho mã của bạn gọn gàng và hiệu quả hơn. Những cái phổ biến nhất được liệt kê bên dưới:

Hãy thử gõ một số ví dụ trên vào bảng điều khiển (console) của bạn, để có ý tưởng về cách chúng hoạt động. Trong mỗi trường hợp, hãy xem liệu bạn có thể đoán giá trị là gì trước khi bạn gõ dòng thứ hai không.

Lưu ý rằng bạn hoàn toàn có thể sử dụng các biến khác ở phía bên phải của mỗi biểu thức, ví dụ:

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x *= y; // x now contains the value 12

Định kích thước hộp canvas

Trong bài tập này, bạn sẽ thao tác với một số con số và toán tử để thay đổi kích thước hộp. Hộp được vẽ bằng API trình duyệt gọi là Canvas API. Không cần lo lắng về cách hoạt động của nó — chỉ cần tập trung vào toán học cho bây giờ. Chiều rộng và chiều cao của hộp (tính bằng pixel) được xác định bởi các biến x và y, ban đầu cả hai đều được đặt giá trị là 50.

<canvas id="canvas" width="400" height="200"></canvas>
<p></p>

const canvas = document.getElementById("canvas");
const para = document.querySelector("p");
const ctx = canvas.getContext("2d");

// Edit the following two lines ONLY
let x = 50;
let y = 50;

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "green";
ctx.fillRect(10, 10, x, y);
para.textContent = `The rectangle is ${x}px wide and ${y}px high.`;

Mở ví dụ trên trong MDN Playground bằng cách nhấp vào nút "Play", sau đó làm theo danh sách các hướng dẫn bên dưới để làm cho hộp lớn/nhỏ đến một số kích thước nhất định, sử dụng các toán tử và/hoặc giá trị nhất định trong mỗi trường hợp:

• Thay đổi dòng tính x để hộp vẫn rộng 50px, nhưng 50 được tính bằng các số 43 và 7 và một toán tử số học.
• Thay đổi dòng tính y để hộp cao 75px, nhưng 75 được tính bằng các số 25 và 3 và một toán tử số học.
• Thay đổi dòng tính x để hộp rộng 100px, nhưng 100 được tính bằng ba số và các toán tử trừ và chia.
• Thay đổi dòng tính y để hộp cao 200px, nhưng 200 được tính bằng các số 2 và x và toán tử nhân.

Đừng lo lắng nếu bạn làm hỏng mã. Bạn luôn có thể nhấn nút Reset để bắt đầu lại.

Toán tử so sánh

Đôi khi chúng ta sẽ muốn chạy các bài kiểm tra đúng/sai, sau đó hành động phù hợp tùy thuộc vào kết quả của bài kiểm tra đó — để làm điều này, chúng ta sử dụng toán tử so sánh.

Nếu bạn thử nhập một số giá trị này vào bảng điều khiển (console), bạn sẽ thấy rằng chúng đều trả về giá trị true/false — những boolean mà chúng ta đã đề cập trong bài trước. Những thứ này rất hữu ích, vì chúng cho phép chúng ta đưa ra quyết định trong mã của mình, và chúng được sử dụng mỗi khi chúng ta muốn thực hiện một lựa chọn nào đó. Ví dụ, boolean có thể được sử dụng để:

• Hiển thị nhãn văn bản đúng trên nút tùy thuộc vào tính năng được bật hay tắt
• Hiển thị thông báo game over nếu trò chơi kết thúc hoặc thông báo chiến thắng nếu trò chơi đã thắng
• Hiển thị lời chúc mừng mùa lễ đúng tùy thuộc vào mùa lễ nào
• Thu phóng bản đồ vào hoặc ra tùy thuộc vào mức độ thu phóng nào được chọn

Chúng ta sẽ xem xét cách mã hóa logic như vậy khi chúng ta xem xét câu lệnh điều kiện trong một bài tiếp theo. Hiện tại, hãy xem một ví dụ nhanh:

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}

Bạn có thể thấy toán tử bình đẳng đang được sử dụng ngay bên trong hàm updateBtn(). Trong trường hợp này, chúng ta không kiểm tra xem hai biểu thức toán học có cùng giá trị hay không — chúng ta đang kiểm tra xem nội dung văn bản của nút có chứa một chuỗi nhất định hay không — nhưng nguyên tắc vẫn như nhau. Nếu nút hiện đang nói "Start machine" khi được nhấn, chúng ta thay đổi nhãn của nó thành "Stop machine", và cập nhật nhãn thích hợp. Nếu nút hiện đang nói "Stop machine" khi được nhấn, chúng ta đổi lại màn hình.

Tóm tắt

Trong bài này, chúng ta đã đề cập đến thông tin cơ bản mà bạn cần biết về số trong JavaScript, bây giờ. Bạn sẽ thấy số được sử dụng lặp đi lặp lại, trong suốt quá trình học JavaScript của bạn, vì vậy đây là ý tưởng tốt để làm quen với điều này ngay bây giờ. Nếu bạn là một trong những người không thích toán học, bạn có thể lấy sự an ủi từ thực tế rằng chương này khá ngắn.

Trong bài tiếp theo, chúng ta sẽ cung cấp cho bạn một số bài kiểm tra mà bạn có thể sử dụng để kiểm tra mức độ hiểu biết và ghi nhớ thông tin này của bạn.

Xem thêm

• Số và chuỗi
• Biểu thức và toán tử

• Previous
• Overview: Lập trình động với JavaScript
• Next