JavaScript Katana

Mảng liên kết trong JavaScript được giải thích: Đối tượng, cách sử dụng và những khác biệt chính

Xử lý Dữ liệu (Chuỗi, Số, Ngày, Mảng, Đối tượng)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu

JavaScript là một trong những ngôn ngữ lập trình thiết yếu trong phát triển web. Trong số rất nhiều tính năng của nó, “mảng kết hợp” là một cấu trúc quan trọng giúp quản lý và xử lý dữ liệu một cách hiệu quả.

Trong bài viết này, chúng tôi cung cấp giải thích chi tiết về mảng kết hợp trong JavaScript, từ các khái niệm cơ bản đến các cách sử dụng nâng cao. Các ví dụ mã được đưa vào để nội dung dễ hiểu, ngay cả với người mới bắt đầu, vì vậy hãy sử dụng bài viết này như một tài liệu tham khảo thực tiễn.

2. Mảng kết hợp là gì?

2.1 Định nghĩa của mảng kết hợp

Mảng kết hợp là một loại cấu trúc dữ liệu quản lý dữ liệu dưới dạng các cặp “khóa” và “giá trị”. Trong khi các mảng thông thường sử dụng chỉ số số (0, 1, 2, …), mảng kết hợp cho phép bạn truy cập dữ liệu bằng các khóa dạng chuỗi tùy ý.

2.2 Mảng kết hợp trong JavaScript

Trong JavaScript, mảng kết hợp được biểu diễn bằng đối tượng. Đối tượng được định nghĩa bằng dấu ngoặc nhọn {} và lưu trữ dữ liệu dưới dạng các cặp khóa–giá trị.

Dưới đây là một ví dụ cơ bản về mảng kết hợp trong JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Sự khác nhau giữa mảng kết hợp và mảng thông thường

Mảng kết hợp và mảng thông thường khác nhau ở các khía cạnh sau.

ItemRegular ArrayAssociative Array
Index TypeNumbers (0, 1, 2…)Arbitrary strings (“name”, “email”)
Declaration Syntax[] (square brackets){} (curly braces)
Typical Use CaseManaging ordered dataManaging unordered data by keys

2.4 Trường hợp sử dụng

Mảng thông thường thích hợp cho việc quản lý dữ liệu dạng danh sách, trong khi mảng kết hợp tiện lợi cho việc xử lý dữ liệu có các thuộc tính cụ thể, chẳng hạn như thông tin người dùng hoặc cài đặt cấu hình.

3. Cách tạo mảng kết hợp

3.1 Khai báo bằng Object Literal

Cách phổ biến nhất để tạo một mảng kết hợp trong JavaScript là sử dụng object literal.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Tạo bằng new Object()

Một cách tiếp cận khác là tạo một đối tượng bằng cách sử dụng new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Thêm khóa và giá trị một cách động

Bằng cách sử dụng ký hiệu ngoặc vuông, bạn cũng có thể dùng các biến làm khóa.

let key = "color";
let product = {};
product[key] = "red";

4. Thao tác với mảng kết hợp

4.1 Thêm phần tử

Thêm bằng ký hiệu chấm (dot notation)

let user = {};
user.name = "Tanaka";
user.age = 30;

Thêm bằng ký hiệu ngoặc vuông (bracket notation)

let user = {};
user["email"] = "tanaka@example.com";

4.2 Lấy phần tử

Lấy bằng ký hiệu chấm

console.log(user.name); // "Tanaka"

Lấy bằng ký hiệu ngoặc vuông

console.log(user["email"]); // "tanaka@example.com"

4.3 Cập nhật phần tử

Bạn có thể cập nhật một giá trị đã tồn tại bằng cách gán một giá trị mới cho cùng một khóa.

user.age = 35;
console.log(user.age); // 35

4.4 Xóa phần tử

Sử dụng từ khóa delete để loại bỏ một cặp khóa–giá trị.

delete user.phone;
console.log(user.phone); // undefined

5. Duyệt mảng kết hợp

5.1 Duyệt bằng vòng lặp for…in

Vòng lặp for...in cho phép bạn duyệt qua các khóa của một mảng kết hợp.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Sử dụng Object.keys() và forEach()

Bạn có thể lấy một mảng các khóa bằng Object.keys() và sau đó duyệt qua nó bằng forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Sử dụng Object.entries() và for…of

Với Object.entries(), bạn có thể duyệt đồng thời cả khóa và giá trị.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Sắp xếp mảng kết hợp

6.1 Sắp xếp theo khóa

Các đối tượng JavaScript tự chúng không thể sắp xếp trực tiếp, nhưng bạn có thể sắp xếp các khóa của chúng và sau đó truy cập các giá trị theo thứ tự đã sắp xếp.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Sắp xếp theo Giá trị

Để sắp xếp theo giá trị, chuyển đối tượng thành một mảng các cặp khóa‑giá trị bằng cách sử dụng Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Lưu ý Quan trọng Khi Sắp xếp

Khi các giá trị được lưu dưới dạng chuỗi, việc sắp xếp số học yêu cầu chuyển đổi rõ ràng.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Lưu ý Quan trọng Khi Sử dụng Mảng Kết hợp

7.1 Khóa Trùng Lặp và Ghi đè

Nếu cùng một khóa được định nghĩa nhiều lần, giá trị sau sẽ ghi đè lên giá trị trước.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined và Kiểm tra Sự tồn tại của Khóa

Để kiểm tra một khóa có tồn tại trong mảng kết hợp hay không, sử dụng toán tử in hoặc hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 Phương thức push Không Thể Dùng

Mảng kết hợp (đối tượng) không hỗ trợ phương thức push(), phương thức này chỉ có sẵn cho các mảng thông thường.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Khác biệt so với Dữ liệu JSON

Các đối tượng JavaScript và dữ liệu JSON có liên quan nhưng không giống nhau. Đối tượng phải được chuyển đổi thành chuỗi JSON để trao đổi dữ liệu.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Tổng kết

8.1 Những Điểm Chính của Mảng Kết hợp

  • Dữ liệu được quản lý bằng các cặp khóa‑giá trị.
  • Các thao tác linh hoạt có thể thực hiện, bao gồm thêm, truy xuất, cập nhật và xóa dữ liệu.
  • Mảng kết hợp hỗ trợ lặp và sắp xếp thông qua các phương thức tích hợp.

8.2 Ví dụ Ứng dụng Thực tế

Dưới đây là một ví dụ về việc xử lý nhiều đối tượng người dùng bằng một mảng kết hợp với các mảng kết hợp.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. Câu hỏi Thường gặp (FAQ)

Q1. Sự Khác nhau Giữa Mảng Kết hợp và Mảng Thông thường là gì?

Mảng thông thường sử dụng chỉ mục số, trong khi mảng kết hợp sử dụng khóa dạng chuỗi để truy cập giá trị.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. Làm sao Kiểm tra một Khóa có Tồn tại?

Bạn có thể kiểm tra sự tồn tại của một khóa bằng cách sử dụng toán tử in.

if ("age" in user) {
  console.log(user.age);
}

10. Tổng kết Cuối cùng

Mảng kết hợp trong JavaScript cực kỳ hữu ích cho việc quản lý và tổ chức dữ liệu.
Trong bài viết này, chúng tôi đã đề cập từ các khái niệm cơ bản đến các mẫu sử dụng nâng cao.

Bước Tiếp Theo:

  • Chạy các ví dụ mã tự mình để hiểu sâu hơn.
  • Thử tích hợp mảng kết hợp với dữ liệu JSON và các thao tác API.
広告