Các phương thức xử lý mảng (Array) phổ biến trong JavaScript

Giới thiệu về mảng trong javaScript

Mảng (Array) là một trong những kiểu dữ liệu cơ bản trong JavaScript, được sử dụng để lưu trữ và quản lý một tập hợp các giá trị có cùng kiểu dữ liệu. Mảng trong JavaScript là một danh sách đánh số, các phần tử của mảng được xác định bằng một chỉ số số nguyên không âm, bắt đầu từ 0.

Mảng trong JavaScript có thể chứa các kiểu dữ liệu khác nhau, bao gồm số nguyên, số thực, chuỗi ký tự, đối tượng, hàm, và thậm chí là một mảng khác. Mảng trong JavaScript là một đối tượng (Object), nó cung cấp cho chúng ta các phương thức để thêm, xóa, sắp xếp và tìm kiếm các phần tử trong mảng.

Một số phương thức, các hàm sử lí mảng phổ biến của mảng trong JavaScript bao gồm:

  • push(): Thêm một phần tử vào cuối mảng.
  • pop(): Xóa phần tử cuối cùng của mảng.
  • unshift(): Thêm một phần tử vào đầu mảng.
  • shift(): Xóa phần tử đầu tiên của mảng.
  • splice(): Thêm hoặc xóa phần tử của mảng từ vị trí chỉ định.
  • slice(): Trích xuất một phần của mảng thành một mảng mới.
  • sort(): Sắp xếp các phần tử của mảng theo thứ tự tăng dần.

Việc sử dụng mảng trong JavaScript là rất phổ biến trong lập trình web, đặc biệt là khi xử lý dữ liệu và hiển thị dữ liệu động lên giao diện người dùng. Việc hiểu và sử dụng mảng hiệu quả sẽ giúp cho việc lập trình của bạn trở nên dễ dàng và tiện lợi hơn.

1.Method Push

Phương thức push() là một trong những phương thức quan trọng của mảng trong JavaScript. Phương thức này được sử dụng để thêm một hoặc nhiều phần tử mới vào cuối mảng.

Cú pháp của phương thức push() như sau:

				
					arr.push(element1, element2, ..., elementN)

				
			

Ở đó, arr là mảng cần thêm phần tử, element1, element2, …, elementN là các phần tử mới cần thêm vào mảng.

Phương thức push() sẽ trả về độ dài mới của mảng sau khi đã thêm phần tử mới.

Ví dụ:

				
					let numbers = [1, 2, 3, 4];
numbers.push(5);
console.log(numbers); // output numbers=  [1, 2, 3, 4, 5]

				
			

Trong ví dụ này, chúng ta đã thêm phần tử 5 vào cuối mảng numbers bằng cách sử dụng phương thức push(). Kết quả là mảng numbers sẽ bao gồm các phần tử là 1, 2, 3, 4 và 5.

Phương thức push() cũng có thể được sử dụng để thêm nhiều phần tử cùng lúc vào cuối mảng bằng cách khi ta push mỗi phần tử của chúng ta cách nhau bởi dấu , :

ví dụ:

				
					let fruits = ['apple', 'banana'];
fruits.push('orange', 'grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

				
			

Ở đây, chúng ta đã thêm hai phần tử mới vào mảng fruits bằng cách sử dụng phương thức push(). Kết quả là mảng fruits sẽ bao gồm các phần tử là ‘apple’, ‘banana’, ‘orange’ và ‘grape’.

2.Method Pop

Method “pop” là một trong những phương thức phổ biến của mảng trong JavaScript. Nó được sử dụng để loại bỏ phần tử cuối cùng của mảng và trả về giá trị của phần tử đó.

Việc sử dụng phương thức “pop” là rất đơn giản. Bạn chỉ cần gọi phương thức này trên một mảng và nó sẽ trả về phần tử cuối cùng của mảng. Đồng thời, phương thức này cũng sẽ xóa phần tử cuối cùng đó khỏi mảng.

Ví dụ,giả sử chúng ta  có một mảng chứa tên của các loài động vật như sau:

				
					const dongVat = ['cat', 'dog', 'fish', 'bird'];
				
			

Chúng ta có thể sử dụng phương thức “pop” để loại bỏ phần tử cuối cùng (tức là ‘bird’) khỏi mảng và trả về giá trị của nó như sau:

				
					const dongVatCuoiCung = animals.pop();

console.log(dongVatCuoiCung); // 'bird'

console.log(dongVat); // ['cat', 'dog', 'fish']

				
			

Như bạn có thể thấy, phương thức “pop” đã xóa phần tử ‘bird’ khỏi mảng và trả về giá trị của nó trong biến “lastAnimal”. Mảng “animals” giờ đây chỉ còn lại ba phần tử ‘cat’, ‘dog’ và ‘fish’.

3.Method Unshift

Phương thức unshift() là một trong những phương thức cơ bản của mảng trong JavaScript, được sử dụng để thêm một hoặc nhiều phần tử vào đầu mảng. Khi sử dụng phương thức unshift(), các phần tử đã có trong mảng sẽ được dịch về phía sau để làm chỗ cho phần tử mới được thêm vào đầu mảng.

Cú pháp của phương thức unshift() như sau:

				
					array.unshift(element1, element2, ..., elementN)

				
			

Trong đó:

  • array là mảng được thêm phần tử.
  • element1, element2, …, elementN là các phần tử mới sẽ được thêm vào đầu mảng.

Phương thức unshift() sẽ trả về độ dài mới của mảng sau khi đã thêm các phần tử mới.

Ví dụ về việc sử dụng phương thức unshift()

				
					let fruits = ['apple', 'banana', 'orange'];

fruits.unshift('pear', 'grape');

console.log(fruits);
// Kết quả: ['pear', 'grape', 'apple', 'banana', 'orange']

				
			

Trong ví dụ trên, chúng ta đã sử dụng phương thức unshift() để thêm hai phần tử mới (‘pear’ và ‘grape’) vào đầu mảng fruits. Kết quả trả về sau khi sử dụng phương thức unshift() là một mảng mới gồm các phần tử (‘pear’, ‘grape’, ‘apple’, ‘banana’, ‘orange’).

4.Method Shift

Trong JavaScript, phương thức shift() được sử dụng để xóa phần tử đầu tiên của một mảng và trả về giá trị của phần tử đó.

Cú pháp của phương thức shift() như sau:

				
					array.shift()

				
			

Ở đây, “array” là tên của mảng mà chúng ta muốn xóa phần tử đầu tiên.

Khi phương thức shift() được gọi, nó sẽ xóa phần tử đầu tiên của mảng và trả về giá trị của phần tử đó. Sau khi phương thức shift() được thực hiện, tất cả các phần tử khác trong mảng sẽ được dịch chuyển sang trái để điền vào khoảng trống được tạo ra bởi phần tử bị xóa.

Ví dụ:

				
					let hoaQua = ['apple', 'banana', 'orange'];

let phanTudauTienBiXoa = fruits.shift();

console.log(hoaQua); // ["banana", "orange"]
console.log(phanTudauTienBiXoa); // "apple"

				
			

Trong ví dụ trên, phương thức shift() đã xóa phần tử “apple” khỏi mảng fruits và trả về giá trị của phần tử đó là “apple”. Sau đó, các phần tử còn lại trong mảng đã được dịch chuyển sang trái để điền vào khoảng trống được tạo ra bởi phần tử bị xóa.

Phương thức shift() thường được sử dụng để xử lý dữ liệu trong mảng, ví dụ như khi chúng ta muốn xóa phần tử đầu tiên trong mảng hoặc lấy giá trị của phần tử đầu tiên trong mảng. Việc hiểu và sử dụng phương thức shift() sẽ giúp cho việc lập trình của bạn trở nên dễ dàng và tiện lợi hơn

5.Method Splice

Trong JavaScript, phương thức splice() được sử dụng để thêm hoặc xóa phần tử của một mảng. Phương thức này có thể thay đổi kích thước của mảng và trả về một mảng chứa các phần tử đã bị xóa.

Cú pháp của phương thức splice() như sau:

				
					array.splice(start, deleteCount, item1, item2, ...)

				
			

Trong đó:

  • start: Vị trí bắt đầu thêm hoặc xóa phần tử. Nếu start là số âm, nó sẽ được tính từ cuối mảng. Nếu start vượt quá kích thước của mảng, phương thức splice() sẽ không thay đổi mảng.
  • deleteCount: Số lượng phần tử sẽ bị xóa. Nếu deleteCount là 0, phương thức splice() chỉ thêm các phần tử mới vào mảng. Nếu deleteCount được bỏ qua hoặc lớn hơn số phần tử còn lại trong mảng bắt đầu từ start, phương thức splice() sẽ xóa tất cả các phần tử từ vị trí start đến cuối mảng.
  • item1, item2, …: Các phần tử sẽ được thêm vào mảng. Nếu không có phần tử nào được chỉ định, phương thức splice() sẽ chỉ xóa các phần tử từ vị trí start đến cuối mảng.

Phương thức splice() sẽ trả về một mảng mới chứa các phần tử bị xóa. Nếu không có phần tử nào bị xóa, phương thức splice() sẽ trả về một mảng trống.

Ví dụ:

				
					const fruits = ['apple', 'banana', 'cherry', 'kiwi'];

// Xóa phần tử 'banana' từ vị trí thứ 1 của mảng
const removedFruits = fruits.splice(1, 1);
console.log(fruits); // ['apple', 'cherry', 'kiwi']
console.log(removedFruits); // ['banana']

// Thêm phần tử 'lemon' và 'orange' vào vị trí thứ 2 của mảng
fruits.splice(2, 0, 'lemon', 'orange');
console.log(fruits); // ['apple', 'cherry', 'lemon', 'orange', 'kiwi']

				
			

Trong ví dụ trên, phương thức splice() được sử dụng để xóa phần tử ‘banana’ và thêm phần tử ‘lemon’ và ‘orange’ vào mảng. Kết quả sau khi sử dụng phương thức splice() là mảng fruits đã được thay đổi.

6.Method Sort

Phương thức sort() trong JavaScript là một phương thức dùng để sắp xếp các phần tử của một mảng theo thứ tự tăng dần hoặc giảm dần. Phương thức này được tích hợp sẵn trong đối tượng Array của JavaScript, do đó ta có thể dễ dàng sử dụng nó trên mảng mà mình muốn sắp xếp.

Ví dụ, nếu chúng ta muốn sắp xếp một mảng chứa các số nguyên theo thứ tự tăng dần, ta có thể sử dụng phương thức sort() như sau:

				
					let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

				
			

Trong đoạn mã trên, chúng ta đầu tiên khai báo một mảng numbers chứa các số nguyên không theo thứ tự tăng dần. Tiếp theo, ta sử dụng phương thức sort() để sắp xếp các phần tử của mảng numbers theo thứ tự tăng dần bằng cách truyền một hàm so sánh vào phương thức sort(). Hàm so sánh này nhận vào hai tham số ab, và trả về giá trị âm nếu a nhỏ hơn b, giá trị dương nếu a lớn hơn b, hoặc trả về 0 nếu a bằng b.

Ở đoạn mã trên, hàm so sánh sẽ trả về giá trị âm nếu a nhỏ hơn b, và giá trị dương nếu a lớn hơn b. Do đó, khi phương thức sort() được gọi, các phần tử của mảng numbers sẽ được sắp xếp theo thứ tự tăng dần. Kết quả của mảng được in ra bằng lệnh console.log().

Ngoài ra, nếu muốn sắp xếp một mảng theo thứ tự giảm dần, ta có thể sử dụng hàm so sánh như sau:

				
					let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return b - a;
});
console.log(numbers); // Output: [9, 6, 5, 5, 5, 4, 3, 3, 2, 1,

				
			

Leave a Reply

Your email address will not be published. Required fields are marked *