Các cách để tạo ra array trong javascript là gì năm 2024

Mảng JavaScript là kiểu dữ liệu có thể lưu trữ một tập hợp các phần tử. Các phần tử này có thể thuộc bất kỳ kiểu dữ liệu nào, bao gồm số, chuỗi và đối tượng. Mảng trong JavaScript là mảng động, nghĩa là bạn có thể thêm hoặc xóa các phần tử khỏi chúng sau khi chúng được tạo. Trong hướng dẫn này, chúng ta sẽ xem xét tất cả các phương thức mảng JavaScript và cách chúng được áp dụng trong thực tế.

Ở các bài trước, Kteam đã giới thiệu đến các bạn về các kiểu dữ liệu nguyên thủy trong JavaScript (primitive data type).

Trong bài này, chúng ta sẽ cùng nhau tìm hiểu về một kiểu dữ liệu mới hơn, đó làarray.

Nội dung

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

• Các kiểu dữ liệu nguyên thủy trong JavaScript
• Vòng lặp trong JavaScript
• Chương trình con (function) trong JavaScript

Và, dưới đây là những nội dung sẽ được đề cập đến trong bài viết:

• Đặt vấn đề
• Kiểu dữ liệu array trong JavaScript
• Khởi tạo một array
• Các toán tử với array trong JavaScript
• Vấn đề cần lưu tâm khi sử dụng array

Đặt vấn đề

Toàn có nuôi một con mèo, và Toàn muốn ghi nhớ lại tên của con mèo này.

Trong trường hợp này, Toàn chọn cách sử dụng một biến có tên là myCat, và lưu lại tên con mèo đó

myCat \= “Tom”

Và đây là một con mèo cái. Đó là lý do mà sau 3 tháng, số mèo mà Toàn nuôi tăng lên 4 con. Và đến lúc này, Toàn vẫn muốn lưu trữ lại tên của toàn bộ mèo mà mình sở hữu.

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’; myCat_3 = ‘Torry’; myCat_4 = ‘Jerrom’

Mặc dù tốn công hơn một chút, nhưng Tún vẫn không quá khó khăn trong việc dùng biến để lưu lại tên mèo.

Đó là một câu chuyện hài hước. Vào một ngày đẹp trời, Toàn tỉnh dậy và thấy nhà mình có 30 con mèo. Đó là một điều thần kỳ ! Và bây giờ, Toàn lại bắt đầu loay hoay tạo ra 30 cái biến dành cho 30 con mèo, và tất nhiên, Toàn không muốn có một con mèo vô danh.

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

Đến đây, chắc chắn các bạn sẽ nhận ra một sự bất cập: chúng ta mất quá nhiều biến chỉ để lưu trữ dữ liệu của 30 con mèo. Và từ đó, một cấu trúc dữ liệu mới đã ra đời, đó là array.

Array trong JavaScript

Nếu các bạn đã có kiến thức về những ngôn ngữ lập trình khác, thì chắc chắn array (mảng) là một từ quá đỗi quen thuộc. Nó giúp lưu trữ dữ liệu theo cấu trúc danh sách, và quản lý dữ liệu bằng cách truy xuất chỉ mục của các phần tử được lưu trong danh sách đó.

Array xuất hiện trong hầu hết ngôn ngữ lập trình. Nó bao gồm các phần tử ngăn cách nhau bởi dấu phẩy (,) và được đặt trong cặp[].

Đối với JavaScript , array là một đối tượng toàn cục được sử dụng để xây dựng các mảng và là một đối tượng cấp cao (nguồn: Array in JavaScript). Khác với các ngôn ngữ lập trình bậc thấp, mảng trong JavaScript là một cấu trúc dữ liệu có khả năng hoạt động vô cùng mạnh.

Dưới đây là ví dụ về array.

arr = [1, 2, 3] // [ 1, 2, 3 ] console.log(arr) [ 1, 2, 3 ] // undefined typeof(arr) // 'object' arr2 = ['one', 'two', 'three'] // [ 'one', 'two', 'three' ] arr2 // [ 'one', 'two', 'three' ] typeof(arr2) // 'object'

Để khởi tạo một array, chúng ta có 2 cách:

Cách 1: Sử dụng constructor Array

<new\> Array(<elements\>)

Trong đó:

• <new\>: Từ khóa new, có thể có hoặc không.
• <elements\>: Là các phần tử mà ta muốn đặt trong array sau khi được khởi tạo. Các phần tử được đặt cách nhau bằng dấu phẩy.

Ví dụ:

arr = new Array(1, 2, 3) // [ 1, 2, 3 ] arr2 = Array('one', 'two', 'three') // [ 'one', 'two', 'three' ] arr // [ 1, 2, 3 ] arr2 // [ 'one', 'two', 'three' ]

Trường hợp <elements\> là một số:

• Nếu là số thập phân, hoặc là một số nguyên âm, trả về lỗi
• Nếu là một số nguyên dương, trả về một array với <elements\> phần tử, với mỗi phần tử là một giá trị trống (empty item)
• Nếu là một bigint, trả về một array với một phần tử duy nhất, chính là bigint đó.

a = Array(1, 2) // [ 1, 2 ] b = Array(3) // [ <3 empty items> ] c = Array('4') // [ '4' ] d = Array(1.2) // Uncaught RangeError: Invalid array length e = Array(2n) // [ 2n ]

Cách 2: Sử dụng cặp ngoăc vuông [].

[<elements\>]

Trong đó:

• <elements\>: là các phần tử của array mà bạn muốn tạo, các phần tử ngăn cách nhau bằng dấu phẩy.

Ví dụ:

a = [] // [] b = ['x', 'y', 'z'] // [ 'x', 'y', 'z' ] a // [] b // [ 'x', 'y', 'z' ]

Không chỉ cho phép các phần tử có cùng kiểu nằm chung trong array, trong một JavaScript array có thể chứa các phần tử khác kiểu dữ liệu.

arr = [1, '2', 'three'] // [ 1, '2', 'three' ] arr = [['a', 'b', 'c'], [1, 2, 3]] // [ [ 'a', 'b', 'c' ], [ 1, 2, 3 ] ] arr = ['eeee', ('uuu')] // [ 'eeee', 'uuu' ]

Như vậy, để Toàn có thể lưu trữ tên của 30, 100 hay 1000 chú mèo, thì việc đơn giản nhất là dùng một array myCats để lưu trữ.

Một thuộc tính cơ bản của array là length, giúp chúng ta biết được liệu trong array đó có bao nhiêu phần tử (tương tự vớilength của string)

­­Như đã đề cập, array giúp quản lý các phần tử của nó bằng chỉ mục. Chỉ số của các phần tử được bắt đầu từ 0, và cứ thế chạy từ trái sang phải cho đến hết array (từ 0 à array.length – 1). Nhờ đặc điểm nổi trội như vậy, nên khi mà Toàn muốn lấy tên của một chú mèo nào đó, thì Toàn chỉ cần biết đó là chú mèo thứ mấy là được.

Để trích xuất một phần tử trong mảng, ta sẽ dùng cú pháp như sau:

<array\>[<index\>]

Trong đó:

• <array\>: là tên của mảng.
• <index\>: là chỉ mục của phần tử mà ta muốn lấy ra.

Ví dụ:

cats = ['Tom', 'Jerry', 'Torry', 'Jeom'] // [ 'Tom', 'Jerry', 'Torry', 'Jeom' ] cats[1] // 'Jerry' cats[2] // 'Torry' cats[3] // 'Jeom' cats[0] // 'Tom'

Trong trường hợp mà trong <array\> không có chỉ mục <index\> (<index\> nhỏ hơn 0 hoặc <index\> lớn hơn length-1), thì giá trị của nó là undefined.

Trong ví dụ trên, giá sử ta cố ý lấy ra cats[5] và cats[-1] thì:

cats[-1] // undefined cats[5] // undefined

Khác với chuỗi, array cho phép bạn thay đổi giá trị của các phần tử bên trong nó. Việc thay đổi này đơn giản chỉ là thực hiện phép gán cho phần tử đó:

arr = ['a', 'b'] // [ 'a', 'b' ] arr[0] = 'how' // 'how' arr[1] = 'Kteam' // 'Kteam' arr // [ 'how', 'Kteam' ]

Có một điểm nữa mà ta cần lưu ý, đó là về “kiểu dữ liệu” của array. Nó là một object.

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

0

Một object đặc biệt giúp lưu trữ các giá trị theo cách đặc biệt.

Về object, trong các bài tiếp theo, Kteam sẽ giới thiệu cho các bạn về kiểu dữ liệu này.

Các toán tử với array trong Js

Toán tử cộng (+)

Một trong những sự thú vị của mảng JavaScript nằm ở toán tử +. Khi thực hiện toán tử + trên array, thì toàn bộ các dữ liệu đều được chuyển thành string trước khi thực hiện tính toán.

Chính vì lẽ đó, nên về mặt bản chất, thì các toán tử +, khi thực hiện trên array sẽ đều trả về kết quả tương tự khi thực hiện trên chuỗi tương ứng.

Một giá trị array, khi được chuyển thành string, sẽ có dạng giống như một array, chỉ khác ở chỗ nó sẽ bỏ cặp ngoặc [] và đặt phần còn lại vào trong cặp dấu nháy ‘’ (hoặc “”) để nó trở thành một chuỗi (đối với các phần tử là chuỗi, nó sẽ bỏ các cặp nháy bao quanh phần tử đó).

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

1

Giờ, quay trở lại vấn đề với phép cộng. Chắc hẳn các bạn đã nắm được cách mà JavaScript thực hiện phép cộng với các array rồi nhỉ ? Nếu chưa,cùng xem các ví dụ bên dưới:

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

2

Các toán tử số học khác (trừ, nhân chia)

Khác với toán tử cộng (+), tất cả các toán tử này khi thực hiên trên array đều sẽ cho một kết quả chung, đó là NaN.

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

3

Vấn đề cần lưu tâm khi sử dụng array

Việc đầu tiên, và là tối quan trọng khi làm việc với array là: đừng dùng toán tử so sánh cho 2 array trong JavaScript. Việc dùng các toán tử so sánh một cách không kiếm soát sẽ tạo nên những sai lầm không đáng có.

Để Kteam cho các bạn xem một ví dụ cụ thể:

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

4

Nguyên nhân cho việc đó có thể hiểu một cách đơn giản là: về mặt bản chất, array là một object (đối tượng), và vì đây là 2 đối tượng khác nhau, nên chương trình luôn trả về false).

Tuy nhiên, các toán tử so sánh khác khi được dùng với 2 array thì chúng sẽ được chuyển về string để so sánh:

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

5

Một sai lầm nữa dễ mắc phải chính là việc gán các giá trị array cho nhau một cách không có chủ đích. Một cách để xác định, chính là dùng phương thức is.

Cú pháp:

Object.is(<obj1\>, <obj2\>)

Tác dụng: dùng để xác định xem 2 object có cùng trỏ đến một vùng bộ nhớ hay không.

Đến thời điểm này, bạn chỉ cần hiểu 2 object đó là 2 array là được.

Khi gán một biến array này cho một biến khác, thì bản chất của vấn đề là ta đã làm cho 2 biến trỏ đến cùng một vùng bộ nhớ:

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

6

Nguyên nhân ở đây, một lần nữa, bản chất của vấn đề lại nằm ở việc array là object

Trong ví dụ trên, thì khi ta gán arr2 = arr, thì 2 biến này sẽ cùng trỏ vào một object array. Dù là 2 biến khác nhau, nhưng chúng cùng trỏ vào 1 đối tượng.

Chính vì lẽ đó, khi ta thay đổi một phần tử trong arr bằng phép gán, thì kết quả của arr2 cũng sẽ bị tác động (đối tượng mà cả 2 trỏ vô sẽ bị thay đổi):

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

7

Mặc dù vậy, lỗi này chỉ xảy ra khi ta thay đổi giá trị của 1 phần tử trong arr. Nếu như thay đối toàn bộ arr, tức là gán arr = <một giá trị khác>, thì 2 biến sẽ không cùng trỏ vào một giá trị nữa, và lúc ấy, chúng không còn liên hệ gì với nhau.

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

8

Ở trên là 2 lỗi cơ bản nhất thường gặp khi làm việc với mảng trong JavaScript . Ngoài ra, khi thao tác với mảng, còn rất nhiều yếu tố khác có thể tạo ra lỗi. Các bạn cần chú ý tránh những lỗi này để hạn chế nhất có thể thời gian để tìm và fix bug.

Empty items

Khác với các ngôn ngữ lập trình khác, một phần tử trong array Js có thể không mang bất kỳ giá trị nào.

Để minh chứng cho điều đó, ta thực hiện lệnh sau:

myCat_1 = ‘Tom’; myCat_2 = ‘Jerry’;…; myCat_30 = ‘Tun’

9

Nó không hề giống với các array khác, và cũng không trả về lỗi.

Và, giá trị của từng phần tử khi được gọi ra, sẽ là undefined.

arr = [1, 2, 3] // [ 1, 2, 3 ] console.log(arr) [ 1, 2, 3 ] // undefined typeof(arr) // 'object' arr2 = ['one', 'two', 'three'] // [ 'one', 'two', 'three' ] arr2 // [ 'one', 'two', 'three' ] typeof(arr2) // 'object'

0

Kết luận

Qua bài này, các bạn đã được tìm hiểu sơ lược về array trong JavaScript .

Qua bài sau, chúng ta sẽ tiếp tục tìm hiểu kĩ hơn về array, để các bạn có thể rành rọt hơn trong công việc của mình.

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 1)- Kiểu dữ liệu Array 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ê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.