Mảng trong JavaScript (Phần 2) - Các phương thức với mảng trong JavaScript

Dẫn nhập

Ở bài trước, Kteam đã giới thiệu đến các bạn về kiểu dữ liệu array trong JavaScript.

Trong bài này, chúng ta sẽ cùng tìm hiểu kĩ hơn về các phương thức với array trong JavaScript.

Nội dung

Để nắm được bài này, bạn cần có kiến thức về:

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

Những nội dung mà chúng ta sẽ cùng tìm hiểu:

• Chuyển một array sang string tương ứng
• Các phương thức xác định
• Các phương thức tìm kiếm
• Các phương thức cập nhật

Chuyển một array sang string

Như đã biết, khi thực hiện các toán tử trên array trong JavaScript, thì máy tính sẽ chuyển các dữ liệu sang string để thực hiện.

Cụ thể hơn, ta có 2 cách để chuyển một giá trị từ array sang chuỗi. Những cách này tương tự như cách tạo ra một string mà Kteam đã hướng dẫn các bạn trong bài Kiểu dữ liệu Chuỗi

Cách thứ nhất, chính là sử dụng constructor String đã được Kteam đề cập đến ở bài trước:

String(<array>)

Trong đó, <array> là array tương ứng, và constructor này sẽ trả về một chuỗi mới.

Cách thứ 2, là sử dụng phương thức toString

<array>.toString()

Tương tự như trên, <array> là array tương ứng.

Hai cách trên có công dụng như nhau, và trả về cùng một giá trị chuỗi cho cùng một đầu vào.

Dưới đây là ví dụ:

arr = ['how', 'kteam']
// [ 'how', 'kteam' ]
arr.toString()
// 'how,kteam'
String(arr)
// 'how,kteam'
1
2
3
4
5
6
7

Các phương thức xác định

Phương thức at

Cú pháp:

<array>.at(<index>)

Tác dụng: Trả về phần tử tương ứng với <index> trong mảng <array>.

Phương thức at trong aray tương tự với phương thức at của string.

Dành cho bạn nào chưa biết về phương thức at của string, thì nó sẽ trả về phần tử tương ứng với <index>. Phương thức at quy ước các phần tử được đánh số từ trái sang phải (từ 0 tới <array>.length-1) và từ phải sang trái (từ -1 đến -<array>.length).

• Lấy một trường hợp cụ thể: arr = [1, 2, 3]

• Tiếp đến, là một vài ví dụ về việc dùng phương thức at:

arr = [1, 2, 3]
// [ 1, 2, 3 ]
arr.at(-1)
// 3
arr.at(-2)
// 2
arr.at(-3)
// 1
arr.at(0)
// 1
arr.at(1)
// 2
arr.at(2)
// 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Và, một lưu ý khác:

nếu như <index> là một giá trị mà phương thức at không thể trả về giá trị phần tử tương ứng, thì nó sẽ trả về undefined.

Bên cạnh đó, một string-number có thể đươc dùng để thay thế cho số bên trong at. Đồng thời, nếu như <index> là một số thập phân, thì nó sẽ lấy giá trị phần nguyên và trả về giá trị tương ứng trong array.

arr = [1, 2, 3]
// [ 1, 2, 3 ]
arr.at(1.23)
// 2
arr.at('2.12')
// 3
arr.at('-2')
// 2
1
2
3
4
5
6
7
8
9

Phương thức includes

Một lần nữa, là giống với string.

Phương thức includes giúp xác định xem một giá trị nào đó có nằm trong array hay không.

Cú pháp:

<array>.includes(<searchElement>, <position>)

Trong đó:

• <searchElement>: là phần tử mà ta muốn xét xem liệu nó có nằm trong <array> hay không.
• <position>: là vị trí bắt đầu tìm kiếm (mặc định là 0). Các phần tử từ <position> đến cuối <array> sẽ được xét.

Những lưu ý nhất định đối với tham số <position>:

• Nếu <position> lớn hơn hoặc bằng <array>.length, thì trả về 0 (do không có bất kì phần tử nào được xét)
• Nếu <position> là số âm, thì có 2 trường hợp:
  • <position> lớn hơn hoặc bằng -<array>.length: thì sẽ bắt đầu xét trên đoạn bắt đầu từ phần tử tương ứng (như cách xét chỉ mục âm bên trên) cho đến cuối <array>.
  • <position> bé hơn -<array>.length: thì mặc định sẽ là tìm kiếm trên toàn bộ <array>.
• Cũng tượng tự như phương thức at bên trên, nếu <position> là một số thập phân, thì nó tự động tách phần nguyên ra và làm như bình thường.
• <position> có thể là một string-number.

Ví dụ:

a = [1, 2, 4, 6]
// [ 1, 2, 4, 6 ]
a.includes(1)
// true
a.includes(1, 1)
// false
a.includes(1, -4)
// true
a.includes(2, -3)
// true
a.includes(2, -4)
// true
a.includes(2, -400)
// true
a.includes(2, 1000)
// false
a.includes(2, '1.12')
// true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Các phương thức tìm kiếm

Phương thức indexOf

Cú pháp:

<array>.indexOf(<searchElement>, <posotion>)

Trong đó:

• <searchElement>: là giá trị mà ta muốn tìm kiếm trong mảng.
• <posotion>: Tương tự như <posotion> ở bên trên phương thức includes

Giá trị trả về: là vị trí đầu tiên mà tìm thấy <searchElement> trong <array>. Nếu không tìm thấy, trả về giá trị -1.

Ví dụ:

a = ['a', 'b', 'c']
// [ 'a', 'b', 'c' ]
a.indexOf('a', 2)
// -1
a.indexOf('a', -3)
// 0
a.indexOf('a', -123)
// 0
a.indexOf('a', 0.123)
// 0
1
2
3
4
5
6
7
8
9
10
11

Phương thức lastIndexOf

Cú pháp:

<array>.lastIndexOf(<searchElement>, <posotion>)

Trong đó:

• <searchElement>: là phần tử được dùng để tìm kiếm.
• <posotion>: Là chỉ mục bắt đầu cho quá trình tìm kiếm. Quá trình tìm kiếm sẽ là từ <posotion> trở về đầu của <array>.
  Mặc định: <position> = <array>.length – 1.

Những điểm cần lưu ý đối với tham số <position>:

• Nếu <position> lớn hơn hoặc bằng <array>.length, thì toàn bộ mảng sẽ được tìm kiếm.
• Nếu <position> là số âm, thì  có 2 trường hợp:
  • <position> lớn hơn hoặc bằng -<array>.length thì sẽ tìm từ cuối <array> cho đến chỉ số <position>
  • <position> nhỏ hơn -<array>.length thì không tiến hành quá trình tìm kiếm 
• Như các phương thức khác, <position> có thể là một string-number và được tự động lấy phần nguyên.

Ví dụ:

a = ['a', 'b', 'c']
// [ 'a', 'b', 'c' ]
a.lastIndexOf('b', -2)
// 1
a.lastIndexOf('b', -3)
// -1
a.lastIndexOf('b', 0)
// -1
a.lastIndexOf('b', 100)
// 1
1
2
3
4
5
6
7
8
9
10
11

Các phương thức cập nhật

Nếu các bạn có biết kiến thức về cấu trúc dữ liệu và giải thuật, thì các bạn chắc chắn sẽ biết về 2 kiểu cấu trúc dữ liệu sau đây:

• Stack: Hoạt động theo kiểu LIFO (Last in first out). Hỗ trợ thao tác thêm một phần tử vào cuối danh sách, và loại bỏ một phần tử ở cuối danh sách.
• Queue: Hoạt động theo kiểu FIFO (First in first out). Hỗ trợ thao tác thêm một phần tử vào cuối danh sách, và xóa một phần tử ở đầu danh sách.

Và, có một loại cấu trúc dữ liệu có thể coi như là tổng của stack và queue, đó là deque.

Array trong JavaScript là một cấu trúc dữ liệu có thể xem như là một deque, nó hỗ trợ các thao tác:

• Thêm một/nhiều phần tử vào đầu/cuối array.
• Xóa một phần tử ở đầu/cuối array.

Cụ thể hơn, mời các bạn tiếp tục theo dõi phần bên dưới.

Phương thức unshift

Phương thức này giúp ta thêm một hay nhiều phần tử vào đầu của một array cho trước. Sau khi đã thêm các phần tử này vào array, thì giá trị trả về của phương thức này là <array>.length.

Cú pháp:

<array>.unshift(<element>)

Trong đó: <element> chính là phần tử mà bạn muốn thêm vào. Trong trường hợp có nhiều phần tử, các phần tử này phải được cách nhau bằng dấu phẩy.

Ví dụ:

arr = ['Free', 'education']
// [ 'Free', 'education' ]
arr.unshift('How', 'Kteam')
// 4
arr
// [ 'How', 'Kteam', 'Free', 'education' ]
1
2
3
4
5
6
7

Phương thức push

Phương thức này giúp ta thêm một hay nhiều phần tử vào cuối của một array cho trước. Sau khi đã thêm các phần tử này vào array, thì giá trị trả về của phương thức này là <array>.length.

Cú pháp:

<array>.push(<element>)

Trong đó: <element> (cũng như trên thôi) chính là phần tử mà bạn muốn thêm vào. Trong trường hợp có nhiều phần tử, các phần tử này phải được cách nhau bằng dấu phẩy.

Ví dụ:

arr = ['How', 'Kteam']
// [ 'How', 'Kteam' ]
arr.push('Free education')
// 3
arr
// [ 'How', 'Kteam', 'Free education' ]
1
2
3
4
5
6

Phương thức shift

Phương thức này loại bỏ phần tử đầu tiên của một array và trả về giá trị của phần tử đó. Nếu như array ban đầu trống, thì giá trị trả về là undefined.

Cú pháp:

<array>.shift()

Ví dụ:

arr = ['aaaaaa', 'How', 'Kteam']
// [ 'aaaaaa', 'How', 'Kteam' ]
arr.shift()
// 'aaaaaa'
arr
// [ 'How', 'Kteam' ]
arr2 = []
// []
arr2.shift()
// undefined
1
2
3
4
5
6
7
8
9
10
11

Phương thức pop

Cũng gần tương tự như phương thức shift thôi, chỉ khác là nó loại bỏ và trả về phần tử cuối cùng của array.

Cú pháp:

<array>.pop()

Ví dụ:

arr = ['how', 'Kteam', 'aaaa']
// [ 'how', 'Kteam', 'aaaa' ]
arr.pop()
// 'aaaa'
arr
// [ 'how', 'Kteam' ]
[].pop()
// undefined
1
2
3
4
5
6
7
8
9

Phương thức splice

Cú pháp:

<array>.splice(<start>, <deleteCount>, <items>)

Trong đó:

• <start>: là vị trí bắt đầu cho việc biến đổi array.
  Nếu <start> lớn hơn <array>.length – 1 thì  <start> tự động được gán bằng độ dài của mảng. Trong trường hợp này, sẽ không có bất kì phần tử nào bị xóa, nhưng phương thức vẫn có thể được dùng để thêm các phần tử vào cuối <array>
• <deleteCount>: là số lượng phần tử bị loại bỏ kể từ <start> (không bắt buộc, mặc định là <array>.length, tức là nếu không được chỉ định, thì toàn bộ <array> sẽ bị xóa).
  • Nếu <deleteCount> bằng 0 hoặc âm, không có bất kì phần tử nào bị xóa bỏ.
  • Nếu <deleteCount> lớn hơn hoặc bằng <array>.length, thì toàn bộ <array> bị xóa.
• <items>: là những phần tử được thêm vào để “thế chỗ” cho những phần tử đã bị loại bỏ. Nếu có nhiều phần tử, các phần tử phải ngăn cách nhau bằng dấu phẩy (không bắt buộc).

Các giá trị <start> và <deleteCount> tự động được lấy phần nguyên nếu nó là số thập phân.

Tác dụng: Giúp thay đổi nội dung của <array>. Hiểu một cách đơn giản, là loại bỏ <deleteCount> phần tử từ <start> của <array> và thay thế chúng bằng <items>. Sau khi thực hiện các thao tác trên, thì giá trị trả về của phương thức này chính là một array chứa các phần tử bị loại bỏ.

Ví dụ:

arr = ['a', 'b', 'c']
// [ 'a', 'b', 'c' ]
arr.splice(1, 2, 'how', 'kteam')
// [ 'b', 'c' ]
arr
// [ 'a', 'how', 'kteam' ]
arr.splice(1, 1)
// [ 'how' ]
arr
// [ 'a', 'kteam' ]
arr.splice(0)
// [ 'a', 'kteam' ]
arr
// []
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Kết luận

Qua bài này, các bạn đã có thêm kiến thức về array trong JavaScript.

Qua bài sau, Kteam sẽ tiếp tục giới thiệu đến các bạn về các phương thức khác của array 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ó”.

---

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 2) - Các phương thức với mảng trong 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 like và share để ủ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Ì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.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK