9+ cách để xóa một phần tử ra khỏi JavaScript Array

Bài viết được sự cho phép của tác giả Nguyễn Trần Chung

Mảng JavaScript cho phép bạn nhóm các giá trị và lặp lại chúng. Bạn có thể thêm và loại bỏ các phần tử mảng theo những cách khác nhau. Thật không may, không có một phương thức Array.remove đơn giản để loại bỏ phần tử nào đó ra khỏi mảng.

Vậy, làm thế nào để bạn xóa một phần tử khỏi mảng JavaScript?

Thay vì phương thức xóa, mảng JavaScript có nhiều cách bạn có thể xóa các giá trị mảng.

1. Xóa các phần tử ở cuối mảng Javascript

1.1 Dùng cách set lại độ dài của mảng

Các phần tử mảng JavaScript có thể được loại bỏ khỏi phần cuối của mảng bằng cách đặt thuộc tính độ dài thành giá trị nhỏ hơn giá trị hiện tại. Bất kỳ phần tử nào có chỉ số lớn hơn hoặc bằng độ dài mới sẽ bị xóa.

var ar = [1, 2, 3, 4, 5, 6];
ar.length = 4; // đặt độ dài để xóa bớt phần tử ở cuối
console.log( ar ); //  [1, 2, 3, 4]

1.2 Dùng pop()

Phương thức pop loại bỏ phần tử cuối cùng của mảng, trả về phần tử đó và cập nhật thuộc tính độ dài. Phương thức pop sửa đổi mảng mà nó được gọi, Điều này có nghĩa là nó không giống như cách trên mà phần tử cuối cùng được loại bỏ hoàn toàn và chiều dài mảng giảm đi.

var ar = [1, 2, 3, 4, 5, 6];
ar.pop(); // returns 6
console.log( ar ); // [1, 2, 3, 4, 5]

2. Xóa các phần tử ở đầu mảng Javascript

Làm thế nào để bạn loại bỏ phần tử đầu tiên của một mảng JavaScript?

Phương thức shift hoạt động giống như phương thức pop ngoại trừ việc loại bỏ phần tử đầu tiên của mảng JavaScript thay vì phần tử cuối cùng.

Không có tham số vì phương thức shift chỉ loại bỏ phần tử mảng đầu tiên. Khi phần tử được loại bỏ, các phần tử còn lại được chuyển xuống.

var ar = ['zero', 'one', 'two', 'three'];
ar.shift(); // returns "zero"
console.log( ar ); // ["one", "two", "three"]

Phương thức shift trả về phần tử đã bị xóa, cập nhật các chỉ mục của các phần tử còn lại và cập nhật thuộc tính độ dài. Nó sửa đổi mảng mà nó được gọi.

Nếu không có phần tử hoặc độ dài mảng bằng 0, phương thức trả về undefined.

Xem ngay các tin tuyển dụng Javascript mới nhất tại TopDev

3. Sử dụng Splice

Phương thức Splice có thể được sử dụng để thêm hoặc xóa các phần tử khỏi một mảng.

1. Đối số đầu tiên chỉ định vị trí bắt đầu thêm hoặc xóa các phần tử.
2. Đối số thứ hai chỉ định số lượng phần tử cần loại bỏ.
3. Các đối số thứ ba và tiếp theo là tùy chọn; họ chỉ định các phần tử được thêm vào mảng.

3.1 Xóa một mảng phần tử

Ở đây, mình sử dụng phương thức Splice để loại bỏ hai phần tử, bắt đầu từ vị trí ba (chỉ số dựa trên zero):

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = array.splice(2,2);

/*
removed === [3, 4]
array === [1, 2, 5, 6, 7, 8, 9, 0]
*/

3.2 Xóa phần tử bằng giá trị của nó

Tham số thứ nhất chỉ định vị trí bắt đầu, trường hợp hay gặp nhất đó là xóa một phần tử bằng giá trị của phần tử đó

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

for( var i = 0; i < array.length-1; i++){ 
   if ( array[i] === 5) {
     arr.splice(i, 1); 
   }
}

//=> [1, 2, 3, 4, 6, 7, 8, 9, 0]

Đây là một ví dụ đơn giản trong đó các phần tử là số nguyên. Nếu bạn có một mảng các đối tượng, bạn sẽ cần một skill nặng đô hơn.

Một cách khác, sử dụng indexOf

var ar = ['zero', 'one', 'two', 'three'];
ar.splice(ar.indexOf('one'), 1);
console.log( ar ); // ["zero", "two", "three"]

4. Sử dụng Array.filter xóa phần tử bằng giá trị

Không giống như phương thức splice(), filter() tạo ra một mảng mới. filter() không làm thay đổi mảng mà nó được gọi, nhưng trả về một mảng mới.

filter() có một tham số duy nhất, một phương thức gọi lại (callback function). Cuộc gọi lại được kích hoạt khi phương thức lọc lặp qua các phần tử mảng. Nó sẽ chuyển ba giá trị cho hàm gọi lại:

1. giá trị hiện tại hoặc phần tử
2. chỉ mục mảng hiện tại
3. và mảng đầy đủ.

Phương thức gọi lại sẽ trả về đúng hoặc sai. Bạn có trách nhiệm kiểm tra giá trị (phần tử) để xem nó có đáp ứng tiêu chí của bạn không. Nếu nó bạn có thể trả lại true. Các phần tử trả về true được thêm vào mảng mới được lọc.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

var filtered = array.filter(function(value, index, arr){
    return value > 5;
});

//kết quả filtered => [6, 7, 8, 9]
//mảng array vẫn giữ nguyên => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

Bạn nên lưu ý một mảng mới chứa các giá trị khớp với filter được trả về. Mảng ban đầu thì không bị ảnh hưởng. Mình thấy điều này hữu ích vì mình thường muốn giữ lại dữ liệu gốc, nhưng truy xuất các tập hợp con để xử lý các nhu cầu logic khác nhau.

5. Phương thức remove trong Lodash

Đôi khi các thư viện tiện ích là cách tốt nhất để giải quyết các vấn đề phức tạp hơn. Lodash cung cấp một tập hợp phong phú các phương thức thao tác mảng, trong đó có phương thức remove().

Phương thức remove() hoạt động giống như phương thức filter(), nhưng sắp xếp ngược lại. Nó không lưu các giá trị mảng ban đầu, nhưng loại bỏ các phần tử khớp với điều kiện. Và cuối cùng, nó trả về các phần tử phù hợp như là một mảng mới.

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 === 0;
});

console.log(array);
// => [1, 3]

console.log(evens);
// => [2, 4]

6. Tự tạo phương thức xóa

Như đã nói ở đầu bài viết, không có phương thức chuyển để xóa phần tử khỏi mảng kiểu như Array.remove(). Phương pháp Lodash giải quyết được vấn đề này, nhưng không phải lúc nào bạn cũng muốn sử dụng Lodash. Điều này không có nghĩa là bạn không thể tạo ra một phương thức tiện ích cho riêng mình.

function arrayRemove(arr, value) {
   return arr.filter(function(ele){
       return ele != value;
   });
}

var result = arrayRemove(array, 6);
// result = [1, 2, 3, 4, 5, 7, 8, 9, 0]

Ví dụ trên chỉ đơn giản, bạn có thể sửa đổi cho phù hợp với nhu cầu của bạn, nhưng có lẽ filter() vẫn là ổn nhất

7. Loại bỏ chính xác phần tử bằng toán tử delete

Bạn có thể xóa các thành phần mảng cụ thể bằng cách sử dụng toán tử delete:

var ar = [1, 2, 3, 4, 5, 6];
delete ar[4]; // xóa phần tử có chỉ số index là 4
console.log( ar ); // [1, 2, 3, 4, undefined, 6]
alert( ar ); // 1,2,3,4,,6

Sử dụng toán tử delete không ảnh hưởng đến thuộc tính độ dài. Nó cũng không ảnh hưởng đến các chỉ số của các element tiếp theo. Mảng trở nên thưa thớt, đó là một cách thú vị để nói rằng mục bị xóa không bị xóa mà trở nên không xác định. So sánh cách sử dụng delete với phương thức splice() được mô tả dưới đây.

Toán tử delete được thiết kế để xóa các thuộc tính khỏi các đối tượng JavaScript, mà các mảng là các đối tượng.

Lý do phần tử không thực sự bị xóa khỏi mảng là toán tử delete liên quan đến giải phóng bộ nhớ hơn là xóa một phần tử. Bộ nhớ được giải phóng khi không còn tham chiếu đến giá trị.

Bài viết gốc được đăng tải tại chungnguyen.xyz

Xem thêm các vị trí tuyển dụng IT hấp dẫn tại TopDev