Mảng trong JavaScript (Phần 4) - Các phương thức xử lý của mảng JavaScript

Dẫn nhập

Ở bài trước, chúng ta đã cùng tìm hiểu về các phương thức với array trong JavaScript .

Trong bài này, chúng ta sẽ tiếp tục chủ đề về các phương thức xử lý trong array

---

Nội dung

Những yêu cầu về mặt kiến thức trước khi tìm hiểu bài này:

• Kiểu dữ liệu array trong JavaScript 
• Kiểu dữ liệu string trong JavaScript 

Nội dung mà Kteam sẽ giới thiệu đến các bạn trong bài này:

• Các phương thức xử lý với array trong JavaScript 

---

Các phương thức xử lý

Phương thức sort

Chắc các bạn cũng đã hiểu ít nhiều về phương thức sort khi nghe qua cái tên của nó rồi nhỉ ? Cách hiểu đơn giản nhất, là nó sẽ giúp chúng ta sắp xếp lại một array.

Cú pháp:

<array>.sort(<func>)

Tác dụng: phương thức sort giúp sắp xếp một array. Cách sắp xếp có thể là mặc định theo máy tính, hoặc do <func> quy định.

Trước tiên, hãy cùng tìm hiểu về cách sắp xếp mặc định. Theo mặc định, tất cả các phần tử được sắp xếp dưới dạng chuỗi. Tức là, nếu không có <func>, thì chương trình sẽ dựa trên việc so sánh các phần tử dưới dạng chuỗi để quy định rằng phần tử nào bé hơn, phần tử nào lớn hơn. Từ đó đưa ra một thứ tự sắp xếp phù hợp.

Để có thể hiểu rõ hơn về cách sắp xếp mặc định, mời các bạn xem qua một ví dụ:

arr = [10, 5, 30]
// [ 10, 5, 30 ]
arr.sort()
// [ 10, 30, 5 ]
arr
// [ 10, 30, 5 ]

Vì ‘10’ < ‘30’ < ‘5’, nên arr sẽ có dạng như trong ví dụ trên (sau khi đã được sắp xếp).

arr2 = ['Kteam', 'how', 'free', 'education']
// [ 'Kteam', 'how', 'free', 'education' ]
arr2.sort()
// [ 'Kteam', 'education', 'free', 'how' ]
arr2
// [ 'Kteam', 'education', 'free', 'how' ]

Từ ví dụ trên có thể thấy: việc sắp xếp các phần tử có cùng kiểu dữ liệu là khá dễ dàng. Vậy nếu các phần tử khác kiểu dữ liệu thì sao nhỉ ? Cũng thế thôi, vì chúng đều là string cả mà.

arr3 = ['how', 1, 'Kteam', 3, -1, '0']
// [ 'how', 1, 'Kteam', 3, -1, '0' ]
arr3.sort()
// [ -1, '0', 1, 3, 'Kteam', 'how' ]
arr3
// [ -1, '0', 1, 3, 'Kteam', 'how' ]

Nhưng, nếu ta muốn sắp xếp các phần tử theo một cách khác, mà không phải chuyển về chuỗi rồi so sánh, thì sao nhỉ ? Đến lúc này, cái <func> lại phát huy tác dụng của nó.  <func> là một function, được viết ngay tại đó, được gọi từ một vị trí khác trong chương trình, hoặc là một arrow function. Theo mặc định, <func> là việc so sánh 2 string.

Bên trong <func> bắt buộc phải có 2 tham số, và 2 tham số này sẽ đại diện cho 2 phần tử tương ứng bất kì trong <array>. Gọi 2 phần tử được so sánh là a và b, thì khi đưa vào <func>, thì sẽ có các trường hợp sau xảy ra:

Giá trị trả về của <func>	Ý nghĩa
<0	a < b (tức là a sẽ xếp trước b)
>0	a > b (tức là b sẽ được xếp trước a)
=== 0	a == b (giữ nguyên vị trí của a và b)

Do đó, để sắp xếp một array toàn là các số (number), thì ta có thể dùng một function như sau:

Giá trị trả về của <func>	Ý nghĩa
<0	a < b (tức là a sẽ xếp trước b)
>0	a > b (tức là b sẽ được xếp trước a)
 === 0	a == b (giữ nguyên vị trí của a và b)

Bây giờ, ta sẽ tiến hành việc sắp xếp:

arr = [10, 30, 5]
// [ 10, 30, 5 ]
arr.sort()
// [ 10, 30, 5 ]
arr.sort(compare)
// [ 5, 10, 30 ]
arr
// [ 5, 10, 30 ]

Như vậy, chúng ta có thể quy định các mà một array có thể được sắp xếp. Trong ví dụ trên, hàm compare có thể sửa đổi đơn giản hơn, nhưng hiệu quả không đối:

function compare(a, b) {
 return a - b
}
// undefined
arr = [10, 30, 5]
// [ 10, 30, 5 ]
arr.sort(compare)
// [ 5, 10, 30 ]
arr
// [ 5, 10, 30 ]

---

Phương thức map

Cú pháp:

<array>.map(<func>, <thisArg>)

Tác dụng: Thực hiện <func> cho từng phần tử của <array>, sau đó gom tất cả các kết quả trả về vào một array mới.

Các tham số trong phương thức map:

• <func>: là một function. Có thể được gọi từ một vị trí khác trong chương trình, được viết trực tiếp ngay tại đó hoặc là một arrow function.
• <array>: Giá trị được sử dụng như this khi gọi <func> (sẽ được Kteam giải thích kĩ hơn trong tương lai).

Đến thời điểm này của khóa học, bạn chỉ cần nắm vững được <func> là đủ.

Trong quá trình duyệt qua <array>, các giá trị của từng phần tử đều được gọi <func>, ngoại trừ:

• Các chỉ mục mà không chứa bất kì phần tử nào (empty item)
• Các chỉ mục đã bị xóa.

Lưu ý rằng, phương thức map trả về một array mới, và array ban đầu không bị tác động.

Ví dụ:

arr = [2, 4, 6]
// [ 2, 4, 6 ]
arr.map((a) => a % 2 == 0)
// [ true, true, true ]
arr.map((a) => a**2)
// [ 4, 16, 36 ]
arr
// [ 2, 4, 6 ]

arr = [, , ,] // 3 empty items
// [ <3 empty items> ]
arr.map(() => 'howKteam')
// [ <3 empty items> ]
arr
// [ <3 empty items> ]

---

Phương thức reverse

Phương thức reverse giúp ta đảo ngược thứ tự các phần tử trong một array

Cú pháp:

<array>.reverse()

Ví dụ:

arr = ['Free edu', 'Kteam', 'how']
// [ 'Free edu', 'Kteam', 'how' ]
arr.reverse()
// [ 'how', 'Kteam', 'Free edu' ]
arr
// [ 'how', 'Kteam', 'Free edu' ]
numbers = [1, 2, 3, 4, 5]
// [ 1, 2, 3, 4, 5 ]
numbers.reverse()
// [ 5, 4, 3, 2, 1 ]
numbers
// [ 5, 4, 3, 2, 1 ]

---

Phương thức split / join

Đối với phương thức split, mời các bạn xem lại bài Kiểu dữ liệu chuỗi trong JavaScript– phần 4

Bây giờ chúng ta sẽ cùng đến với phương thức join

Cú pháp:

<array>.join(<seperator>)

Trong đó: <seperator> là một chuỗi.

Phương thức này giúp “gom” các phần tử của <array> vào một chuỗi duy nhất. Các phần tử của <array> sẽ được nối với nhau bằng <seperator>.

Nếu có phần tử là undefined, null hoặc <empty item>, thì những giá trị này được xem như là một chuỗi rỗng.

Ví dụ:

arr = ['we', 'are', 'howKteam']
// [ 'we', 'are', 'howKteam' ]
arr.join(' + ')
// 'we + are + howKteam'
arr2 = Array(3)
// [ <3 empty items> ]
arr2.join('Js')
// 'JsJs'

---

Kết luận

Qua bài này, các bạn đã biết thêm về các phương thức với array trong JavaScript

Trong bài tiếp theo, Kteam cùng bạn củng cố lại kiến thức Bài tập về mảng trong JavaScript .

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.