Mảng trong JavaScript (Phần 3) - Các phương thức tiện ích của mảng JavaScript

Khóa học JavaScript cơ bản

0.0 (0 đánh giá)
Tạo bởi Katsu Cập nhật lần cuối 03:55 27-06-2023 1.230 lượt xem 0 bình luận
Tác giả/Dịch giả: Đang cập nhật
Học nhanh

Danh sách bài học

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> <index>: chỉ số của phần tử đang được duyệt đến) và 3 tham số (<value>, <index> <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 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ó”.


Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Mảng trong JavaScript (Phần 3) - Các phương thức tiện ích của mảng JavaScript dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên likeshare để ủng hộ Kteam và tác giả nhé!


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ê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.

Nội dung bài viết

Tác giả/Dịch giả

Đang cập nhật

Khóa học

Khóa học JavaScript cơ bản

Nếu bạn đang muốn bắt đầu học JavaScript thì đây chính là khóa học dành cho bạn. Trong khóa học này, Kteam sẽ cung cấp cho những kiến thức cơ bản nhất của ngôn ngữ lập trình JavaScript.

Khóa học này không đòi hỏi kiến thức nền tảng nhiều, nên giả sử như bạn chưa biết gì về lập trình, bạn vẫn có thể tham gia. Do đó dù bạn có là một người trái ngành cũng có thể tiếp cận - Đồng thời bạn cũng không cần phải là một thiên tài toán học để tham gia khóa học này 😉.

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.