Tổng hợp các phương pháp xóa một hoặc một số phần tử trong mảng bằng JavaScript

Trong bài viết này, biên tập viên chia sẻ với các bạn một số phương pháp xóa một hoặc nhiều phần tử trong mảng JS, những ai quan tâm có thể học thử.

1: Phương pháp splice trong JS

splice(index,len,[item]) Chú thích: Phương pháp này thay đổi mảng gốc.

splice có 3 tham số, nó có thể được dùng để thay thế / xóa / thêm một hoặc một vài giá trị trong mảng.

• index: chỉ số bắt đầu trong mảng

• len: độ dài cần thay thế / xóa

• item: giá trị thay thế, nếu là thao tác xóa thì item để trống

Ví dụ: arr = ['a','b','c','d']

Xóa —- item không được thiết lập

arr.splice(1,1) //['a','c','d'] Xóa phần tử bắt đầu từ chỉ số 1, độ dài 1, nếu `len` đặt là 0 thì mảng không thay đổi

arr.splice(1,2) //['a','d'] Xóa phần tử bắt đầu từ chỉ số 1, độ dài 2

Thay thế —- item là giá trị thay thế

arr.splice(1,1,'ttt') //['a','ttt','c','d'] Thay thế phần tử tại chỉ số 1, độ dài 1 bằng 'ttt'

arr.splice(1,2,'ttt') //['a','ttt','d'] Thay thế 2 phần tử bắt đầu từ chỉ số 1 bằng 'ttt'

Thêm —- len đặt là 0, item là giá trị được thêm vào

arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] Thêm một phần tử 'ttt' tại chỉ số 1

Xem ra dùng splice vẫn là tiện nhất.

2: delete
Khi dùng delete để xóa phần tử trong mảng, giá trị tại chỉ số đó sẽ được đặt thành undefined, độ dài của mảng không thay đổi.

Ví dụ:

delete arr[1] //['a', ,'c','d'] giữa sẽ xuất hiện hai dấu phẩy, độ dài mảng không đổi, có một phần tử là `undefined`

JS – Một vài phương pháp xóa phần tử trong mảng

var arr=['a','b','c'];

Nếu muốn xóa phần tử 'b', có hai cách:

1. Phương pháp delete: delete arr[1]

Cách này không thay đổi độ dài mảng, arr[1] lúc này trở thành undefined, nhưng có ưu điểm là chỉ số ban đầu của mảng được giữ nguyên, khi duyệt mảng có thể dùng:

for(index in arr)
{
　　 document.write('arr['+index+']='+arr[index]);
}

Cách duyệt này sẽ bỏ qua các phần tử undefined

• Cách này được hỗ trợ từ IE4.0 trở lên

2. Phương pháp splice của đối tượng mảng: arr.splice(1,1);

Cách này sẽ làm thay đổi độ dài của mảng, đồng thời các chỉ số của mảng cũng sẽ thay đổi theo.

Tham số thứ nhất 1 trong splice là chỉ số bắt đầu xóa (bắt đầu từ 0), ở đây là phần tử thứ hai trong mảng

Tham số thứ hai 1 là số lượng phần tử cần xóa, ở đây chỉ xóa một phần tử, chính là 'b'

Lúc này có thể dùng cách duyệt mảng thông thường như for, vì phần tử đã bị xóa sẽ không còn trong mảng

• Phương pháp này chỉ được hỗ trợ từ IE5.5 trở lên

Cần nhấn mạnh rằng splice không chỉ có thể xóa phần tử trong mảng, mà còn có thể thêm mới phần tử vào mảng

Ví dụ: arr.splice(1,1,'d','e'), hai phần tử d, e sẽ được thêm vào mảng arr

Kết quả mảng sẽ trở thành: arr:'a','d','e','c'

 

Bài viết bổ sung:

JavaScript thông qua việc thiết lập thuộc tính length của mảng là cách duy nhất để rút ngắn độ dài của mảng. Nếu dùng toán tử delete để xóa phần tử trong mảng, tuy phần tử đó trở thành undefined, nhưng thuộc tính length của mảng không thay đổi. Có hai cách xóa phần tử và thay đổi độ dài của mảng.

/*
 * Phương pháp: Array.remove(dx)
 * Chức năng: Xóa phần tử trong mảng
 * Tham số: dx là chỉ số phần tử cần xóa
 * Trả về: Thay đổi trực tiếp trên mảng gốc
 */

// Thường dùng là thông qua duyệt mảng, tái cấu trúc lại mảng.
Array.prototype.remove=function(dx)
{
　　if(isNaN(dx)||dx>this.length){return false;}
　　for(var i=0,n=0;i<this.length;i++)
　　{
　　　　if(this[i]!=this[dx])
　　　　{
　　　　　　this[n++]=this[i]
　　　　}
　　}
　　this.length-=1
}

a = ['1','2','3','4','5'];
alert("elements: "+a+"nLength: "+a.length);
a.remove(0); // Xóa phần tử có chỉ số là 0
alert("elements: "+a+"nLength: "+a.length);

/*
 * Phương pháp: Array.baoremove(dx)
 * Chức năng: Xóa phần tử trong mảng
 * Tham số: dx là chỉ số phần tử cần xóa
 * Trả về: Thay đổi trực tiếp trên mảng gốc
 */

// Chúng ta cũng có thể dùng splice để thực hiện
Array.prototype.baoremove = function(dx)
{
　　if(isNaN(dx)||dx>this.length){return false;}
　　this.splice(dx,1);
}

b = ['1','2','3','4','5'];
alert("elements: "+b+"nLength: "+b.length);
b.baoremove(1); // Xóa phần tử có chỉ số là 1
alert("elements: "+b+"nLength: "+b.length);

Chúng ta biết rằng, trong IE5 hoặc các phiên bản thấp hơn, đối tượng Array (mảng) của JavaScript không cung cấp sẵn phương pháp xóa phần tử trong mảng. Trong IE5.5+ tuy có phương pháp splice, nhưng thực ra không xóa triệt để một (hoặc vài) phần tử, mà chỉ là làm rỗng giá trị của phần tử đó, nói cách khác phần tử đó vẫn tồn tại, độ dài mảng không thay đổi.

Thực tế, chúng ta có thể tự thêm một phương pháp xóa phần tử cho mảng (lưu ý: ở đây là thực sự xóa phần tử khỏi mảng). Có thể bạn sẽ nghĩ đến dùng vòng lặp để gán lại giá trị cho mảng, cách đó tuy được nhưng hiệu suất không cao.

Sau đây là cách dùng hai phương pháp slice, concat của đối tượng Array để tự định nghĩa phương pháp xóa phần tử mảng.

Mã cụ thể như sau, chú ý phần chú thích trong đó:

Array.prototype.del=function(n) { // n biểu thị phần tử thứ mấy, bắt đầu từ 0
// prototype là nguyên mẫu của đối tượng, lưu ý đây là cách thêm phương pháp tùy chỉnh cho đối tượng
　if(n<0)　// Nếu n < 0 thì không làm gì cả
　　return this;
　else
　　return this.slice(0,n).concat(this.slice(n+1,this.length));
　　/*
　　　Phương pháp concat: Trả về một mảng mới, là sự kết hợp của hai hoặc nhiều mảng
　　　　　　　　　Ở đây trả về this.slice(0,n) / this.slice(n+1,this.length)
　　　　　　　　　Kết quả là một mảng mới thiếu phần tử thứ n
　　　Phương pháp slice: Trả về một đoạn của mảng, hai tham số xác định vị trí bắt đầu và kết thúc
　　*/
}

// Thử phương pháp tự thêm này
var test=new Array(0,1,2,3,4,5);
test=test.del(3);　// Bắt đầu từ 0, tức là xóa phần tử thứ 4
alert(test);