JavaScript Arrays những điều bạn cần biết

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é 😄😄.

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:

  1. 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.
  2. 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ào Array(), 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()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 😁:

  1. 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).
  2. Mảng có thể chứa các giá trị có kiểu dữ liệu khác nhau.
  3. Mảng JavaScript có thể co giãn kích thước linh động.