Đây là bài 4 của chương 3: Mảng và biến đổi dữ liệu, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.
Mục tiêu cụ thể
Map biến đổi từng phần tử, filter chọn phần tử, reduce tổng hợp kết quả. Chọn phương pháp dựa trên hình dạng đầu ra mong muốn.
Tình huống lỗi
Sort thay đổi mảng gốc. Object trong mảng mới vẫn có thể cùng tham chiếu với object ban đầu nếu chỉ sao chép nông.
Chẩn đoán có bằng chứng
Trong bài mảng và biến đổi dữ liệu, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.
- Ghi rõ bước thao tác và kết quả mong đợi.
- Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
- Đối chiếu dữ liệu thực với giả định ban đầu.
- Đặt giả thuyết và thay đổi một yếu tố.
- Xác nhận bằng cách tái chạy ví dụ tối thiểu.
Mẫu đối chiếu
const tasks = [{id:1, done:false}, {id:2, done:true}];
const pending = tasks.filter(task => !task.done);
const ids = pending.map(task => task.id);
const completed = tasks.reduce((n, task) => n + Number(task.done), 0);Kiểm tra sau sửa
- Danh sách nguồn giữ nguyên thứ tự
- Bộ lọc hoạt động với mảng rỗng
- Phân biệt bản sao mảng và bản sao object
Khi lỗi biến mất, thực hiện lại yêu cầu gốc: Thêm lọc trạng thái và sắp xếp theo tiêu đề mà không thay đổi danh sách nguồn. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.
Ghi chú bàn giao
Viết báo cáo ngắn gồm nguyên nhân, phạm vi ảnh hưởng, thay đổi và cách kiểm chứng. Nếu chưa xác định được nguyên nhân, ghi rõ điều còn chưa biết và phép kiểm tra tiếp theo, không biến giả thuyết thành kết luận.