Hãy học cách lấy phần tử cuối cùng của mảng với JavaScript thuần, dùng 3 phương pháp khác nhau. Trước, tạo mảng mục để có gì làm việc. Ở đây dùng danh sách bài tập.
Tạo mảng bài tập
const exercises = ['pull-up', 'push-up', 'squat', 'deadlift']Nếu muốn lấy phần tử đầu tiên, dùng exercises[0], lấy thứ hai dùng exercises[1] nhưng nếu không biết tổng số bài tập trong danh sách?
Không sao, có vài cách làm.
1. Tìm phần tử cuối với array.length
Phương pháp đầu, dùng thuộc tính array.length của JavaScript. Để dùng, cần thiết lập biến, gán mảng cho nó:
const lastExercise = exercises[exercises.length - 1]Giờ chạy console.log(lastExercise) console sẽ xuất phần tử cuối mảng, ở đây deadlift.
2. Tìm phần tử cuối dùng pop()
Cũng có thể dùng phương thức mảng JavaScript pop() cũng lấy phần tử cuối mảng nhưng cách khác. Thử:
exercises.pop()Phương thức pop() đúng là nhắm đến phần tử cuối mảng, nhưng cẩn thận nó không chỉ tìm phần tử cuối, mà còn xóa nó.
Nếu console.log(exercises) ngay dưới exercises.pop() bạn thấy mảng giờ có 3 phần tử thay vì 4 ban đầu. Có thể là hoặc không phải ý bạn, tùy trường hợp dùng.
3. Tìm phần tử cuối với phương thức Array slice()
Phương pháp cuối tôi muốn chỉ tương tự phương pháp length, nhưng dùng slice() thay vào đó, như sau:
const lastExercise = exercises.slice(-1)Giờ console.log(lastExercise) bạn nhận kết quả giống ví dụ length. Nhiều dev thấy slice dễ đọc hơn length, nhưng đáng tiếc nó chậm hơn nhiều, về hiệu suất.
Để thấy rõ, thử chạy test so sánh slice vs. length trên jsperf.com
Nên dùng phương pháp mảng hiệu suất cao nhất hay dễ đọc nhất? Không có đúng sai, tùy ngữ cảnh.
Nói chung, tôi xu hướng chọn hiệu suất hơn tiện lợi làm quy tắc, ví dụ khi làm việc với hình ảnh. Không phải câu hỏi đen trắng. Về việc tìm phần tử cuối trong mảng đơn giản, bạn thậm chí không nhận ra chênh lệch hiệu suất giữa slice và length trong app, trừ khi thực thi hàng triệu hàm mỗi giây.
Luôn quyết định dựa trên ngữ cảnh.