Bài 7. Kiểu dữ liệu trong Javascript

bởi | Th7 10, 2022 | Chưa phân loại

Trong Javascript sẽ có những kiểu dữ liệu gì? khi nào thì sử dụng loại nào, trong bài học hôm nay chúng ta sẽ cùng Wecode tìm hiểu về các kiểu dữ liệu trong Javascript nhé.

Kiểu dữ liệu là gì?

Trong lập trình kiểu dữ liệu là một khái niệm quan trọng. Kiểu dữ liệu (data type hoặc chúng ta có thể gọi đơn giản là type) là một cách để phân loại dữ liệu cho trình biên dịch hiểu các lập trình viên muốn sử dụng loại dữ liệu nào.

Trong ngôn ngữ lập trình JavaScript cho phép chúng ta làm việc với các kiểu dữ liệu nguyên thủy (string, number,…) và kiểu dữ liệu không nguyên thủy.

Kiểu dữ liệu nguyên thủy:

  • Number: Các số nguyên hoặc số thực. Ví dụ: 5 hoặc 5.05
  • String: là các text như “Các kiểu dữ liệu trong JavaScript”, text có thể có một hoặc nhiều ký tự.
  • Boolean: chỉ có 2 giá trị là true hoặc false.
  • Undefine:  là các giá trị không xác định.
  • Null: đơn giản là không có giá trị nào cả.

Kiểu dữ liệu không nguyên thủy (tham chiếu):

  • Object: Thể hiện một đối tượng và các thuộc tính có thể truy cập đến.
  • Array: Nhóm các giá trị giống nhau.
  • RegExp: Biểu thức chính quy.
Đọc thêm:   Bài 11. Xử lý chuỗi (string) trong Javascript

Dữ liệu trong Javascript là kiểu dữ liệu động. Điều này có nghĩa là cùng một biến có thể được sử dụng để chứa các kiểu dữ liệu khác nhau.

Hãy thử ví dụ đưới đây:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2>
<p>JavaScript has dynamic types. This means that the same variable can be used to hold different data types:</p>
<p id="demo"></p>
<script>
let x;         // Lúc này biến x có kiểu dữ liệu chưa xác định
x = 5;         // Lúc này biến x có giá trị kiểu số
x = "John";    // Bây giờ biến x có kiểu dữ liệu là kiểu chuỗi
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Dữ liệu kiểu string (chuỗi)

Trong JavaScript, các dữ liệu thuộc kiểu string (hay còn được gọi là “chuỗi”) là một tập hợp gồm các ký tự, chúng được viết bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Chuỗi là một tập hợp các ký tự được viết trong cặp dấu nháy kép hoặc nháy đơn:</p>
<p id="demo"></p>
<script>
let fullname1 = "Nguyen Van A"; //dùng dấu nháy kép
let fullname2 = 'Nguyen Van B'; //dùng dấu nháy đơn
document.getElementById("demo").innerHTML =
fullname1 + "<br>" + 
fullname2; 
</script>
</body>
</html>

Dữ liệu kiểu number (số)

Trong JavaScript, các dữ liệu thuộc kiểu number (hay còn được gọi là “số”) là một tập hợp của các con số (0 – 9) không chứa dấu khoảng trắng và có thể chứa dấu trừ (-) nằm ở đầu để đại diện cho số âm.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Đây là ví dụ kiểu dữ liệu số</p>
<p id="demo"></p>
<script>
let x1 = 34.00;
let x2 = 34;
let x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>

Các số cực lớn hoặc cực nhỏ có thể được viết bằng ký hiệu khoa học (hàm mũ):

Đọc thêm:   Hướng dẫn học lập trình Javascript

Ví dụ:

let y = 123e5;      // 12300000
let z = 123e-5;     // 0.00123

Lưu ý: Nếu một số được đặt bên trong gặp dấu nháy kép hoặc cặp dấu nháy đơn thì nó sẽ bị chuyển sang kiểu dữ liệu string.

Dữ liệu kiểu Booleans

Boolean là kiểu dữ liệu mà giá trị của nó chỉ có thể có  true hoặc false.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans là dữ liệu mà giá trị chỉ có true hoặc false:</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 5;
let z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>

Boolean thường được sử dụng trong trong các biểu thức điều kiện.

Mảng JavaScript

Mảng JavaScript được viết bằng dấu ngoặc vuông.

Các mục của mảng được phân tách bằng dấu phẩy.

Đoạn mã trong ví dụ sau khai báo (tạo) một mảng được gọi cars, chứa ba mục (tên xe):

<!DOCTYPE html>
<html>
<body>
<h2>Mảng trong JavaScript</h2>
<p>Chỉ số bắt đầu cho 1 mảng là 0.</p>
<p id="demo"></p>
<script>
const cars = ["Audi","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

Lưu ý: Phần tử đầu tiên trong mảng được bắt đầu ở vị trí [0], Bạn sẽ tìm hiểu thêm về mảng ở các bài sau trong khóa học này.

Đối tượng JavaScript

Các đối tượng JavaScript được viết bằng dấu ngoặc nhọn {}.

Các thuộc tính của đối tượng được viết dưới dạng các cặp tên: giá trị, cách nhau bằng dấu phẩy.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>

Đối tượng person trong ví dụ trên có 4 thuộc tính: firstName, lastName, age và eyeColor. Bạn sẽ tìm hiểu thêm về các đối tượng ở phần sau trong khóa học này

Đọc thêm:   Bài 2. Sử dụng Javscript như thế nào?

Toán tử kiểu – typeof

Bạn có thể sử dụng toán tử typeof trong JavaScript để biết kiểu dữ liệu mà biến đang lưu trữ

Toán tử typeof trả về kiểu của một biến hoặc một biểu thức:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4)+ "<br>" +
typeof 'Wecode'
</script>
</body>
</html>

Kiểu Chưa xác định – undefined

Trong JavaScript, một biến không có giá trị sẽ có giá trị undefined. Kiểu cũng vậy undefined.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Giá trị (và kiểu dữ liệu) của một biến không có giá trị là <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>

Bất kỳ biến nào cũng có thể được làm trống bằng cách đặt giá trị thành undefined. Kiểu dữ liệu cũng sẽ là undefined.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Biến có thể được làm trống bằng cách gán cho nó giá trị = <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html>