Xóa phần tử trong mảng JavaScript | Laptrinhcanban.com

Xóa phần tử trong mảng JavaScript

Hướng dẫn tất cả các cách xóa phần tử trong mảng JavaScript. Bạn sẽ học được cách sử dụng length, phương thức shift() và upop() để xóa phần tử trong mảng JavaScript trong bài học này.

Chúng ta có 6 phương pháp để xóa phần tử trong mảng JavaScript như sau:

  • Phương thức shift(): lấy và xóa phần tử đầu tiên của mảng
  • Phương thức pop(): lấy và xóa phần tử cuối cùng của mảng
  • Phương thức splice(): xóa phần tử trong phạm vi chỉ định
  • Thuộc tính length: xóa phần tử trong mảng từ cuối chuỗi cho đủ độ dài
  • Xóa toàn bộ phần tử trong mảng JavaScript
  • Xóa phần tử trong mảng JavaScript theo điều kiện

Xóa phần tử đầu tiên của mảng JavaScript | phương thức shift()

shift() là một phương thức của đối tượng mảng trong JavaScript, có tác dụng lấy ra phần tử đầu tiên của mảng và qua đó xóa phần tử này khỏi mảng ban đầu. Phép xóa này sẽ làm thay đổi mảng ban đầu.

Phương thức shift() trong JavaScript

Chúng ta sử dụng phương thức shift() trong JavaScript với cú pháp như sau.

org_array.shift()

Phương thức shift() sẽ trả về giá trị là phần tử đầu tiên được lấy ra dưới dạng chuỗi. Và trong mảng ban đầu thì phần tử này sẽ được xóa đi.

Ví dụ cụ thể:

let myarray = ['red', 'blue', 'yellow', 'black'];
myarray.shift();

console.log(myarray);
//>[ 'blue', 'yellow', 'black' ]

Và chúng ta cũng có thể sử dụng giá trị đầu tiên trong mảng vừa được lấy ra bởi shift() bằng cách gán nó vào một biến để sử dụng như sau:

let myarray = ['red', 'blue', 'yellow', 'black'];
shifted = myarray.shift();
console.log(shifted); //>red

console.log(myarray);
//>[ 'blue', 'yellow', 'black' ]

Lưu ý là nếu mảng ban đầu là một mảng trống thì kết quả trả về của shift() sẽ là undefined. Ví dụ:

let myarray = new Array(3);
console.log(myarray); //>[ <3 empty items> ]

shifted = myarray.shift();
console.log(shifted); //>undefined

Xóa phần tử cuối cùng của mảng JavaScript | phương thức pop()

pop() là một phương thức của đối tượng mảng trong JavaScript, có tác dụng lấy ra phần tử cuối cùng của mảng và qua đó xóa phần tử này khỏi mảng ban đầu. Phép xóa này sẽ làm thay đổi mảng ban đầu.

Phương thức pop() trong JavaScript

Chúng ta sử dụng phương thức pop() trong JavaScript với cú pháp như sau.

org_array.pop()

Phương thức pop() sẽ trả về giá trị là phần tử cuối cùng được lấy ra dưới dạng chuỗi. Và trong mảng ban đầu thì phần tử này sẽ được xóa đi.

Ví dụ cụ thể:

let myarray = ['red', 'blue', 'yellow', 'black'];
myarray.pop();

console.log(myarray);
//>['red', 'yellow', 'black']

Và chúng ta cũng có thể sử dụng giá trị cuối cùng trong mảng vừa được lấy ra bởi pop() bằng cách gán nó vào một biến để sử dụng như sau:

let myarray = ['red', 'blue', 'yellow', 'black'];
popped = myarray.pop();
console.log(popped); //>black

console.log(myarray);
//>['red', 'yellow', 'black']

Lưu ý là nếu mảng ban đầu là một mảng trống thì kết quả trả về của pop() sẽ là undefined. Ví dụ:

let myarray = new Array(3);
console.log(myarray); //>[ <3 empty items> ]

popped = myarray.pop();
console.log(popped); //>undefined

Xóa phần tử trong phạm vi chỉ định trong mảng JavaScript| phương thức splice()

Phương thức splice() trong JavaScript vốn được sử dụng để lấy các phần tử trong một phạm vi trong mảng và sau đó sẽ thay thế phạm vi này bằng các giá trị mới. Tuy nhiên nếu chúng ta lược bỏ đi các giá trị thay thế thì phương thức splice() sẽ có tác xóa phần tử trong phạm vi chỉ định trong mảng JavaScript.

Phạm vi xóa sẽ được xác định bằng hai đối số trong splice() là vị trí index bắt đầu xóasố phần tử được xóa tính từ index chỉ định. Và chúng ta sẽ sử dụng phương thức splice() lúc này với cú pháp sau đây:

org_array.splice(index, num)

Trong đó:

  • org_array là mảng ban đầu
  • index là vị trí bắt đầu xóa
  • num là số phần tử cần xóa tính từ index.

Tương tự như với pop() và shift() thì phương thức splice() cũng trả về giá trị là các phần tử được lấy ra. Và trong mảng ban đầu thì các phần tử này sẽ được xóa đi. Tuy nhiên các phần tử lấy ra sẽ dưới dạng một mảng chứ không phải là dạng chuỗi như hai phương thức trên.

Ví dụ cụ thể:

let myarray = ['red', 'blue', 'yellow', 'black'];
myarray.splice(1,3);

console.log(myarray);
//>[ 'red' ]

Và chúng ta cũng có thể sử dụng giá trị cuối cùng trong mảng vừa được lấy ra bởi splice() bằng cách gán nó vào một biến để sử dụng như sau:

let myarray = ['red', 'blue', 'yellow', 'black'];
popped = myarray.splice(1,3);
console.log(popped); //>[ 'blue', 'yellow', 'black' ]

console.log(myarray);
//>[ 'red' ]

Cũng do kết quả trả về của splice() là một mảng nên nếu mảng ban đầu là một mảng trống thì kết quả trả về của splice() không phải là undefined mà là một mảng trống được lấy ra. Ví dụ:

let myarray = new Array(3);
console.log(myarray); //>[ <3 empty items> ]

//và khi sử dụng for nguyên thủy =]
popped = myarray.splice(1,2);
console.log(popped); //>[ <2 empty items> ]

Xóa phần tử trong mảng từ cuối chuỗi cho đủ độ dài | length

Trong bài trước chúng ta đã biết thuộc tính length trong đối tượng Array sẽ cho trả về độ dài của mảng (giá trị index cuối cùng + 1 đơn vị). Và chúng ta cũng có thể gán giá trị mới cho thuộc tính length để có thể làm tăng hoặc giảm độ dài của mảng.

Và trong trường hợp gán một giá trị nhỏ hơn giá trị ban đầu của thuộc tính length, chúng ta có thể xóa đi phần tử trong mảng từ cuối chuỗi cho tới khi mảng đạt độ dài chỉ định như ví dụ sau đây:

let myarray = ['a', 'b', 'c', 'd', 'e'];
console.log(myarray);
//>[ 'a', 'b', 'c', 'd', 'e' ]

myarray.length = 4;
console.log(myarray);
//>[ 'a', 'b', 'c', 'd' ]

myarray.length = 1;
console.log(myarray);
//>[ 'a' ]

Xóa toàn bộ phần tử trong mảng JavaScript

Xóa toàn bộ phần tử trong mảng JavaScript bằng length

Bằng cách gán giá trị 0 cho thuộc tính length của mảng và làm rỗng nó, chúng ta có thể xóa toàn bộ phần tử trong mảng JavaScript.

Ví dụ cụ thể:

let myarray = ['a', 'b', 'c', 'd', 'e'];
console.log(myarray);
//>[ 'a', 'b', 'c', 'd', 'e' ]

myarray.length = 0;
console.log(myarray);
//> []

Xóa toàn bộ phần tử trong mảng JavaScript bằng cách gán mảng rỗng

Bằng cách gán một mảng rỗng vào mảng chỉ định, chúng ta có thể xóa toàn bộ phần tử trong mảng JavaScript đó.

Ví dụ cụ thể:

let myarray = ['a', 'b', 'c', 'd', 'e'];
console.log(myarray);
//>[ 'a', 'b', 'c', 'd', 'e' ]

myarray.length = [];
console.log(myarray);
//> []

Xóa phần tử trong mảng JavaScript theo điều kiện | phương thức filter()

Phương thức filter() trong JavaScript có tác dụng lấy các phần tử theo điều kiện từ trong mảng ban đầu dưới dạng một mảng mới.

Khi sử dụng filter(), chỉ có các phần tử phù hợp điều kiện mới được lấy, còn các phần tử không phù hợp điều kiện sẽ không được bao gồm trong kết quả.
Bằng cách lấy các phần tử cần thiết ra từ mảng ban đầu và tạo ra một mảng mới, chúng ta có thể hoàn thành được việc xóa phần tử trong mảng JavaScript theo điều kiện.

Lưu ý ở đây là mặc dù nói là xóa phần tử, nhưng thực tế là chúng ta không làm thay đổi chuỗi ban đầu mà là tạo ra chuỗi mới chứa kết quả phép xóa phần tử trong mảng JavaScript theo điều kiện mà thôi.

Hãy cùng xem các ví dụ cụ thể sau đây:

Ví dụ 1: Xóa toàn bộ phần tử chỉ định trong mảng JavaScript

let myarray = ['a', 'b', 'c', 'd', 'e','a', 'b'];
let filterResult = myarray.filter(function(element){
return element !== 'a';
});
console.log(filterResult);
//>[ 'b', 'c', 'd', 'e', 'b' ]

Ví dụ 1: Xóa toàn bộ các số lớn hơn 3 trong mảng JavaScript

let myarray = [1, 2, 3, 4, 5, 6];
let filterResult = myarray.filter(function(element){
return element <= 3;
});
console.log(filterResult);
//>[ 1, 2, 3 ]

Xóa phần tử trùng nhau trong mảng JavaScript | hàm set() JavaScript

Chúng ta có rất nhiều phương pháp để xóa phần tử trùng nhau trong mảng JavaScript, tiêu biểu là cách sử dụng hàm set() của đối tượng Set trong Javascript như ví dụ sau đây:

const myarray = [1, 2, 3, 1, 4, 3, 1, 3, 2, 4];
const unique_array = Array.from(new Set(myarray))
console.log(unique_array); //> [ 1, 2, 3, 4 ]

Chi tiết về cách xóa phần tử trùng nhau trong mảng JavaScript bằng hàm set() cũng như các phương pháp khác sẽ được Kiyoshi giới thiệu trong bài viết tiếp theo.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn tất cả các cách xóa phần tử trong mảng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.