[Javascript] – Phần 26: Các phương thức của mảng trong JavaScript

1. Độ dài của Mảng (Array length).

Thuộc tính length trả về độ dài (số phần tử) của mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
let size = fruits.length;

2. Chuyển đổi Mảng thành Chuỗi (Array toString())

Phương thức toString() chuyển đổi một mảng thành chuỗi các giá trị được phân cách bằng dấu phẩy:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
document.getElementById("demo").innerHTML = fruits.toString();

Kết quả:

Dưa hấu, Cam, Táo, Xoài

Phương thức join() cũng giống như toString(), nhưng bạn có thể chỉ định dấu phân cách:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Kết quả:

Dưa hấu * Cam * Táo * Xoài

3. Pop và Push

JavaScript Array pop()Phương thức pop() loại bỏ phần tử cuối cùng khỏi mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits.pop();

Phương thức pop() trả về giá trị đã “pop”:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
let fruit = fruits.pop();

JavaScript Array push()

Phương thức push() thêm một phần tử mới vào cuối mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits.push("Dừa");

Phương thức push() trả về chiều dài mới của mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
let length = fruits.push("Dừa");

4. Dịch chuyển Phần tử (Shift và Unshift)

JavaScript Array shift()Phương thức shift() loại bỏ phần tử đầu tiên của mảng và “dịch chuyển” các phần tử còn lại xuống vị trí thấp hơn.

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits.shift();

Phương thức shift() trả về giá trị đã “dịch chuyển”:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
let fruit = fruits.shift();

JavaScript Array unshift()

Phương thức unshift() thêm một phần tử mới vào đầu mảng và “dịch chuyển” các phần tử cũ về vị trí cao hơn:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits.unshift("Chuối");

Phương thức unshift() trả về chiều dài mới của mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
let length = fruits.unshift("Chuối");

5. Thay Đổi Phần tử

Các phần tử của mảng có thể được truy cập bằng cách sử dụng số chỉ mục của chúng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits[0] = "Kiwi";

Bạn cũng có thể sử dụng thuộc tính length để thêm một phần tử mới vào cuối mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits[fruits.length] = "Kiwi";

6. Xóa Phần tử (Array delete())

Cảnh báo: Phần tử của mảng có thể bị xóa bằng toán tử delete. Sử dụng delete sẽ tạo ra những “lỗ” không xác định trong mảng. Thay vào đó, hãy sử dụng pop() hoặc shift():

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
delete fruits[0];

7. Gộp (Concatenate) Mảng (Array concat())

Phương thức concat() tạo ra một mảng mới bằng cách kết hợp (nối) các mảng hiện tại:

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Phương thức concat() không làm thay đổi các mảng hiện tại. Nó luôn trả về một mảng mới. Phương thức này có thể nhận bất kỳ số lượng đối số mảng nào:

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Phương thức concat() cũng có thể nhận chuỗi làm đối số:

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

8. Gộp các mảng con thành 1 mảng (Array flat())

Phương thức này tạo ra một mảng mới bằng cách lấy tất cả các phần tử từ mảng gốc và các mảng con bên trong nó và nối chúng lại với nhau.

Một điểm quan trọng là bạn có thể chỉ định độ sâu cụ thể cho việc làm gộp mảng. Điều này làm cho flat() trở nên linh hoạt, vì bạn có thể quyết định xem bạn muốn gộp mảng một cấp, hai cấp hoặc nhiều hơn.

Độ sâu trong phương thức flat() đề cập đến mức độ bao nhiêu lớp mảng con bạn muốn gộp mảng. Hãy xem xét ví dụ sau:

const myArr = [[1, 2], [3, 4], [5, 6]];

// Gộp mảng mảng với độ sâu là 1
const newArrDepth1 = myArr.flat(1);
// Kết quả: [1, 2, 3, 4, 5, 6]

Ở đây, myArr là một mảng chứa các mảng con [1, 2], [3, 4], và [5, 6]. Khi bạn sử dụng flat(1), nó chỉ gộp mảng một cấp của các mảng con, nghĩa là nó chỉ nối các mảng con trực tiếp vào mảng gốc. Do đó, kết quả là [1, 2, 3, 4, 5, 6].

Nếu bạn thực hiện flat(2):

const newArrDepth2 = myArr.flat(2);
// Kết quả: [1, 2, 3, 4, 5, 6]

Ở đây, vẫn không có sự thay đổi trong kết quả vì mảng gốc chỉ có độ sâu 1. Nếu mảng gốc có các mảng con lồng nhau, việc sử dụng độ sâu sẽ tạo ra sự khác biệt rõ ràng.

Dưới đây là một ví dụ với một mảng con lồng nhau:

const nestedArray = [1, [2, [3, [4, 5]]]];

// Gộp mảng với độ sâu là 1
const flatDepth1 = nestedArray.flat(1);
// Kết quả: [1, 2, [3, [4, 5]]]

// Gộp mảng với độ sâu là 2
const flatDepth2 = nestedArray.flat(2);
// Kết quả: [1, 2, 3, [4, 5]]

// Gộp mảng với độ sâu là 3
const flatDepth3 = nestedArray.flat(3);
// Kết quả: [1, 2, 3, 4, 5]

Ở đây, nestedArray là một mảng chứa mảng con [2, [3, [4, 5]]] và mảng con này cũng chứa mảng con [[3, [4, 5]]]. Khi bạn sử dụng flat(1), nó chỉ gộp mảng một cấp, nối các mảng con trực tiếp vào mảng gốc. Khi bạn sử dụng flat(2), nó gộp mảng hai cấp, nối các mảng con và mảng con của mảng con. Và khi bạn sử dụng flat(3), nó gộp mảng tất cả ba cấp, nối tất cả các mảng con.

9. Thay đổi Mảng (Array splice())

Phương thức splice() được sử dụng để thêm phần tử mới vào mảng:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
fruits.splice(2, 0, "Chanh", "Kiwi");

Tham số đầu tiên (2) xác định vị trí phải thêm vào (splice in). Tham số thứ hai (0) xác định số lượng phần tử phải loại bỏ. Các tham số còn lại (“Chanh”, “Kiwi”) xác định các phần tử mới phải thêm vào.

Phương thức splice() trả về một mảng chứa các phần tử đã bị xóa:

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
const removedItems = fruits.splice(2, 2, "Chanh", "Kiwi");

10. Cắt Mảng (Array slice())

Phương thức slice() cắt ra một phần của mảng và tạo ra một mảng mới:

const fruits = ["Dưa hấu", "Cam", "Chanh", "Táo", "Xoài"];
const citrus = fruits.slice(1);

Phương thức slice() tạo ra một mảng mới và không loại bỏ bất kỳ phần tử nào từ mảng nguồn.

Nếu bạn chỉ định hai đối số như slice(1, 3), nó sẽ chọn các phần tử từ đối số bắt đầu đến (nhưng không bao gồm) đối số kết thúc.

11. Tự động chuyển đổi thành chuỗi (Automatic toString())

JavaScript tự động chuyển đổi một mảng thành chuỗi được phân cách bằng dấu phẩy.

Ví dụ.

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
document.getElementById("demo").innerHTML = fruits.toString();

hoặc

const fruits = ["Dưa hấu", "Cam", "Táo", "Xoài"];
document.getElementById("demo").innerHTML = fruits;

12. Tìm giá trị lớn nhất và nhỏ nhất trong mảng

Hiện tại, không có các hàm tích hợp sẵn trong JavaScript để tìm giá trị lớn nhất hoặc nhỏ nhất trong một mảng.

Bài sau sẽ giải quyết vấn đề này.

13. Sắp xếp Mảng (Sorting Arrays)

Bài tiếp theo của hướng dẫn này cũng sẽ giải quyết vấn đề sắp xếp mảng.