Các phương thức xử lý mảng trong JavaScript

Nhóm phương thức sắp xếp và đảo ngược mảng trong JavaScript

Trong JavaScript, để sắp xếp và đảo ngược thứ tự phần tử trong mảng, chúng ta có các phương thức như sort(), localeCompare() và reverse(). Những phương thức này giúp chúng ta tổ chức dữ liệu trong mảng một cách linh hoạt theo nhu cầu sử dụng.

Sắp xếp mảng (sort(), localeCompare())

sort(): Sắp xếp phần tử trong mảng theo thứ tự tăng hoặc giảm

• Phương thức sort() sắp xếp mảng tại chỗ, nghĩa là nó thay đổi trực tiếp mảng gốc.
• Mặc định, sort() sắp xếp theo thứ tự bảng mã Unicode, nghĩa là nó sẽ sắp xếp số như chuỗi (ví dụ: 100 đứng trước 2).

Ví dụ sắp xếp chuỗi theo thứ tự bảng chữ cái:

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

console.log(fruits); // ["Chuối", "Dưa hấu", "Táo", "Xoài"]

Ví dụ sắp xếp số nhưng kết quả không như mong muốn:

let numbers = [100, 2, 5, 20, 10];
numbers.sort();

console.log(numbers); // [10, 100, 2, 20, 5] (sai vì sắp xếp theo chuỗi)

Cách sửa lỗi khi sắp xếp số:

• Cung cấp một hàm so sánh trong sort() để sắp xếp số theo giá trị thực.

Cú pháp:

array.sort((a, b) => a - b); // Sắp xếp tăng dần
array.sort((a, b) => b - a); // Sắp xếp giảm dần

Ví dụ sắp xếp số theo giá trị thực:

let numbers = [100, 2, 5, 20, 10];

numbers.sort((a, b) => a - b); // Sắp xếp tăng dần
console.log(numbers); // [2, 5, 10, 20, 100]

numbers.sort((a, b) => b - a); // Sắp xếp giảm dần
console.log(numbers); // [100, 20, 10, 5, 2]

Ưu điểm: Sắp xếp linh hoạt bằng cách cung cấp hàm so sánh.
Nhược điểm: Thay đổi mảng gốc, cần sao chép mảng nếu không muốn mất dữ liệu ban đầu.

localeCompare(): Sắp xếp mảng chứa chuỗi theo bảng chữ cái và hỗ trợ đa ngôn ngữ

• Khi làm việc với chuỗi, đặc biệt là tiếng Việt hoặc các ngôn ngữ có dấu, sử dụng sort() thông thường có thể không đúng.
• localeCompare() giúp sắp xếp đúng theo thứ tự bảng chữ cái.

Ví dụ:

let names = ["Nguyễn", "Anh", "Bình", "Đức"];

names.sort((a, b) => a.localeCompare(b));

console.log(names); // ["Anh", "Bình", "Đức", "Nguyễn"]

Ưu điểm: Hỗ trợ nhiều ngôn ngữ, sắp xếp đúng thứ tự chữ cái.
Nhược điểm: Có thể chậm hơn sort() thông thường khi làm việc với dữ liệu lớn.

Đảo ngược mảng (reverse())

reverse(): Đảo ngược thứ tự phần tử trong mảng

• Phương thức reverse() đảo ngược mảng tại chỗ, tức là thay đổi trực tiếp mảng gốc.
• Dùng khi cần sắp xếp theo thứ tự ngược lại hoặc đảo lộn thứ tự phần tử.

Ví dụ:

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers); // [5, 4, 3, 2, 1]

Kết hợp sort() và reverse() để sắp xếp giảm dần

• Khi muốn sắp xếp giảm dần, có thể kết hợp sort() và reverse().

Ví dụ:

let numbers = [10, 5, 8, 3, 1];

numbers.sort((a, b) => a - b).reverse(); // Sắp xếp tăng dần rồi đảo ngược

console.log(numbers); // [10, 8, 5, 3, 1]

Ưu điểm: Đơn giản, nhanh chóng.
Nhược điểm: Thay đổi trực tiếp mảng gốc.

Nhóm phương thức kết hợp và chuyển đổi mảng trong JavaScript

Trong JavaScript, có nhiều phương thức giúp kết hợp (gộp) và chuyển đổi mảng thành chuỗi để dễ dàng xử lý dữ liệu. Dưới đây là chi tiết về các phương thức này.

Gộp mảng (Nối nhiều mảng với nhau)

Khi cần kết hợp nhiều mảng thành một, chúng ta có thể sử dụng:

• concat()
• Toán tử spread (...)

concat(): Nối hai hoặc nhiều mảng lại với nhau

• Phương thức concat() không thay đổi mảng gốc, mà trả về một mảng mới.
• Có thể kết hợp nhiều mảng cùng lúc.

Cú pháp:

let newArray = array1.concat(array2, array3, ...);

Ví dụ:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let combined = array1.concat(array2);

console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(array1); // [1, 2, 3] (Mảng gốc không thay đổi)
console.log(array2); // [4, 5, 6] (Mảng gốc không thay đổi)

Ưu điểm: Giữ nguyên mảng gốc, không làm thay đổi dữ liệu ban đầu.
Nhược điểm: Không linh hoạt bằng spread operator trong một số trường hợp.

Spread operator (...): Toán tử trải mảng để kết hợp mảng

• ... là một cách nhanh hơn và linh hoạt hơn concat().
• Có thể kết hợp mảng và thêm phần tử tùy ý.
• Không thay đổi mảng gốc và có thể dùng để sao chép mảng.

Ví dụ:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let combined = [...array1, ...array2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

Kết hợp mảng với phần tử mới:

let numbers = [1, 2, 3];
let newNumbers = [0, ...numbers, 4, 5];

console.log(newNumbers); // [0, 1, 2, 3, 4, 5]

array.join(separator);

let fruits = ["Táo", "Chuối", "Xoài"];

let result = fruits.join();

console.log(result); // "Táo,Chuối,Xoài"

Ví dụ với dấu cách (" "), dấu gạch ngang ("-") hoặc ký tự khác:

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.join(" "));  // "1 2 3 4 5"
console.log(numbers.join("-"));  // "1-2-3-4-5"
console.log(numbers.join(" | ")); // "1 | 2 | 3 | 4 | 5"

Ưu điểm: Linh hoạt, có thể tùy chỉnh dấu phân cách.
Nhược điểm: Chỉ hoạt động trên mảng một chiều, mảng nhiều chiều có thể cho kết quả không mong muốn.

toString(): Chuyển mảng thành chuỗi (ít được sử dụng)

• toString() tự động chuyển tất cả phần tử trong mảng thành chuỗi và ngăn cách bằng dấu phẩy (",").
• Không thể tùy chỉnh dấu phân cách như join().

Ví dụ:

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.toString()); // "1,2,3,4,5"

let arr = ["A", "B", "C"];

console.log(arr.toString());  // "A,B,C" (luôn dùng dấu phẩy)
console.log(arr.join("-"));   // "A-B-C" (có thể chọn ký tự phân tách)

array.slice(start, end);

let numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(1, 4)); // [20, 30, 40] (lấy từ index 1 đến 3)
console.log(numbers.slice(2)); // [30, 40, 50] (lấy từ index 2 đến hết)
console.log(numbers.slice(-3)); // [30, 40, 50] (lấy 3 phần tử cuối)
console.log(numbers); // [10, 20, 30, 40, 50] (mảng gốc không thay đổi)

array.copyWithin(target, start, end);

let arr = [1, 2, 3, 4, 5];

// Sao chép phần từ index 2 -> 4 vào vị trí index 0
console.log(arr.copyWithin(0, 2, 4)); // [3, 4, 3, 4, 5]

let arr2 = [10, 20, 30, 40, 50];
console.log(arr2.copyWithin(1, 3)); // [10, 40, 50, 40, 50]

array.fill(value, start, end);

let arr = [1, 2, 3, 4, 5];

// Gán tất cả phần tử thành 0
console.log(arr.fill(0)); // [0, 0, 0, 0, 0]

// Gán từ index 1 đến 3 thành 9
console.log(arr.fill(9, 1, 3)); // [0, 9, 9, 0, 0]

let arr = [1, 2, 3];

// Dùng forEach() khi chỉ muốn duyệt mảng
arr.forEach(num => console.log(num * 2));

// Dùng map() khi cần tạo mảng mới
let newArr = arr.map(num => num * 2);
console.log(newArr); // [2, 4, 6]

let numbers = [1, 2, 3, 4, 5];
numbers = numbers.filter(num => num !== 3); // Xóa số 3 khỏi mảng
console.log(numbers); // [1, 2, 4, 5]