[Javascript Typescript] Bài 4 - Vòng lặp và Cấu trúc Dữ liệu Danh sách

Phần 1: LẶP LẠI HÀNH ĐỘNG VỚI VÒNG LẶP while

Hãy tưởng tượng bạn đang chỉ huy một con robot 🤖. Thay vì ra lệnh "bước một bước", "bước một bước", "bước một bước", bạn có thể ra một lệnh duy nhất: "Trong khi đèn còn xanh 🟢, thì cứ tiếp tục bước đi 🚶‍♂️."

Vòng lặp while hoạt động y hệt như vậy. Nó sẽ liên tục thực thi một khối lệnh trong khi một điều kiện cụ thể vẫn còn là true.

Cú pháp Vòng lặp while 📝

Định nghĩa chung

Một vòng lặp while luôn bao gồm 3 phần chính:

1. Khởi tạo 🌱: Một biến điều kiện được tạo ra trước khi vòng lặp bắt đầu.
2. Điều kiện 🤔: Biểu thức bên trong while(). Vòng lặp sẽ được kiểm tra trước mỗi lần lặp. Nếu điều kiện là true, khối lệnh sẽ chạy. Nếu là false, vòng lặp sẽ kết thúc.
3. Cập nhật 🔄: Một hành động bên trong vòng lặp để thay đổi biến điều kiện.

Cú pháp:

// 1. Khởi tạo

let bien_dieu_kien;

// 2. Vòng lặp while với điều kiện

while (dieu_kien) {

  // Khối lệnh để thực thi...
  // 3. Cập nhật biến điều kiện

}

Ví dụ cơ bản: In các số từ 1 đến 5 🔢

// 1. Khởi tạo biến đếm

let count = 1;

// 2. Điều kiện: lặp lại chừng nào count còn nhỏ hơn hoặc bằng 5

while (count <= 5) {

  console.log(`Đếm số: ${count}`);

  // 3. Cập nhật: tăng biến đếm lên 1 sau mỗi lần lặp

  count++;

}
console.log("Đã đếm xong! ✅");

⚠️ Cảnh báo: Vòng lặp vô hạn (Infinite Loop) ☠️

Nếu bạn quên bước cập nhật biến điều kiện, điều kiện sẽ mãi mãi là true và vòng lặp sẽ chạy không bao giờ dừng, làm treo chương trình của bạn.

// VÍ DỤ VỀ VÒNG LẶP VÔ HẠN - ĐỪNG CHẠY CODE NÀY! 🚫

let i = 0;

while (i < 5) {

  console.log("Lặp lại mãi mãi...");

  // Quên không có i++ ở đây!

}

Ứng dụng trong Automation 🤖

Vòng lặp while là công cụ hoàn hảo cho những tình huống mà bạn không biết trước chính xác số lần lặp. Bạn chỉ muốn lặp lại một hành động cho đến khi một trạng thái nào đó thay đổi.

Trường hợp sử dụng phổ biến nhất trong automation là chờ đợi một điều kiện (polling) ⏳: liên tục kiểm tra cho đến khi một element xuất hiện, biến mất, hoặc có một giá trị mong muốn.

Kịch bản: Kịch bản của bạn cần chờ cho đến khi nút "Thanh toán" 🔘 hiển thị trên trang rồi mới được click. Nút này có thể xuất hiện sau 1, 2, hoặc 5 giây tùy thuộc vào tốc độ mạng.

Ví dụ Automation:

// Giả lập trạng thái ban đầu

let nutThanhToanIsVisible = false;

let soLanKiemTra = 0;

const soLanKiemTraToiDa = 10; // Đặt giới hạn để tránh lặp vô hạn

console.log("Bắt đầu kiểm tra sự xuất hiện của nút 'Thanh toán'...");

// Lặp lại trong khi nút chưa hiển thị VÀ số lần kiểm tra chưa vượt giới hạn

while (!nutThanhToanIsVisible && soLanKiemTra < soLanKiemTraToiDa) {

  console.log(`(Lần kiểm tra ${soLanKiemTra + 1}) Nút chưa xuất hiện, chờ 1 giây... 🕒`);

  // --- TRONG CODE PLAYWRIGHT THẬT, BẠN SẼ LÀM NHƯ SAU ---

  // await page.waitForTimeout(1000);

  // nutThanhToanIsVisible = await page.locator('#checkout-button').isVisible();

  // --------------------------------------------------------

  // Giả lập rằng nút sẽ xuất hiện ở lần kiểm tra thứ 5

  if (soLanKiemTra === 4) {

    nutThanhToanIsVisible = true;

  }
  // Cập nhật biến đếm để vòng lặp có thể kết thúc

  soLanKiemTra++;

}

// Sau khi vòng lặp kết thúc, kiểm tra kết quả

if (nutThanhToanIsVisible) {

  console.log("✅ Nút 'Thanh toán' đã xuất hiện! Thực hiện click.");

  // await page.locator('#checkout-button').click();

} else {

  console.log("❌ LỖI: Hết thời gian chờ, không tìm thấy nút 'Thanh toán'.");

}

Phần 2: LẶP LẠI CÓ CẤU TRÚC VỚI VÒNG LẶP for

Đây là công cụ chuyên dụng khi bạn biết chính xác số lần mình muốn lặp. Ví dụ: "hãy lặp lại hành động này đúng 10 lần".

Ví von:

• while giống như bạn nói: "Cứ chạy đi 🏃‍♂️, khi nào mệt thì nghỉ 😴."
• for giống như bạn ra lệnh: "Hãy chạy đúng 5 vòng sân vận động rồi nghỉ 🏟️."

Vòng lặp for gom tất cả các yếu tố điều khiển (khởi tạo, điều kiện, cập nhật) vào một dòng duy nhất, giúp code trở nên gọn gàng và dễ kiểm soát hơn.

Cú pháp Vòng lặp for 📝

Định nghĩa chung

Cú pháp của vòng lặp for trông có vẻ phức tạp lúc đầu, nhưng thực ra nó chỉ gộp 3 phần của vòng lặp while vào trong dấu ngoặc ():

for ( 1. khởi_tạo ; 2. điều_kiện ; 3. cập_nhật ) {

  // Khối lệnh để lặp lại

}

1. Khởi tạo (let i = 0) 🌱: Chạy một lần duy nhất trước khi vòng lặp bắt đầu. Thường dùng để tạo ra một biến đếm (thường gọi là i, viết tắt của index).
2. Điều kiện (i < 5) 🤔: Được kiểm tra trước mỗi lần lặp. Nếu là true, khối lệnh sẽ chạy. Nếu là false, vòng lặp kết thúc.
3. Cập nhật (i++) 🔄: Chạy sau mỗi lần lặp. Thường dùng để tăng hoặc giảm biến đếm.

Ví dụ cơ bản: In các số từ 0 đến 4 🔢

//      1. Khởi tạo     2. Điều kiện      3. Cập nhật

for (let i = 0;        i < 5;            i++) {

  console.log(`Lần lặp thứ: ${i}`);

}

console.log("Đã kết thúc vòng lặp. ✅");

Kết quả:

Lần lặp thứ: 0

Lần lặp thứ: 1

Lần lặp thứ: 2

Lần lặp thứ: 3

Lần lặp thứ: 4

Đã kết thúc vòng lặp. ✅

Ứng dụng trong Automation 🤖

Vòng lặp for là công cụ hoàn hảo để lặp lại một hành động test một số lần nhất định.

Kịch bản: Kịch bản test của bạn cần thử lại một hành động bị lỗi đúng 3 lần trước khi bỏ cuộc (cơ chế Retry 🔁).

Ví dụ Automation:

const soLanThuLaiToiDa = 3;

let dangNhapThanhCong = false;

console.log("Bắt đầu kịch bản đăng nhập...");


// Vòng lặp sẽ chạy từ lần thử 1, 2, cho đến 3.

for (let lanThu = 1; lanThu <= soLanThuLaiToiDa; lanThu++) {

  console.log(`Đang thử đăng nhập lần thứ ${lanThu}...`);

  // Giả lập: Việc đăng nhập sẽ thành công ở lần thử thứ 3

  if (lanThu === 3) {

    dangNhapThanhCong = true;

    console.log("  -> Đăng nhập thành công! 🎉");

    break; // Thoát khỏi vòng lặp ngay khi thành công, không cần thử nữa

  } else {

    console.log("  -> Thất bại, đang chuẩn bị thử lại... ⏳");

  }

}

console.log("--- Kết quả cuối cùng ---");

if (dangNhapThanhCong) {

  console.log("✅ Kịch bản test thành công!");

} else {

  console.log("❌ Kịch bản test thất bại sau tất cả các lần thử.");

}

Lệnh break rất hữu ích, nó cho phép bạn thoát khỏi vòng lặp ngay lập tức mà không cần chờ điều kiện lặp kết thúc.

Kiểm soát vòng lặp với break và continue 🕹️

Lệnh break - "Lối thoát hiểm" 🚪🛑

Định nghĩa chung

Lệnh break sẽ chấm dứt ngay lập tức vòng lặp (for hoặc while) mà nó đang đứng bên trong. Chương trình sẽ bỏ qua tất cả các lần lặp còn lại và thực thi dòng code đầu tiên ngay sau vòng lặp.

Ví dụ với for: Tìm số đầu tiên chia hết cho 7, sau đó dừng lại.

console.log("Tìm số đầu tiên chia hết cho 7 từ 1 đến 20: 🔍");

for (let i = 1; i <= 20; i++) {

  console.log(`Đang kiểm tra số ${i}...`);

  if (i % 7 === 0) {

    console.log(`Đã tìm thấy: ${i}`);

    break; // Thoát khỏi vòng lặp for ngay lập tức

  }

}

console.log("Vòng lặp đã kết thúc.");

Kết quả:

Đang kiểm tra số 1...

...

Đang kiểm tra số 7...

Đã tìm thấy: 7

Vòng lặp đã kết thúc.

(Nó không kiểm tra từ số 8 đến 20 nữa)

Ứng dụng trong Automation 🤖

break là "lối thoát hiểm" khi có một lỗi nghiêm trọng xảy ra 💥 hoặc khi đã đạt được mục tiêu sớm hơn dự kiến.

Kịch bản với while: Kịch bản đang chờ một element xuất hiện, nhưng nếu một thông báo lỗi bất ngờ hiện ra, phải dừng lại ngay lập tức.

let elementIsVisible = false;

let errorPopupIsVisible = false;

let checkCount = 0;

while (!elementIsVisible && checkCount < 10) {

  checkCount++;

  console.log(`(Lần ${checkCount}) Đang tìm element...`);

  // Giả lập: tìm thấy lỗi ở lần thứ 3

  if (checkCount === 3) {

    errorPopupIsVisible = true;

  }

  // Nếu phát hiện lỗi, thoát khỏi vòng lặp ngay

  if (errorPopupIsVisible) {

    console.log("LỖI 🚨: Phát hiện popup lỗi. Dừng kịch bản!");

    break; 

  }

}

console.log("Kết thúc việc chờ đợi.");

Lệnh continue - "Bỏ qua lượt này" ⏭️

Định nghĩa chung

Lệnh continue sẽ bỏ qua phần còn lại của lần lặp hiện tại và nhảy ngay đến lần lặp tiếp theo.

• Trong vòng lặp for, nó sẽ nhảy đến bước cập nhật (i++).
• Trong vòng lặp while, nó sẽ nhảy đến bước kiểm tra điều kiện.

Ví dụ với for: In ra tất cả các số từ 1 đến 10, nhưng bỏ qua số 5.

for (let i = 1; i <= 10; i++) {

  if (i === 5) {

    console.log("Bỏ qua số 5... 🚫");

    continue; // Bỏ qua phần còn lại của lần lặp này

  }

  // Dòng code này sẽ không được chạy khi i = 5

  console.log(`Số: ${i}`);

}


Kết quả:

Số: 1

Số: 2

Số: 3

Số: 4

Bỏ qua số 5... 🚫

Số: 6

Số: 7

Số: 8

Số: 9

Số: 10

Ứng dụng trong Automation 🤖

continue rất hữu ích khi bạn muốn lặp qua một chuỗi các bước test và bỏ qua một vài trường hợp không hợp lệ hoặc không cần kiểm tra.

Kịch bản với while: Chạy 5 kịch bản test, nhưng bỏ qua test case số 3 vì nó đang được đánh dấu là "tạm thời vô hiệu hóa" 🚧.

let testNumber = 0;

while (testNumber < 5) {

    testNumber++;

    // Giả lập: test số 3 bị vô hiệu hóa

    if (testNumber === 3) {

        console.log(`--- Test case #${testNumber}: Bỏ qua (disabled) ⏩ ---`);

        continue; // Bỏ qua phần còn lại của lần lặp này, nhảy đến lần lặp tiếp theo

    }

    // Phần này chỉ chạy cho các test case không bị bỏ qua

    console.log(`Đang chạy Test case #${testNumber}...`);

    console.log(`  -> Test case #${testNumber} hoàn thành.`);

}

console.log("Đã chạy xong tất cả các test case hợp lệ.");

PHẦN 3: LÀM VIỆC VỚI DANH SÁCH DÙNG MẢNG (ARRAY)

Ở các bài trước, để lưu nhiều giá trị, chúng ta phải tạo nhiều biến:

let browser1 = "chrome";

let browser2 = "firefox";

let browser3 = "webkit";

Cách này rất cồng kềnh và không hiệu quả 🤯. Mảng (Array) ra đời để giải quyết vấn đề này, cho phép bạn lưu trữ một danh sách các giá trị trong một biến duy nhất.

Ví von: Thay vì cầm từng quả táo trên tay 🍎, bạn bỏ tất cả chúng vào một cái giỏ 🧺. Cái giỏ đó chính là Mảng.

Khởi tạo và Truy cập Mảng 📝

Định nghĩa chung

Mảng là một danh sách các phần tử được sắp xếp theo thứ tự. Mỗi phần tử bên trong được đánh một chỉ mục (index) duy nhất, bắt đầu từ 0.

Khởi tạo: Dùng cặp dấu ngoặc vuông [].

// Một mảng chứa các chuỗi

const browsers = ["chrome", "firefox", "webkit"];

// Một mảng chứa các số

const retryAttempts = [1, 2, 3];

// Một mảng rỗng

const errorMessages = [];

Truy cập phần tử: Dùng cú pháp ten_mang[index].

console.log(browsers[0]); // 👉 "chrome" (Phần tử đầu tiên luôn có index 0)

console.log(browsers[1]); // 👉 "firefox"

Lấy độ dài mảng: Dùng thuộc tính .length. 📏

console.log(`Có tổng cộng ${browsers.length} trình duyệt.`); // 3

Truy cập phần tử cuối cùng: Một mẹo rất phổ biến. 🔚

const lastBrowser = browsers[browsers.length - 1];

console.log(`Trình duyệt cuối cùng là: ${lastBrowser}`); // "webkit"

Thay đổi giá trị: Mảng có thể thay đổi được. ✏️

browsers[1] = "edge";

console.log(browsers); // ["chrome", "edge", "webkit"]

Các phương thức xử lý Mảng Cần Thiết Nhất 🧰

Đây là "bộ đồ nghề" để bạn thao tác với các phần tử trong mảng.

Thêm/Xóa phần tử

• .push(value) - Thêm vào cuối: 📥

const users = ["an", "binh"];

users.push("chi");

console.log(users); // ["an", "binh", "chi"]

• .pop() - Xóa ở cuối: 📤

const users = ["an", "binh", "chi"];

const userDaXoa = users.pop();

console.log(userDaXoa); // "chi"

console.log(users);     // ["an", "binh"]​

Lặp qua các phần tử 🔄

Vòng lặp for cổ điển

• Bản chất: Đây là một cấu trúc điều khiển cơ bản của chính ngôn ngữ JavaScript.
• Ví von: Giống như việc bạn lái xe số sàn 🚗⚙️. Bạn có toàn quyền kiểm soát mọi thứ.
• Ưu điểm: ✅
• Linh hoạt tối đa: Lặp tiến, lùi, nhảy bước.
• Toàn quyền kiểm soát: Hỗ trợ break và continue.
• Có thể thay đổi mảng gốc (cần cẩn thận).
• Nhược điểm: ❌
• Cú pháp dài dòng.
• Dễ gây lỗi: Lỗi điều kiện, quên i++.
• Tình huống lý tưởng: 🎯 Khi cần lặp ngược, lặp phức tạp, hoặc cần dùng break/continue với index.

// Ví dụ: Lặp ngược

const items = ['a', 'b', 'c'];

for (let i = items.length - 1; i >= 0; i--) {

  console.log(items[i]); // c, b, a

}​

 Phương thức .forEach()

• Bản chất: Một phương thức được tích hợp sẵn của Mảng.
• Ví von: Giống như bạn đi xe buýt theo một tuyến cố định 🚌. Xe buýt sẽ đi qua tất cả các trạm.
• Ưu điểm: ✅
• Cú pháp rất dễ đọc: "Với mỗi phần tử, hãy làm điều này...".
• Gọn gàng: Không cần quản lý biến i.
• An toàn hơn: Tránh xung đột biến.
• Nhược điểm: ❌
• Không thể dừng sớm (không có break hay continue).
• Khó hoạt động tốt với tác vụ bất đồng bộ (async/await).
• Tình huống lý tưởng: 💡 Khi bạn muốn thực hiện một hành động cho tất cả các phần tử mà không cần dừng lại.

// Ví dụ: Ghi log

const menuItems = ["Home", "Products", "Contact"];

menuItems.forEach(item => {

  console.log(`Kiểm tra menu item: ${item}`);

});​

• So sánh chi tiết: forEach vs for thông thường 🤔

Hãy tưởng tượng bạn cần giao báo cho 3 ngôi nhà. 📰

• .forEach() - Dịch vụ "Giao báo tận tay" 🤝
• Người đưa báo (.forEach) tự biết đi đến từng nhà. Tại mỗi nhà, họ đưa thẳng tờ báo (phần tử) vào tay bạn.
• Cách tiếp cận: "Khai báo" (nói cần làm gì).
• Lấy phần tử: Trực tiếp.
• Vòng lặp for thông thường - "Tự đi giao báo" 🚶‍♂️
• Bạn có danh sách số nhà (index) và phải tự mình đi giao. Bạn phải nhìn vào số nhà (i) rồi đi đến đó để lấy tờ báo (mang[i]).
• Cách tiếp cận: "Mệnh lệnh" (chỉ từng bước).
• Lấy phần tử: Gián tiếp thông qua index.

 Vòng lặp for...of ✨ (Lựa chọn hiện đại)

• Bản chất: Cú pháp hiện đại để lặp qua các "đối tượng có thể lặp lại".
• Ví von: Giống như bạn lái xe số tự động 🚘. Xe tự lo việc "sang số" (quản lý index), bạn chỉ cần tập trung vào việc "lái".
• Ưu điểm: ✅
• Cú pháp sạch sẽ và dễ đọc nhất.
• Kết hợp ưu điểm của cả hai: Dễ đọc như .forEach, hỗ trợ break và continue như for.
• Hoạt động tốt với async/await.
• Nhược điểm: 👎
• Không có index sẵn.
• Tình huống lý tưởng: 🏆 Đây nên là lựa chọn mặc định của bạn trong hầu hết các trường hợp.
•  

/ Ví dụ: Tìm và dừng lại

const userRoles = ["admin", "editor", "guest"];

for (const role of userRoles) {

  console.log(`Đang kiểm tra vai trò: ${role}`);

  if (role === 'editor') {

    console.log("-> Đã tìm thấy vai trò 'editor', dừng lại! 🛑");

    break;

  }

}

Bảng tóm tắt cuối cùng 📊

❓ Làm sao để lấy index trong for...of?

Dùng phương thức .entries() và kỹ thuật "Destructuring":

const browsers = ["chrome", "firefox", "webkit"];

for (const [index, browserName] of browsers.entries()) {

  console.log(`Index: ${index}, Trình duyệt: ${browserName}`);

}

Biến đổi và Lọc dữ liệu 🪄

• .map( (item) => { ... } ) - Biến đổi Mảng: 🧬
• Tạo ra một mảng mới bằng cách thực hiện một hành động biến đổi trên từng phần tử.
• Ứng dụng Automation: 🤖 Làm sạch dữ liệu lấy từ web.

const giaTien_text = ["   $15.50 ", "20 USD", " $ 9.99 "];

const giaTien_number = giaTien_text.map((gia) => {

  const giaDaLamSach = gia.trim().replace("USD", "").replace("$", "");

  return parseFloat(giaDaLamSach);

});

console.log(giaTien_number); // [15.5, 20, 9.99]

• .filter( (item) => { ... } ) - Lọc Mảng: 🌪️
• Tạo ra một mảng mới chỉ chứa những phần tử thỏa mãn một điều kiện (return true).
• Ứng dụng Automation: 🤖 Lọc ra các kết quả test bị thất bại.

const testStatuses = ["Passed", "Passed", "Failed", "Skipped", "Failed"];

const failedTests = testStatuses.filter((status) => {

  return status === "Failed";

});

console.log(failedTests); // ["Failed", "Failed"]

Kiểm tra và Tìm kiếm 🔍

• .includes(value) - Kiểm tra sự tồn tại:
• Trả về true hoặc false.
• Ứng dụng Automation: 🧪 Kiểm tra quyền hạn của người dùng.

const userPermissions = ["view", "edit", "comment"];

const canDelete = userPermissions.includes("delete");

console.log(`Người dùng có quyền xóa không? ${canDelete}`); // false

• .find( (item) => { ... } ) - Tìm phần tử đầu tiên:
• Trả về phần tử đầu tiên thỏa mãn điều kiện, hoặc undefined nếu không tìm thấy.
• Ứng dụng Automation: 🧪 Tìm một trình duyệt cụ thể trong danh sách cấu hình.

const browsers = ["chrome", "firefox", "edge"];

const foundBrowser = browsers.find((browser) => {

  return browser === "firefox";

});

console.log(`Đã tìm thấy trình duyệt: ${foundBrowser}`); // "firefox"

PHẦN 4: LÀM VIỆC VỚI DỮ LIỆU CÓ CẤU TRÚC DÙNG OBJECT

Sau khi đã làm chủ các kiểu dữ liệu nguyên thủy và mảng, đã đến lúc chúng ta tìm hiểu về cấu trúc dữ liệu linh hoạt và mạnh mẽ nhất trong JavaScript: Đối tượng (Object). 📇

Việc hiểu rõ về object là một bước ngoặt, giúp bạn chuyển từ việc viết các lệnh đơn lẻ sang việc xây dựng các cấu trúc dữ liệu có tổ chức, giống như một lập trình viên thực thụ. 👨‍💻

Vấn đề của các kiểu dữ liệu trước 🤔

Hãy tưởng tượng bạn cần lưu trữ thông tin về một người dùng. Nếu dùng các biến riêng lẻ, code của bạn sẽ rất rời rạc. Nếu dùng mảng, bạn sẽ không biết phần tử nào mang ý nghĩa gì.

// Dùng biến riêng lẻ (rời rạc) 👎

const userName = "Sơn Tinh";

const userAge = 3000;

const userAddress = "Núi Tản Viên";

// Dùng mảng (khó hiểu, không có ngữ cảnh) 👎

const userArray = ["Sơn Tinh", 3000, "Núi Tản Viên"];

console.log(userArray[1]); // 3000 là gì? Tuổi? Điểm số? 🤷

Object ra đời để giải quyết vấn đề này. ✨

Định nghĩa chung

Object (Đối tượng) là một cấu trúc dữ liệu cho phép bạn lưu trữ một tập hợp các cặp key: value (khóa: giá trị). Nó không có thứ tự như mảng.

Ví von: Nếu mảng là một "danh sách mua sắm" 🛒, thì object là một "bộ hồ sơ" 👤 hay một "tấm danh thiếp" 📇. Mọi thông tin đều được dán nhãn (key) rõ ràng.

Khởi tạo và Thao tác với Object 📝

Cú pháp và Khởi tạo

Object được tạo bằng cặp dấu ngoặc nhọn {}.

const user = {

  // key       : value

  name: "Sơn Tinh",

  age: 3000,

  address: "Núi Tản Viên",

  isMarried: true,

  skills: ["đẩy lùi lũ lụt", "xây núi", "săn bắn"] // value có thể là một mảng

};

Truy cập Thuộc tính (Properties)

Có hai cách để lấy giá trị từ một object:

1. Dot Notation (Dấu chấm - Phổ biến nhất) 👉

Cách viết ngắn gọn, sạch sẽ và được dùng nhiều nhất.

console.log(user.name);      // "Sơn Tinh"

console.log(user.skills[0]); // "đẩy lùi lũ lụt" (truy cập phần tử trong mảng)

2. Bracket Notation (Dấu ngoặc vuông) 🔑

Hữu ích khi key chứa ký tự đặc biệt hoặc được lưu trong một biến khác.

console.log(user['address']); // "Núi Tản Viên"

// Khi key chứa khoảng trắng

const car = {

  "serial-number": "ABC-123"

};

console.log(car["serial-number"]); // Không thể dùng car.serial-number

Thay đổi và Thêm mới Thuộc tính

Object có thể thay đổi được.

// Thay đổi giá trị ✏️

user.isMarried = false;

// Thêm một thuộc tính mới ✨

user.role = "admin";

// Xóa một thuộc tính 🗑️

delete user.age;

console.log(user);

Các phương thức hữu ích để làm việc với Object 🧰

JavaScript cung cấp một bộ công cụ có sẵn trên chính đối tượng Object .

• Công dụng: Trả về một mảng chứa tên của tất cả các key.
• Ứng dụng Automation: 🧪 Lặp qua tất cả thuộc tính của một object dữ liệu test để xác thực.

const testData = {

  username: "standard_user",

  password: "secret_sauce",

  expectedUrl: "/inventory.html"

};


console.log("--- Các dữ liệu test sẽ được sử dụng: ---");

Object.keys(testData).forEach(key => {

  console.log(`- ${key}: ${testData[key]}`); // Dùng bracket notation để truy cập

});​

• Công dụng: Trả về một mảng chứa tất cả các value.
• Ứng dụng Automation: 🧪 Lấy danh sách các chuỗi selector để kiểm tra.

const loginPage = {

  usernameInput: "#username",

  passwordInput: "#password",

  submitButton: "button[type='submit']"

}

const locators = Object.values(loginPage);

// locators bây giờ là ["#username", "#password", "button[type='submit']"]​

• Công dụng: Trả về một mảng của các mảng con, mỗi mảng con là một cặp [key, value].
• Ứng dụng Automation: 🧪 Cách tốt nhất để lặp qua một object nếu bạn cần cả key và value.

const testConfig = {

  browser: "chrome",

  timeout: 5000,

  headless: true

};

console.log("--- Cấu hình Test đang chạy ---");

for (const [key, value] of Object.entries(testConfig)) {

  console.log(`- ${key.toUpperCase()}: ${value}`);

}​

• Công dụng: Sao chép thuộc tính từ object nguồn (sources) vào object đích (target). Key trùng lặp sẽ bị ghi đè.
• Ứng dụng Automation: 🧪 Tạo cấu hình test cuối cùng bằng cách gộp cấu hình mặc định và tùy chỉnh.

const defaultConfig = {

  browser: "chrome",

  timeout: 30000,

  headless: true

};

const smokeTestConfig = {

  timeout: 10000, // Ghi đè timeout mặc định

  tags: "smoke"

};

const finalConfig = Object.assign({}, defaultConfig, smokeTestConfig);

console.log("Cấu hình cuối cùng cho smoke test:", finalConfig);​

• Công dụng: Trả về true hoặc false cho biết object có sở hữu trực tiếp một thuộc tính hay không.
• Ứng dụng Automation: 🧪 Kiểm tra an toàn xem phản hồi API có chứa một trường dữ liệu nhất định không.

// Giả lập phản hồi từ API

const apiResponse = {

  userId: 123,

  status: "success"

};



if (apiResponse.hasOwnProperty("errorMessage")) {

  console.log("FAIL ❌: API trả về có lỗi:", apiResponse.errorMessage);

} else {

  console.log("PASS ✅: API không trả về trường lỗi.");

}​