Tổng hợp các hàm xử lý mảng hay dùng trong Javascript

Mảng là một trong những khái niệm quan trọng trong việc lưu trữ và xử lý dữ liệu. Biết vận dụng các kiến thức về mảng đặc biệt là nắm rõ cơ chế hoạt động của các hàm xử lý mảng sẽ giúp bạn xử lý dữ liệu phức tạp một cách dễ ràng và nhanh chóng hơn rất nhiều. Nhận định này luôn đúng ở hầu hết các ngôn ngữ hiện nay trong đó có Javascript.

Mỗi ngôn ngữ khác nhau sẽ có những cách đặt tên khác nhau cho các hàm xử lý mảng của mình. Tuy nhiên, về bản chất là giống nhau.

Bài viết này mình sẽ cũng các bạn tìm hiểu về những hàm xử lý mảng quan trọng trong Javascript, từ đó giúp các bạn ứng dụng vào công việc hàng ngày của mình.

1. pop()

Phương thức này cho phép xóa phần tử cuối cùng trong mảng và kết quả trả về là phần tử vừa được xóa. Các bạn có thể xem chi tiết ví dụ dưới đây để hiểu hơn về pop trong Javascript

let fruits = ["Bananas", "Mangos", "Apples", "Cherries", "Pineapples"];

fruits.pop();

Kết quả: "Pineapples" //output 

Sau khi xóa xong mảng fruits còn lại

["Bananas", "Mangos", "Apples", "Cherries"] //output

2. push()

Phương thức push() cho phép thêm mới 1 phần tử vào vị trí cuối cùng của mảng. Giá trị thêm vào có thể là chuỗi, số, array hoặc object. Sau khi push thành công nó sẽ trả về tổng số phần tử của mảng.

let fruits = ["Bananas", "Mangos", "Apples", "Cherries"]
fruits.push("Grapes");
Trả về: 5 //output

Dữ liệu của mảng sau khi thêm mới phần tử

["Bananas", "Mangos", "Apples", "Cherries", "Grapes"]

3. unshift()

Phương thức unshift() cho phép thêm mới 1 phần tử vào vị trí đầu tiên của mảng. Giá trị thêm vào có thể là chuỗi, số, array hoặc object. Sau khi push thành công nó sẽ trả về tổng số phần tử của mảng.

let fruits = ["Bananas", "Mangos", "Apples", "Cherries"]
fruits.unshift("test");
Trả về: 5 //output

Dữ liệu của mảng sau khi thêm mới phần tử

["test", "Bananas", "Mangos", "Apples", "Cherries"]

4. shift()

Phương thức shift() cũng tương tự như pop() đều được dùng để xóa một phần từ trong mảng, tuy nhiên đối với shift() nó xóa phần tử đầu tiên còn pop() thì xóa phần tử cuối cùng

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries", "Pineapples"]
fruits.shift()

Dữ liệu của mảng sau khi xóa

["Bananas", "Mangos", "Apples", "Cherries"]

5. slice()

Phương thức này cho phép tách các phần từ trong mảng thành một mảng mới. Các phần tử được tách từ vị trí bắt đầu và kết thúc mà mình truyền vào. Trong mảng thứ tự sẽ được đánh từ 0 đến N (Cái này gọi là index của mảng)

Chúng ta cùng tìm hiểu ví dụ sau để hiểu hơn về phương thức này

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries"]
fruits.slice(2, 4)

Kết quả ["Mangos", "Apples"] //output

Nhìn vào kết quả trên các bạn thấy phần tử được tách nằm ở ví trí số 2 đến 4 tương đương với 2 giá trị là Mangos và Apples

6. splice()

Phương thức này tương tự phương thức thức slice(). Dùng để xóa phần tử trong mảng, phương thức này có 2 cách sử dụng

* Xóa và thay thế phần tử đã xóa

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries"]
fruits.splice(2,1,"Oranges")

Kết quả: ["Mangos", "Bananas", "Oranges", "Apples", "Cherries"]

* Xóa luôn

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries"]
fruits.splice(2,1)

Kết quả: ["Mangos", "Bananas", "Apples", "Cherries"]

7. reverse()

Phương thức này cho phép sắp xếp thứ tự các phần tử của mảng bằng cách đảo ngược vị trí hiện tại

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries"]
fruits.reverse()
Kết quả:
["Cherries", "Apples", "Mangos", "Bananas", "Mangos"]

8. sort()

Phương thức này cho phép bạn sắp xếp các giá trị trong mảng theo thứ tự alphabet

let fruits = ["Mangos", "Bananas", "Mangos", "Apples", "Cherries"]
fruits.sort()

Kết quả:
["Apples", "Bananas", "Cherries", "Mangos", "Mangos"]

9. concat()

Phương thức concat() cho phép gộp phần tử của 2 hay nhiều mảng khác nhau

let a = ['HTML', 'CSS']
let b = ['Javascript']
let c = ['PHP']
a.concat(b, c)

Kết quả:
["HTML", "CSS", "Javascript", "PHP"]

10. join()

Nếu bạn nào đã làm việc với PHP sẽ thấy concept của phương thức này rất giống với hàm implode() trong PHP. Nó cho phép bạn chuyển một mảng thành chuỗi. Giá trị của chuỗi là các phần tử của mảng được cách nhau bởi ký tự mà bạn truyền vào.

Để hiểu hơn chúng ta cùng tìm hiểu ví dụ sau.

let arr = ["HTML", "CSS", "Javascript", "PHP"]
arr.join('-')
Kết quả:
"HTML-CSS-Javascript-PHP"

Đây là 10 phương thức xử lý mảng trong Javascript được sử dụng thường xuyên khi các bạn xử lý dữ liệu. Tất nhiên là Javascript còn nhiều phương thức khác nữa, tuy nhiên đây là những phương thức mà chúng ta hay sử dụng nhất. Sau này có hàm nào hay mình sẽ update tiếp vào bài viết này để các bạn theo dõi cho tiện.

Tạm dừng ở đây đã nhỉ. Thanks for reading!