Thêm và lấy phần tử đầu
Bài học 7 trên 18 trong khóa học Các phương thức mảng trong JavaScript của Coddy.
Phương thức shift() xóa phần tử đầu tiên khỏi mảng (array) và trả về phần tử đã xóa. Phương thức này sửa đổi mảng ban đầu bằng cách giảm độ dài của mảng.
- Hãy hình dung mảng như một hàng gồm nhiều phần tử.
shift()lấy phần tử ở đầu hàng (chỉ số 0) rồi xóa phần tử đó, đồng thời dịch tất cả phần tử còn lại sang trái một vị trí. - Phương thức này hữu ích khi bạn cần xử lý hoặc lưu trữ riêng phần tử đầu tiên, rồi làm việc với các phần tử còn lại. Ví dụ:
const fruits = ["apple", "banana", "orange", "mango"];
const firstFruit = fruits.shift();
console.log(fruits); // Đầu ra: ["banana", "orange", "mango"]
console.log(firstFruit); // Đầu ra: "apple"Sau khi dùng phương thức shift() với mảng fruits trong ví dụ trên, phương thức này xóa phần tử đầu tiên "apple" khỏi mảng.
Phương thức unshift() thêm một hoặc nhiều phần tử vào đầu mảng và trả về độ dài mới của mảng. Phương thức này sửa đổi mảng ban đầu bằng cách tăng độ dài của mảng.
- Hãy hình dung
unshift()như thao tác thêm phần tử vào đầu hàng. Các phần tử mới trở thành những phần tử đầu tiên, đồng thời đẩy các phần tử hiện có sang phải. - Phương thức này hữu ích khi bạn muốn thêm phần tử mới vào đầu mảng hoặc sắp xếp lại các phần tử. Ví dụ:
const colors = ["red", "green", "blue"];
const newColors = colors.unshift("yellow", "purple");
console.log(colors); // Đầu ra: ["yellow", "purple", "red", "green", "blue"]
console.log(newColors); // Đầu ra: 5 (độ dài mới)Sau khi dùng phương thức unshift() với mảng colors trong ví dụ trên, phương thức này chèn các phần tử "yellow" và "purple" vào đầu mảng.
Thử thách
DễBạn có một danh sách việc cần làm gồm ba việc: "Read a book", "Play sports" và “Wash dishes”, như được liệt kê trong mảng tasks.
Viết code JavaScript để xóa việc đầu tiên khỏi danh sách, thêm việc mới "Feed the cat" vào vị trí đó, rồi in danh sách đã cập nhật ra.
Tự làm thử
let tasks = ['Read a book', 'Play sports', 'Wash dishes'];
// Viết code ở đâyTất cả bài học trong Các phương thức mảng trong JavaScript
1Bạn sẽ học được gì?
Các phương thức của mảng trong JS3Phương thức cơ bản
Độ dàiThêm và lấy phần tử cuốiThêm và lấy phần tử đầuKiểm tra phần tửĐảo ngược và nốiTự luyện tập: Trình biên dịch JavaScript online