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():

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 2
const filteredItems = items.slice(0, i).concat(items.slice(i + 1, items.length))
// ["a", "b", "d", "e", "f"]

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:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]

Đố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.

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})
// ["a", "b", "d", "e", "f"]

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:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "d", "e"]

3.2. Theo giá trị(value)

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

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

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