Bạn thường sẽ cần xóa một phần tử khỏi một mảng trong JavaScript, cho dù đó là cấu trúc dữ liệu hàng đợi hay có thể từ Trạng thái React của bạn.
Trong nửa đầu của bài viết này, bạn sẽ tìm hiểu tất cả các phương pháp cho phép bạn loại bỏ một phần tử khỏi mảng mà không làm thay đổi mảng ban đầu. Trên thực tế, đây là điều bạn sẽ muốn làm thường xuyên nhất. Ví dụ: nếu bạn không muốn thay đổi Trạng thái phản ứng của mình. Hoặc mảng được sử dụng trong các phần khác của mã của bạn và việc thay đổi mảng đó sẽ gây ra sự cố không mong muốn.
Luôn luôn tốt hơn để tránh đột biến!
Tuy nhiên, để đầy đủ, nửa sau của bài viết sẽ liệt kê các phương pháp để xóa một mục khỏi mảng tại chỗ. Các phương thức này làm thay đổi chính mảng đó.
Tại đây, bạn có thể tìm thấy một bản tóm tắt hữu ích về nội dung bài viết, nếu bạn muốn điều hướng đến một phần cụ thể.
Cách xóa phần tử khỏi mảng mà không làm thay đổi mảng
Nếu bạn có một mảng đầu vào, chẳng hạn như một tham số chức năng, thì các phương pháp hay nhất sẽ chỉ ra rằng bạn không nên thay đổi mảng đó. Thay vào đó, bạn nên tạo một cái mới.
Có một số phương pháp bạn có thể sử dụng để xóa một mục cụ thể khỏi mảng mà không làm thay đổi mảng.
Để tránh làm thay đổi mảng, một mảng mới sẽ được tạo mà không có phần tử mà bạn muốn loại bỏ.
Bạn có thể sử dụng các phương pháp như:
Array.prototype.slice()Array.prototype.slice()cùng vớiArray.prototype.concat()Array.prototype.filter()- Một
forvòng lặp vàArray.prototype.push()
Hãy xem chi tiết cách bạn có thể sử dụng từng phần tử này để loại bỏ một phần tử khỏi mảng mà không làm thay đổi phần tử ban đầu.
Xóa phần tử đầu tiên của một mảng bằng slice
Nếu bạn muốn xóa phần tử đầu tiên trong một mảng, bạn có thể sử dụng Array.prototype.slice() trên một mảng có tên arr như thế này: arr.slice(1).
Đây là một ví dụ hoàn chỉnh, trong đó bạn muốn xóa phần tử đầu tiên khỏi một mảng chứa 6 chữ cái đầu tiên của bảng chữ cái.
// the starting array
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
// here the array is copied, without the first element
const copyWithoutFirstElement = arrayOfLetters.slice(1);
// arrayOfLetters is unchanged
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']
// and copyWithoutFirstElement contains the letters from b to f
console.log(copyWithoutFirstElement) // ['b', 'c', 'd', 'e', 'f']Các slice phương thức có thể lấy một số duy nhất làm đối số và trong trường hợp này, nó sao chép từ chỉ mục đó đến cuối mảng. Vì vậy, sử dụng arrayOfLetters.slice(1) sẽ tạo một bản sao của arrayOfLetters mảng loại trừ phần tử đầu tiên.
Xóa phần tử cuối cùng của một mảng bằng slice
Nếu phần tử bạn muốn loại bỏ là phần tử cuối cùng của mảng, bạn có thể sử dụng Array.prototype.slice() trên một mảng có tên arr theo cách này: arr.slice(0, -1).
Dưới đây là một ví dụ hoàn chỉnh sử dụng cùng một mảng bảng chữ cái ở trên, bắt đầu bằng một mảng gồm 6 chữ cái đầu tiên trong bảng chữ cái.
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
const copyWithoutLastElement = arrayOfLetters.slice(0, -1);
// arrayOfLetters is unchanged
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(copyWithoutLastElement) // ['a', 'b', 'c', 'd', 'e']Các slice phương thức nhận tối đa hai tham số. Chỉ số đầu tiên của slice cho biết chỉ mục nào sẽ bắt đầu sao chép và đối số thứ hai cho biết phần tử nào sẽ được sao chép – nhưng nó không bao gồm.
slice chấp nhận một chỉ số tiêu cực để tính từ cuối. Điều này có nghĩa là viết -1 có nghĩa là chỉ mục cuối cùng. Từ đó đến -1 có nghĩa là tạo một bản sao từ chỉ mục lên đến (nhưng không bao gồm) chỉ mục cuối cùng. Kết quả cuối cùng là phần tử cuối cùng không được bao gồm trong bản sao.
Xóa một phần tử ở bất kỳ vị trí nào của một mảng với slice và concat
Nếu bạn muốn tạo một bản sao thiếu một phần tử ở bất kỳ chỉ mục nào, bạn có thể sử dụng Array.prototype.slice và Array.prototype.concat với nhau theo cách này: arrayOfLetters.slice(0, n).concat(arrayOfLetters.slice(n+1)) ở đâu n là chỉ số của phần tử bạn muốn loại bỏ.
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
const halfBeforeTheUnwantedElement = arrayOfLetters.slice(0, 2)
const halfAfterTheUnwantedElement = arrayOfLetters(3);
const copyWithoutThirdElement = halfBeforeTheUnwantedElement.concat(halfAfterTheUnwantedElement);
// arrayOfLetters is unchanged
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(copyWithoutFifthElement) // ['a', 'b', 'd', 'e', 'f']Việc sử dụng này slice là một cách để kết hợp hai cách sử dụng trước đó.
Việc sử dụng đầu tiên của slice sẽ tạo một mảng từ đầu đến ngay trước phần tử bạn muốn xóa.
Công dụng thứ hai của slice tạo một mảng từ sau phần tử bạn muốn loại bỏ đến cuối mảng.
Hai mảng được nối với nhau bằng concat để tạo thành một mảng tương tự như mảng bắt đầu, nhưng không có phần tử cụ thể.
Xóa một phần tử có giá trị nhất định bằng filter
Nếu bạn muốn xóa một phần tử có giá trị nhất định, bạn có thể sử dụng Array.prototype.filter(). Hãy làm như vậy arrayOfLetters và tạo một bản sao mà không có d.
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
const arrayWithoutD = arrayOfLetters.filter(function (letter) {
return letter !== 'd';
});
// arrayOfLetters is unchanged
console.log(arrayOfLetters); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arrayWithoutD); // ['a', 'b', 'c', 'e', 'f']filter thực hiện một cuộc gọi lại và kiểm tra tất cả các phần tử của mảng bằng cuộc gọi lại đó. Nó giữ các phần tử mà cuộc gọi lại trả về true (hoặc một giá trị trung thực) và loại trừ các phần tử mà lệnh gọi lại trả về false (hoặc một giá trị giả).
Trong trường hợp này, cuộc gọi lại kiểm tra letter !== "d" vì vậy nó trở lại false cho bức thư d và true cho tất cả những người khác, dẫn đến một mảng không bao gồm chữ cái d.
Cuộc gọi lại đến filter được truyền ba đối số, theo thứ tự: chính phần tử đó, chỉ số của phần tử và toàn bộ mảng.
Bạn có thể tạo các điều kiện phức tạp hơn ví dụ này, phức tạp như bạn cần.
Loại bỏ một phần tử khỏi một mảng với một for vòng lặp và push
Phương pháp cuối cùng để loại bỏ một phần tử khỏi một mảng mà không làm thay đổi mảng ban đầu là sử dụng push phương pháp.
Với các bước đơn giản sau:
- Tạo một mảng trống
- Lặp qua mảng ban đầu
- Đẩy vào mảng trống các phần tử bạn muốn giữ lại
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
const arrayWithoutB = [];
for (let i = 0; i < arrayOfLetters.length; i++) {
if (arrayOfLetters[i] !== 'b') {
arrayWithoutH.push(arrayOfLetters[i]);
}
}
// arrayOfLetters is unchanged
console.log(arrayOfLetters); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arrayWithoutB); // ['a', 'c', 'd', 'e', 'f']tình trạng của if câu lệnh có thể kiểm tra cả chỉ mục (i) và giá trị của phần tử cho các câu lệnh phức tạp hơn.
Loại bỏ phần tử đầu tiên của một mảng bằng hàm hủy và toán tử còn lại
Phá hủy mảng và toán tử còn lại là hai khái niệm hơi khó hiểu.
Tôi đề xuất bài viết này đề cập đến cách hủy cấu trúc một mảng nếu bạn muốn tìm hiểu sâu hơn về chủ đề này.
Bạn có thể xóa phần tử đầu tiên bằng cách hủy – giả sử một mảng có tên arr – và tạo một mảng mới có tên newArr theo cách này: const [ , ...newarr] = arr;.
Bây giờ, hãy xem một ví dụ thực tế về cách sử dụng hàm hủy và toán tử còn lại.
const arrayOfFruits = ['olive', 'apricot', 'cherry', 'peach', 'plum', 'mango'];
const [ , ...arrayOfCulinaryFruits] = arrayOfFruits;
// arrayOfFruits is unchanged
console.log(arrayOfFruits); // ['olive', 'apricot', 'cherry', 'peach', 'plum', 'mango']
console.log(arrayOfCulinaryFruits); // ['apricot', 'cherry', 'peach', 'plum', 'mango']Đặt dấu phẩy trước toán tử còn lại nói để tránh phần tử đầu tiên trong mảng và tất cả các phần tử khác được sao chép trong arrayOfCulinaryFruits mảng.
Cách xóa phần tử khỏi mảng trong khi thay đổi mảng
Trong một số trường hợp, có thể thích hợp để thay đổi mảng ban đầu. Trong những trường hợp này, bạn cũng có thể sử dụng một trong các phương pháp đột biến sau.
Array.prototype.pop()Array.prototype.shift()Array.prototype.splice()
Xóa phần tử cuối cùng của một mảng bằng pop
Bạn có thể xóa mục cuối cùng của một mảng bằng Array.prototype.pop().
Nếu bạn có một mảng có tên arrnó trông giống như arr.pop().
const arrayOfNumbers = [1, 2, 3, 4];
const previousLastElementOfTheArray = arrayOfNumbers.pop();
console.log(arrayOfNumbers); // [1, 2, 3]
console.log(previousLastElementOfTheArray); // 4Các pop được sử dụng trên mảng và nó thay đổi mảng bằng cách xóa mục cuối cùng của mảng.
Các pop phương thức cũng trả về phần tử đã loại bỏ.
Xóa phần tử đầu tiên của một mảng bằng shift
Các shift phương pháp có thể được sử dụng trên một mảng để loại bỏ phần tử đầu tiên của một mảng.
Nếu bạn có một mảng có tên arr nó có thể được sử dụng theo cách này: arr.shift().
const arrayOfNumbers = [1, 2, 3, 4];
const previousFirstElementOfTheArray = arrayOfNumbers.shift();
console.log(arrayOfNumbers); // [2, 3, 4]
console.log(previousFirstElementOfTheArray); // 1Các shift phương thức loại bỏ mục đầu tiên của mảng.
Nó cũng trả về phần tử bị loại bỏ.
Xóa một phần tử tại bất kỳ chỉ mục nào với splice
Bạn có thể xóa phần tử tại bất kỳ chỉ mục nào bằng cách sử dụng splice phương pháp.
Nếu bạn có một mảng có tên arr nó có thể được sử dụng theo cách này để xóa một phần tử tại bất kỳ chỉ mục nào: arr.splice(n, 1)với n là chỉ số của phần tử cần loại bỏ.
const arrayOfNumbers = [1, 2, 3, 4];
const previousSecondElementOfTheArray = arrayOfNumbers.splice(1, 1);
console.log(arrayOfNumbers); // [1, 3, 4]
console.log(previousSecondElementOfTheArray); // [2]Các splice phương pháp có thể chấp nhận nhiều đối số.
Để xóa một phần tử tại bất kỳ chỉ mục nào, bạn cần cung cấp splice hai đối số: đối số đầu tiên là chỉ số của phần tử cần loại bỏ, đối số thứ hai là số phần tử cần loại bỏ.
Vì vậy, nếu bạn có một mảng có tên arrđể loại bỏ một phần tử ở chỉ số 4, cách sử dụng splice phương pháp sẽ là: arr.splice(4, 1).
Các splice sau đó trả về một mảng chứa các phần tử đã loại bỏ.
Phần kết luận
Có nhiều cách khác nhau để làm điều tương tự trong JavaScript.
Trong bài viết này, bạn đã học được chín phương pháp khác nhau để loại bỏ một phần tử khỏi mảng. Sáu trong số chúng không làm thay đổi mảng ban đầu và ba trong số chúng thì có.
Bạn có thể sẽ sử dụng tất cả chúng vào lúc này hay lúc khác, và có thể bạn sẽ học được nhiều phương pháp hơn nữa để làm điều tương tự.
Chúc vui vẻ!
