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); // mảng có kích thước ban đầu là 3
let scores = new Array(1, 2, 3); // mảng có 3 phần tử bên trong
let colors = new Array('blue'); // mảng có 1 phần tử bên trong

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(); // tạo mảng không cần sử dụng toán tử new

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ụ:

// tạo mảng với các phần tử có kiểu chuỗi
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ó:

// tạo một mảng trống
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]); // 'Real Madrid'
console.log(footballClubs[1]); // 'FC Barcelona'
console.log(footballClubs[2]); // 'Manchester United'

Để 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'];

// đổi giá trị phần tử 2, có index 1
footballClubs[1] = 'Bayern Munich';

console.log(footballClubs); 
// Kết quả: ['Real Madrid', 'Bayern Munich', 'Manchester United']

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); // 3

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); // thêm phần tử vào cuối mảng

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); // thêm phần tử vào đầu mảng

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(); // xóa một phần tử cuối mảng

console.log(lastElement); // 2021
console.log(years); // [2018, 2019, 2020]

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(); // xóa một phần tử ở đầu mảng

console.log(firstElement); // 2018
console.log(years); // [2019, 2020, 2021]

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); // tìm index của phần tử 2020

console.log(index); // 2

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.