Cách xóa một item khỏi Array trong JavaScript

JavaScript cung cấp nhiều cách để xóa một item khỏi một mảng(array). Hãy cùng tìm hiểu cách tốt nhất và tất cả các tùy chọn bạn có sử dụng để xoá item ra khỏi array với JavaScript.

Dưới đây là một số cách để xóa một item khỏi mảng bằng JavaScript.

Tất cả các phương thức được mô tả không làm thay đổi mảng ban đầu và thay vào đó tạo một mảng mới.

1. Nếu bạn biết chỉ số(index) của một Item

Giả sử bạn có một mảng và bạn muốn xóa một mục ở vị trí i.

Phương thức hữu ích bạn có thể sử dụng đó là slice():

slice() tạo một mảng mới với các chỉ mục mà nó nhận được. Chúng ta tạo một mảng mới, từ đầu đến chỉ mục mà chúng ta muốn xóa, và nối một mảng khác từ vị trí đầu tiên theo sau vị trí mà chúng ta đã loại bỏ đến cuối mảng.

2. Nếu bạn biết giá trị(value)

Trong trường hợp này, một tùy chọn tốt là sử dụng filter(), cung cấp cách tiếp cận declarative hơn:

Đối với cách này, bạn có thể sử dụng arrow functions trong ES6. Bạn có thể sử dụng các chức năng truyền thống để hỗ trợ các trình duyệt cũ hơn.

hoặc bạn có thể sử dụng Babel và chuyển mã ES6 thành ES5 để làm cho nó chạy được với các trình duyệt cũ, nhưng code của bạn trông vẫn chuyên nghiệp và hiện đại hơn.

3. Xóa nhiều Items

Điều gì sẽ xảy ra nếu thay vì một item duy nhất, bạn muốn xóa nhiều items trong mảng?

Hãy tìm giải pháp đơn giản nhất.

3.1. Theo chỉ mục(index)

Bạn chỉ có thể tạo một hàm và xóa các mục trong chuỗi:

3.2. Theo giá trị(value)

Bạn có thể tìm kiếm rồi đưa vào trong một callback function:

4. Tránh làm thay đổi mảng ban đầu

splice() (không nên nhầm lẫn với slice()) – splice() làm thay đổi mảng ban đầu và nên tránh.

Phương thức splice() trả về (các) mục đã loại bỏ trong một mảng và phương thức slice() trả về (các) phần tử đã chọn trong một mảng, dưới dạng một đối tượng mảng mới.

Phương thức splice() thay đổi mảng ban đầu và phương thức slice() không thay đổi mảng ban đầu.

Google Search
Làm quen với các components thường dùng khi tạo Gutenberg Block Gutenberg Block Attributes Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn 9 ứng dụng hữu ích cho Developers CSS Gap Space với Flexbox Làm tròn số trong PHP với ceil(), floor() và round() 10 mẹo để trở thành một nhà phát triển tuyệt vời Giới thiệu và sử dụng CSS Variables

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.