Mảng trong JavaScript (Phần 3) - Các phương thức tiện ích 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 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

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 tiện ích với array trong JavaScript

---

Các phương thức tiện ích với array

Phương thức fill

Phương thức fill giúp thay đổi các phần tử trong mảng về một giá trị duy nhất

Cú pháp:

<array>.fill(<value>, <start>, <end>)

Trong đó:

• <value>: là giá trị mà phương thức dùng để thay thế.
• <start>: là giá trị bắt đầu (mặc định là 0), các giá trị từ <start> đến <end>-1 sẽ được thay đổi thành <value>. Nếu <start> là số âm, thì nó sẽ được coi là <start> + <array>.length
• <end>: là giá trị kết thúc (mặc định là <array>.length). Nếu <end> là số âm, thì nó sẽ được coi là <end> + <array>.length.

Ví dụ:

arr = [1, 2, 3, 4, 5]
// [ 1, 2, 3, 4, 5 ]
arr.fill('a', 3)
// [ 1, 2, 3, 'a', 'a' ]
arr.fill(-1)
// [ -1, -1, -1, -1, -1 ]
arr.fill(0, 1, 3)
// [ -1, 0, 0, -1, -1 ]

---

Phương thức forEach

Nghe lạ nhỉ, phương thức gì mà lại có chữ for trong đó, liệu có khác biệt gì với vòng lặp For mà chúng ta đã được học trước đó không?

Đúng thế! ForEach có thể được gọi là một vòng lặp, nhưng nó khá đặc biệt

Trước tiên, hãy cùng xem qua cú pháp của nó nào:

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

Trong đó: 

• <func> là một function. Nó có thể là một function được viết trực tiếp tại đó, một function được gọi từ bên ngoài hoặc là một arrow function. 
  <func> có thể có 1 tham số (<value>: giá trị đang được duyệt đến), 2 tham số (<value> và <index>: chỉ số của phần tử đang được duyệt đến) và 3 tham số (<value>, <index> và <arr>: tức là toàn bộ <array> bên ngoài).
• Còn đối với <thisArg>, thì đó là một tham số không bắt buộc. Nó quy định giá trị của this, và mặc định là undefined. Còn về this là gì, thì Kteam sẽ đề cập đến khi các bạn tiếp cận với Object.

Tóm lại, hiểu một cách đơn giản, là chương trình sẽ duyệt qua từng phần tử của <array>, và đặt nó vào <func>.

Dưới đây là một vài ví dụ về forEach

arr = [12, 3, 5]
// [ 12, 3, 5 ]
sum = 0
// 0
arr.forEach((num) => sum += num)
// undefined
sum
// 20
arr // Giá trị của arr không bị thay đổi
// [ 12, 3, 5 ]

arr = [12, 5, 8]
// [ 12, 5, 8 ]
arr.forEach((value, index, arr) => arr[index] = value*2)
// undefined
arr
// [ 24, 10, 16 ]

Lưu ý: Đối với forEach, ta không thể dùng lệnh break để phá vỡ vòng lặp. Nếu bạn muốn viết một vòng lặp có thể bị break, thì không nên dùng forEach.

---

Phương thức every

Cú pháp:

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

Tác dụng: Giúp kiếm tra xem tất cả các phần tử của <array> khi được đưa vào <func>, có trả về true hay không. Chương trình sẽ lặp qua từng phần tử của <array> và đưa nó vào <func>.

Trong cú pháp trên:

• <func> là một function, mà giá trị trả về của nó là true hoặc false.
• Phương thức every sẽ trả về true nếu tất cả các phần tử đều “vượt qua bài kiếm tra” <func>.

Ví dụ về phương thức every:

function func(number) {
 return number > 12
 }
// undefined
arr = [1, 2, 3, 4]
// [ 1, 2, 3, 4 ]
arr.every(func)
// false
arr2 = [13, 14, 15]
// [ 13, 14, 15 ]
arr2.every(func)
// true
arr.every((number) => {return number > 0})
// true
arr2.every((number) => {return number < 0})
// false

Vậy, nếu như ta muốn tách riêng các phần tử “vượt qua bài kiếm tra” <func> thì sao ? Đến lúc này, ta lại cần một phương thức khác: đó là phương thức filter.

---

Phương thức filter

Cú pháp:

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

Các tham số <func>>, <thisArg> giống tương tự như phương thức forEach.

Phương thức filter giúp ta lấy ra các phần tử đạt yêu cầu dựa trên <func>. Dưới đây là ví dụ:

names = ['An', 'Hoa', 'Teo', 'Tun', 'Le', 'Thanh']
// [ 'An', 'Hoa', 'Teo', 'Tun', 'Le', 'Thanh' ]
names.filter((name) => name.length >= 3)
// [ 'Hoa', 'Teo', 'Tun', 'Thanh' ]
names.filter((name) => name > 'Phong')
// [ 'Teo', 'Tun', 'Thanh' ]

---

Phương thức find

Cú pháp:

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

Có lẽ Kteam không cần nói về các tham số nữa, vì nó đã được giải thích rõ ở trên.

Tác dụng: Trả về giá trị của phần tử đầu tiên vượt qua “bài kiểm tra” mang tên <func>. Nếu không có bất kì phần tử nào vượt qua <func>, giá tri trả về là undefined.

Ví dụ:

arr = [24, 10, 6]
// [ 24, 10, 6 ]
arr.find((n) => n < 10)
// 6
arr.find((n) => n >= 10 && n <= 20)
// 10
arr.find((n) => n > 100)
// undefined

---

Phương thức findIndex

Giống như find, nhưng giá trị được trả về là chỉ mục của phần tử đầu tiên thỏa mãn <func>. Nếu không có bất kì phần tử nào thỏa mãn, giá trị trả về là -1.

Cú pháp:

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

Ví dụ:

arr = [24, 10, 6]
// [ 24, 10, 6 ]
arr.findIndex((n) => n < 10)
// 2
arr.findIndex((n) => n >= 10 && n <= 20)
// 1
arr.findIndex((n) => n > 100)
// -1

---

Phương thức some

Cú pháp:

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

Phương thức này trả về true nếu có bất kì một phần tử nào “vượt qua bài kiểm tra” <func>. Hay nói cách khác, khi đưa phần tử nào đó vào <func>, thì giá trị trả về là true.

Ví dụ:

arr = [1, 2, 3]
// [ 1, 2, 3 ]
arr.some((n) => n % 2 == 0)
// true
arr.some((n) => n % 4 == 0)
// false
arr.some((n) => 0)
// false

---

Phương thức entries

Cú pháp:

<array>.entries()

Tác dụng: trả về một array iterator (trình lặp). Array iterator, hiểu một cách đơn giản là giống như generator, giúp lặp qua array bằng hàm next():

arr = ['a', 'b', 'c']
// [ 'a', 'b', 'c' ]
iterator = arr.entries()
// Object [Array Iterator] {}
iterator.next()
// { value: [ 0, 'a' ], done: false }
iterator.next()
// { value: [ 1, 'b' ], done: false }
iterator.next()
// { value: [ 2, 'c' ], done: false }
iterator.next()
// { value: undefined, done: true }

Iterator, chính là cái mà chúng ta dùng để lặp qua iterable. Ở biến iterator trong ví dụ trên, tại một thời điểm, nó sẽ cố định tại một vị trí trong array. Sau khi gọi hàm next, nó nhảy sang vị trí khác và trả về cái “vị trí” mà nó vừa đến. Đối với hàm next(), nó sẽ trả về một cặp giá trị: value và done (chi tiết các bạn có thể xem lại bài Function trong JavaScript, ở đó Kteam đã có đề cập đến hàm next).

---

Phương thức concat

Để nối một array với một array khác, một giải pháp hữu ích là dùng phương thức concat.

Cú pháp:

<array>.concat(<arrays>)

Trong đó,<arrays> có thể là một hoặc nhiều array. Nếu như có nhiều hơn 1 array, giữa các array phải có dấu phẩy.

Phương thức concat trả về một bản sao của array mới được tạo thành từ việc ghép các phần tử của array ban đầu với các phần tử của các array được thêm vào. Do đó, nó không thay đổi bất kì một array nào có sẵn.

Nếu không có bất kì array nào, thì concat trả về một bản sao của <array>.

Ví dụ:

arr = ['how']
// [ 'how' ]
arr2 = arr.concat(['Kteam'])
// [ 'how', 'Kteam' ]
arr
// [ 'how' ]
arr2
// [ 'how', 'Kteam' ]
[].concat()
// []

---

Phương thức slice

Liệu các bạn có thắc mắc, tại sao JavaScript nhiều phương thức như vậy, mà lại không có phương thức nào giúp chúng ta “bẻ” array một cách độc lập ? Tức là, việc cắt array sẽ được thực hiện mà không làm thay đổi array ban đầu.

Để làm được như thế, ta sẽ dùng một phương thức có tên gọi là slice.

Cú pháp:

<array>.slice(<start>, <end>)

Trong các tham số:

• <start>: Là chỉ số bắt đầu cho việc cắt. Có thể là một số âm. Nếu <start> lớn hơn <array>.length, thì một mảng rỗng được trả về.
• <end>: Là chỉ số kết thúc việc cắt. Có thể là một số âm. Nếu<end> bị bỏ qua hoặc lớn hơn <array>.length, thì <end> được tính là <array>.length.

Các phần tử được cắt sẽ có vị trí từ <start> đến <end>-1 (ngay trước <end>)

Ví dụ:

arr = [1, 2, 3]
// [ 1, 2, 3 ]
arr.slice(1)
// [ 2, 3 ]
arr.slice(1, 2)
// [ 2 ]
arr.slice(-1, 2) // Vì phần tử có chỉ số 2 (3) đồng thời cũng có chỉ số là -1.
// []
arr.slice(-3, 2) // Lấy 2 phần tử đầu tiên (từ -3 đến -2, do -2 trùng với 1, đứng ngay trước 2)
// [ 1, 2 ]

---

Kết luận

Các bạn vừa cùng Kteam tìm hiểu về các phương thức tiện ích với array JavaScript

Ở bài tiếp theo, Kteam sẽ giới thiệu đến các bạn một vài phương thức xử lý của array

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.