Trong bài viết này, chúng ta sẽ tìm hiểu về Arrays trong JavaScript thông qua các ví dụ nhé 😄😄.
Tóm Tắt
JavaScript Arrays
Trong JavaScript, một mảng – array là một danh sách các giá trị có thứ tự. Mỗi giá trị được gọi là một phần tử – element được chỉ định bởi một chỉ mục – index:
const
cars =
[
'mercedes'
,
'bmw, '
ferrari',
null
]
;
Ở đây, cars
là một mảng. Mảng đang lưu trữ 4 giá trị.
Một mảng trong JavaScript có các đặc điểm sau:
- Một mảng có thể chứa các giá trị với kiểu dữ liệu khác nhau. Ví dụ: bạn có thể có một mảng lưu trữ các phần tử có kiểu number, string, boolean và null.
- Kích thước của một mảng là động. Có nghĩa là chúng ta không cần phải chỉ định kích thước cho mảng trước khi sử dụng.
Tạo mảng trong JavaScript
JavaScript cung cấp cho chúng ta hai cách để tạo một mảng. Cách đầu tiên là sử dụng array constructor
như sau:
let
students =
new
Array
(
)
;
Lúc này mảng students
đang trống, không chứa bất kỳ phần tử nào.
Nếu biết trước số phần tử mà mảng sẽ chứa, chúng ta có thể tạo một mảng với kích thước ban đầu như ví dụ sau:
let
students =
new
Array
(
5
)
;
Để tạo một mảng và khởi tạo nó với một số phần tử, chúng ta truyền các phần tử dưới dạng danh sách được phân tách bằng dấu phẩy ,
vào Array()
.
Ví dụ:
let
scores =
new
Array
(
8
,
7
,
5
,
6
,
12
)
;
Nếu sử dụng
Array()
để tạo một mảng và truyền một số vào đó, có nghĩa là ta đang tạo một mảng với một kích thước ban đầu. Tuy nhiên, khi chúng ta truyền một giá trị có kiểu khác như chuỗi vàoArray()
, có nghĩa là chúng sẽ tạo một mảng với một phần tử có giá trị đó. Ví dụ:
let
students=
new
Array
(
3
)
;
let
scores=
new
Array
(
1
,
2
,
3
)
;
let
colors=
new
Array
(
'blue'
)
;
JavaScript cho phép bạn bỏ qua toán tử new
khi bạn sử dụng hàm Array()
.
Ví dụ:
let
players =
Array
(
)
;
Trong thực tế, chúng ta sẽ hiếm khi sử dụng hàm Array()
để tạo một mảng. Cách ưu tiên hơn để tạo một mảng là sử dụng array literal:
let
arrayName =
[
element1,
element2,
...
]
;
array literal sử dụng dấu ngoặc vuông – square brackets []
để bao bọc danh sách các phần tử, các phần tử trong []
được phân tách bằng dấu phẩy.
Ví dụ:
let
colors =
[
'red'
,
'orange'
,
'pink'
]
;
Để tạo một mảng trống (empty array), chúng ta sử dụng []
mà không chứa phần tử nào bên trong nó:
let
emptyArray =
[
]
;
Truy xuất phần tử trong mảng JavaScript
Mảng JavaScript có phần tử đầu tiên bắt đầu từ chỉ số 0 (index 0), phần tử thứ hai bắt đầu từ index 1, …
Để lấy một phần tử trong một mảng, bạn chỉ định một chỉ mục tương ứng với phần tử muốn lấy trong []
:
arrayName[
index]
Ví dụ:
let
footballClubs =
[
'Real Madrid'
,
'FC Barcelona'
,
'Manchester United'
]
;
console.
log
(
footballClubs[
0
]
)
;
console.
log
(
footballClubs[
1
]
)
;
console.
log
(
footballClubs[
2
]
)
;
Để thay đổi giá trị của một phần tử, bạn gán giá trị đó cho phần tử như sau:
let
footballClubs =
[
'Real Madrid'
,
'FC Barcelona'
,
'Manchester United'
]
;
footballClubs[
1
]
=
'Bayern Munich'
;
console.
log
(
footballClubs)
;
Size array JavaScript
Để lấy size array trong JavaScript hay length array (kích thước mảng) thì chúng ta sử dụng thuộc tính length:
let
footballClubs =
[
'Real Madrid'
,
'FC Barcelona'
,
'Manchester United'
]
;
console.
log
(
footballClubs.
length)
;
Kết quả ví dụ trên trả về length là 3 vì trong mảng footballClubs
có 3 phần tử trong mảng.
Các thao tác cơ bản
Sau khi làm quen với cách tạo mảng, tiếp theo chúng ta sẽ học cách thao tác cơ bản trên mảng. Chúng ta sẽ học các thao tác nâng cao như map()
, filter()
và Reduce()
trong các bài viết khác.
Thêm phần tử vào cuối mảng
Để thêm một phần tử vào cuối mảng JavaScript, bạn sử dụng method push()
:
let
years =
[
2018
,
2019
,
2020
,
2021
]
;
years.
push
(
2022
)
;
console.
log
(
years)
;
Kết quả chúng ta được:
[
2018
,
2019
,
2020
,
2021
,
2022
]
Thêm phần tử vào đầu mảng
Để thêm một phần tử vào đầu mảng JavaScript, bạn sử dụng method unshift()
:
let
years =
[
2018
,
2019
,
2020
,
2021
]
;
years.
unshift
(
2017
)
;
console.
log
(
years)
;
Kết quả:
[
2017
,
2018
,
2019
,
2020
,
2021
]
Xóa một phần tử ở cuối của mảng
Để xóa một phần tử ở cuối của mảng JavaScript, ta sử dụng method pop()
:
let
years =
[
2018
,
2019
,
2020
,
2021
]
;
const
lastElement =
years.
pop
(
)
;
console.
log
(
lastElement)
;
console.
log
(
years)
;
Khi sử dụng method pop()
nó sẽ trả về phần tử đã xóa, đồng thời mảng years
lúc này còn 3 phần tử như kết quả trên.
Xóa một phần tử ở đầu mảng
let
years =
[
2018
,
2019
,
2020
,
2021
]
;
const
firstElement =
years.
shift
(
)
;
console.
log
(
firstElement)
;
console.
log
(
years)
;
Tìm index của một phần tử trong mảng
Để tìm chỉ mục index của một phần tử, ta sử dụng method indexOf()
:
let
years =
[
2018
,
2019
,
2020
,
2021
]
;
const
index =
years.
indexOf
(
2020
)
;
console.
log
(
index)
;
Qua bài viết này mình xin tóm tắt lại những nội dung về array trong JavaScript 😁:
- Trong JavaScript, mảng là một danh sách thứ tự các giá trị. Mỗi giá trị được gọi là một phần tử được chỉ định bởi một chỉ mục index (index bắt đầu bằng 0).
- Mảng có thể chứa các giá trị có kiểu dữ liệu khác nhau.
- Mảng JavaScript có thể co giãn kích thước linh động.