Tìm hiểu về kiểu dữ liệu trong JSON bằng JavaScript

Trong thời đại phát triển mạnh mẽ của web và ứng dụng di động, JSON (JavaScript Object Notation) đã trở thành định dạng dữ liệu phổ biến nhất trong việc truyền và lưu trữ thông tin giữa client và server. Với cú pháp đơn giản, dễ đọc và khả năng tích hợp chặt chẽ với JavaScript, JSON giúp quá trình xử lý dữ liệu trở nên hiệu quả và linh hoạt hơn.

Để có thể sử dụng JSON một cách chính xác và tối ưu trong JavaScript, việc hiểu rõ các kiểu dữ liệu được hỗ trợ trong JSON là điều cần thiết. Bởi vì mỗi kiểu dữ liệu đều có cách biểu diễn, xử lý và giới hạn riêng, nếu không nắm rõ có thể dẫn đến lỗi hoặc sai lệch trong thao tác với dữ liệu.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu chi tiết về các kiểu dữ liệu trong JSON, cách chúng được thể hiện, cách sử dụng trong JavaScript, cũng như những lưu ý quan trọng khi làm việc với chúng.

Tổng quan về JSON trong JavaScript

Định nghĩa JSON (JavaScript Object Notation):

JSON là viết tắt của JavaScript Object Notation – một định dạng nhẹ để lưu trữ và trao đổi dữ liệu. Mặc dù được phát triển từ JavaScript, JSON hiện đã trở thành chuẩn định dạng phổ biến và được hỗ trợ trong hầu hết các ngôn ngữ lập trình hiện đại như Python, Java, PHP, C#, v.v.

Cú pháp của JSON được xây dựng dựa trên cách viết của object trong JavaScript, với dữ liệu được trình bày theo cặp "key": value và có thể lồng nhau theo nhiều cấp độ.

Mục đích sử dụng của JSON:
JSON được sử dụng rộng rãi trong các ứng dụng web và phần mềm, đặc biệt là trong các tình huống như:

• Truyền dữ liệu giữa client và server: Ví dụ khi gửi dữ liệu từ form lên server hoặc nhận dữ liệu từ API.

• Lưu trữ dữ liệu cấu hình ứng dụng: Nhiều ứng dụng sử dụng file .json để lưu cài đặt hoặc cấu hình mặc định.

• Lưu trữ cục bộ: JSON thường được dùng để lưu trữ thông tin trong localStorage hoặc sessionStorage của trình duyệt.

• Đồng bộ dữ liệu giữa các phần mềm/hệ thống: Nhờ tính đơn giản và khả năng mô tả cấu trúc tốt, JSON được dùng để đồng bộ dữ liệu giữa các hệ thống khác nhau.

JSON là chuỗi văn bản có cấu trúc:
Mặc dù trong JavaScript, JSON có thể được thao tác giống như một đối tượng hoặc mảng, bản chất của JSON là một chuỗi văn bản (string). Để sử dụng JSON, chúng ta thường phải:

• Chuyển object JavaScript sang chuỗi JSON bằng JSON.stringify().

• Chuyển chuỗi JSON thành object JavaScript bằng JSON.parse().

Việc chuyển đổi qua lại này giúp JavaScript dễ dàng phân tích, xử lý và hiển thị dữ liệu một cách hiệu quả và nhanh chóng.

Các kiểu dữ liệu được hỗ trợ trong JSON bằng JavaScript

JSON hỗ trợ nhiều kiểu dữ liệu để mô tả và lưu trữ thông tin. Dưới đây là các kiểu dữ liệu cơ bản được sử dụng trong JSON:

String (Chuỗi)

• Kiểu dữ liệu String trong JSON được sử dụng để biểu diễn các chuỗi văn bản.

• Chuỗi phải được bao quanh bởi dấu ngoặc kép (" ").

• Ví dụ: "name": "John", "message": "Hello, world!".

Chuỗi có thể chứa ký tự bất kỳ, bao gồm chữ cái, số, dấu cách và các ký tự đặc biệt. Các chuỗi JSON có thể được dùng để biểu diễn các giá trị như tên, mô tả, hoặc bất kỳ loại dữ liệu văn bản nào.

Number (Số)

• Số trong JSON có thể là số nguyên hoặc số thực (floating point).

• Các số này không được bao quanh bởi dấu ngoặc kép.

• Ví dụ: "age": 30, "height": 1.75, "price": 99.99.

Đặc biệt, JSON không phân biệt giữa số nguyên và số thực, tất cả đều là kiểu Number trong JSON. Điều này giúp JSON đơn giản và dễ dàng xử lý trong các ngôn ngữ lập trình.

Boolean (Đúng/Sai)

• Boolean chỉ có hai giá trị là true hoặc false.

• Dùng để biểu diễn các giá trị logic, có thể sử dụng trong kiểm tra điều kiện hoặc trạng thái.

• Ví dụ: "isStudent": true, "isAvailable": false.

Kiểu Boolean này rất hữu ích trong các ứng dụng kiểm tra các trạng thái, ví dụ như xem liệu người dùng đã đăng nhập chưa, hoặc một sản phẩm có còn hàng hay không.

null

• null đại diện cho một giá trị rỗng hoặc không xác định.

• Đây là cách JSON biểu diễn sự vắng mặt của một giá trị.

• Ví dụ: "middleName": null, "address": null.

Thông thường, giá trị null được dùng để khởi tạo một trường không có giá trị hoặc để reset một giá trị đã có trong hệ thống.

Array (Mảng)

• Mảng trong JSON là danh sách có thứ tự, được bao quanh bởi dấu ngoặc vuông [ ].

• Mảng có thể chứa nhiều giá trị và các giá trị này có thể là bất kỳ kiểu dữ liệu hợp lệ nào trong JSON.

• Ví dụ: "numbers": [1, 2, 3, 4, 5], "fruits": ["apple", "banana", "orange"].

Mảng JSON có thể chứa bất kỳ kiểu dữ liệu nào, kể cả các kiểu dữ liệu phức tạp như đối tượng (object) hoặc mảng con. Điều này làm cho JSON trở thành một công cụ rất linh hoạt để tổ chức dữ liệu.

Object (Đối tượng)

• Đối tượng trong JSON là một bộ các cặp key-value (khóa-giá trị), được bao quanh bởi dấu ngoặc nhọn { }.

• Mỗi đối tượng có thể chứa một hoặc nhiều cặp key-value, trong đó key luôn là chuỗi (string), và value có thể là bất kỳ kiểu dữ liệu hợp lệ nào.

• Ví dụ:

{
  "name": "Alice",
  "age": 25,
  "skills": ["HTML", "CSS", "JavaScript"]
}

Đối tượng có thể lồng nhau (nested objects), cho phép mô tả các cấu trúc dữ liệu phức tạp hơn. Ví dụ về đối tượng lồng nhau:

{
  "person": {
    "name": "Alice",
    "age": 25
  },
  "company": {
    "name": "Tech Corp",
    "location": "New York"
  }
}

Các đối tượng trong JSON giúp tổ chức dữ liệu theo cách có cấu trúc và dễ hiểu, thích hợp cho việc lưu trữ và truyền tải thông tin phức tạp.

Kiểu dữ liệu không được hỗ trợ trong JSON bằng JavaScript

Mặc dù JSON hỗ trợ nhiều kiểu dữ liệu cơ bản như chuỗi, số, boolean, mảng, và đối tượng, nhưng có một số kiểu dữ liệu không được phép hoặc không được hỗ trợ trong định dạng JSON. Những kiểu dữ liệu này cần được xử lý đặc biệt khi chuyển đổi từ hoặc sang JSON.

Dưới đây là các kiểu dữ liệu không được hỗ trợ trong JSON:

undefined

undefined là một kiểu dữ liệu trong JavaScript nhưng không có đại diện trong JSON. Nếu một đối tượng hoặc mảng chứa một thuộc tính có giá trị là undefined, khi chuyển đổi thành JSON, giá trị này sẽ bị loại bỏ.

Ví dụ:

const obj = { name: "Alice", age: undefined };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Kết quả: {"name":"Alice"}

• Như bạn có thể thấy, thuộc tính "age" đã bị loại bỏ trong chuỗi JSON do giá trị của nó là undefined. Điều này có nghĩa là bạn không thể trực tiếp truyền undefined qua JSON.

function

• Function (hàm) là một kiểu dữ liệu đặc biệt trong JavaScript, nhưng JSON không hỗ trợ lưu trữ hàm. Hàm là một đối tượng thực thi trong JavaScript và không thể được biểu diễn dưới dạng văn bản như JSON.

  Ví dụ:

const obj = { 
  name: "Alice", 
  greet: function() { return "Hello, " + this.name; } 
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Kết quả: {"name":"Alice"}

• Như bạn thấy, trong chuỗi JSON, hàm greet không được bao gồm, chỉ có thuộc tính "name" được giữ lại. Khi bạn cần lưu trữ hoặc truyền tải hàm, bạn phải chuyển hàm thành một chuỗi (thông qua các cơ chế khác như eval hoặc chuyển sang dạng đối tượng mô phỏng) trước khi làm việc với JSON.

Symbol

Symbol là một kiểu dữ liệu mới trong JavaScript (ECMAScript 6), được dùng chủ yếu để tạo ra các giá trị vô danh, không thể thay đổi, thường dùng như khóa của các thuộc tính trong đối tượng. Tuy nhiên, Symbol không được hỗ trợ trong JSON và sẽ bị bỏ qua khi chuyển đổi đối tượng sang JSON.

Ví dụ:

const sym = Symbol("id");
const obj = { [sym]: 123 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Kết quả: {}

• Bạn có thể thấy, khi đối tượng chứa một Symbol, nó không được bao gồm trong chuỗi JSON.

BigInt

BigInt là một kiểu dữ liệu được giới thiệu trong JavaScript để làm việc với các số nguyên rất lớn (lớn hơn giới hạn của kiểu Number). Tuy nhiên, BigInt không được hỗ trợ trong JSON. Nếu bạn cố gắng chuyển đổi một BigInt sang JSON, bạn sẽ nhận được lỗi hoặc kết quả không mong muốn.

Ví dụ:

const bigIntValue = BigInt(123456789012345678901234567890);
const jsonString = JSON.stringify({ value: bigIntValue });
console.log(jsonString); // Kết quả: TypeError: BigInt value cannot be serialized in JSON

Bạn cần phải chuyển đổi BigInt thành kiểu dữ liệu có thể lưu trữ trong JSON (như chuỗi) trước khi chuyển đổi qua JSON.stringify.

Các đối tượng phức tạp khác (vd: Date, RegExp)

Các đối tượng phức tạp như Date và RegExp không được xử lý trực tiếp trong JSON. Trong trường hợp Date, nó sẽ được chuyển thành chuỗi ISO-8601 (chuỗi đại diện cho ngày giờ), nhưng không giữ lại hoàn toàn tính năng của đối tượng Date. Còn với RegExp, đối tượng này sẽ không thể được chuyển đổi qua JSON mà không mất đi thông tin quan trọng.

Ví dụ với Date:

const dateObj = { date: new Date() };
const jsonString = JSON.stringify(dateObj);
console.log(jsonString); // Kết quả: {"date":"2025-04-17T12:34:56.789Z"}

Dữ liệu Date được chuyển thành một chuỗi đại diện ngày tháng (ISO format). Tuy nhiên, khi cần làm việc lại với đối tượng Date, bạn phải chuyển chuỗi này về Date thủ công qua new Date(string).

Ví dụ với RegExp:

const regExpObj = { regex: /abc/ };
const jsonString = JSON.stringify(regExpObj);
console.log(jsonString); // Kết quả: {"regex":{}}

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "street": "123 Main St",
    "city": "Wonderland"
  },
  "birthdate": "1991-06-15T00:00:00Z",
  "phone": null
}

const jsonString = '{"name": "Alice", "age": 30, "isStudent": false, "skills": ["HTML", "CSS", "JavaScript"], "address": {"street": "123 Main St", "city": "Wonderland"}, "birthdate": "1991-06-15T00:00:00Z", "phone": null}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Alice"
console.log(obj.skills); // ["HTML", "CSS", "JavaScript"]

const obj = {
  name: "Alice",
  age: 30,
  isStudent: false,
  skills: ["HTML", "CSS", "JavaScript"],
  address: { street: "123 Main St", city: "Wonderland" },
  birthdate: "1991-06-15T00:00:00Z",
  phone: null
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// Kết quả: '{"name":"Alice","age":30,"isStudent":false,"skills":["HTML","CSS","JavaScript"],"address":{"street":"123 Main St","city":"Wonderland"},"birthdate":"1991-06-15T00:00:00Z","phone":null}'

{
  "name": "Alice",
  "age": 30, // Sai: không có dấu phẩy sau phần tử cuối cùng.
}