Cách hoạt động của hằng số mảng (Array Const) trong JavaScript

Các thao tác hợp lệ và không hợp lệ với mảng const trong JavaScript

Trong JavaScript, khi khai báo một mảng bằng const, bạn có thể thực hiện một số thao tác mà không vi phạm quy tắc const, nhưng cũng có một số thao tác sẽ gây lỗi. Dưới đây là danh sách chi tiết các thao tác hợp lệ và không hợp lệ.

Hợp lệ (Có thể thực hiện được)

Mặc dù const ngăn không cho gán lại toàn bộ mảng, nhưng vẫn cho phép thay đổi nội dung bên trong. Các thao tác hợp lệ bao gồm:

Thêm phần tử vào mảng (push(), unshift())

Bạn có thể thêm phần tử vào cuối hoặc đầu mảng bằng push() và unshift().

const numbers = [1, 2, 3];

// Thêm phần tử vào cuối mảng
numbers.push(4);
console.log(numbers); // Output: [1, 2, 3, 4]

// Thêm phần tử vào đầu mảng
numbers.unshift(0);
console.log(numbers); // Output: [0, 1, 2, 3, 4]

Không gây lỗi vì push() và unshift() chỉ thay đổi nội dung bên trong mảng.

Xóa phần tử khỏi mảng (pop(), shift(), splice())

Bạn có thể xóa phần tử bằng các phương thức pop(), shift(), và splice().

const fruits = ["Apple", "Banana", "Cherry", "Mango"];

// Xóa phần tử cuối cùng
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Xóa phần tử đầu tiên
fruits.shift();
console.log(fruits); // Output: ["Banana", "Cherry"]

// Xóa phần tử ở vị trí bất kỳ
fruits.splice(1, 1);  // Xóa phần tử tại index 1
console.log(fruits); // Output: ["Banana"]

Không gây lỗi vì các phương thức này chỉ thay đổi nội dung bên trong mảng.

Thay đổi giá trị phần tử (array[index] = value)

Bạn có thể thay đổi giá trị của từng phần tử bằng cách gán giá trị mới cho một chỉ mục cụ thể.

const scores = [10, 20, 30];

// Thay đổi giá trị của phần tử tại index 1
scores[1] = 50;
console.log(scores); // Output: [10, 50, 30]

// Thay đổi giá trị của phần tử đầu tiên
scores[0] = 100;
console.log(scores); // Output: [100, 50, 30]

Không gây lỗi vì chúng ta chỉ cập nhật giá trị của phần tử trong mảng, không thay đổi tham chiếu của biến scores.

Không hợp lệ (Sẽ gây lỗi)

Các thao tác dưới đây sẽ vi phạm quy tắc của const và gây lỗi vì chúng cố gắng thay đổi tham chiếu của biến const.

Gán lại mảng mới (array = [new values])

Không thể gán lại toàn bộ mảng mới cho biến đã khai báo bằng const.

const numbers = [1, 2, 3];

// Cố gắng gán một mảng mới sẽ gây lỗi
numbers = [4, 5, 6]; //  Lỗi: Assignment to constant variable

Lỗi xảy ra vì const không cho phép thay đổi tham chiếu của biến numbers.

Xóa toàn bộ mảng bằng array = []

Bạn không thể xóa toàn bộ mảng bằng cách gán nó thành một mảng rỗng.

const animals = ["Cat", "Dog", "Rabbit"];

// Cố gắng xóa toàn bộ mảng
animals = []; //  Lỗi: Assignment to constant variable

Lỗi xảy ra vì const không cho phép thay đổi tham chiếu của biến animals.

Cách thay thế nếu cần gán lại mảng

Nếu bạn muốn thay đổi toàn bộ mảng, hãy sử dụng let thay vì const:

let numbers = [1, 2, 3];
numbers = [4, 5, 6]; //  Hợp lệ vì sử dụng let
console.log(numbers); // Output: [4, 5, 6]

Cách thay thế nếu cần xóa toàn bộ mảng

Bạn không thể gán array = [], nhưng bạn có thể xoá toàn bộ phần tử trong mảng mà không thay đổi tham chiếu bằng cách sử dụng splice() hoặc length = 0:

Cách 1: Dùng splice() để xóa toàn bộ phần tử

const animals = ["Cat", "Dog", "Rabbit"];

// Xóa tất cả phần tử nhưng vẫn giữ nguyên tham chiếu
animals.splice(0, animals.length);
console.log(animals); // Output: []

Không gây lỗi vì splice() chỉ thay đổi nội dung bên trong mảng.

Cách 2: Gán length = 0 để xóa tất cả phần tử

const colors = ["Red", "Green", "Blue"];

// Xóa tất cả phần tử
colors.length = 0;
console.log(colors); // Output: []

Không gây lỗi vì length = 0 chỉ thay đổi kích thước của mảng, không thay đổi tham chiếu của biến.

So sánh const, let, và var khi khai báo mảng trong JavaScript

Khi khai báo mảng trong JavaScript, có thể sử dụng ba từ khóa: const, let, và var. Mỗi từ khóa có những đặc điểm riêng về khả năng thay đổi nội dung mảng, gán lại giá trị và phạm vi hoạt động. Dưới đây là so sánh chi tiết giữa chúng.

Bảng so sánh const, let, và var khi khai báo mảng

const – Hằng số, không thể gán lại nhưng có thể thay đổi nội dung

Khi khai báo một mảng bằng const:
Có thể thay đổi nội dung của mảng bằng cách thêm, xóa hoặc sửa phần tử.
Không thể gán lại một mảng mới, tức là không thể thay đổi tham chiếu của biến.

Ví dụ:

const numbers = [1, 2, 3];

//  Có thể thay đổi nội dung của mảng
numbers.push(4);
console.log(numbers); // Output: [1, 2, 3, 4]

numbers[0] = 100;
console.log(numbers); // Output: [100, 2, 3, 4]

//  Không thể gán lại một mảng mới
numbers = [10, 20, 30]; // Lỗi: Assignment to constant variable

Lỗi xảy ra vì const không cho phép thay đổi tham chiếu của biến numbers.

Phạm vi hoạt động (Block Scope)

• const có phạm vi trong khối {}.
• Không thể khai báo lại cùng một tên biến trong cùng một khối.

Ví dụ:

{
    const colors = ["Red", "Green"];
}
// console.log(colors); //  Lỗi: colors is not defined (biến chỉ tồn tại trong block)

let – Có thể thay đổi nội dung và gán lại mảng mới

Khi khai báo một mảng bằng let:
Có thể thay đổi nội dung của mảng (thêm, xóa, chỉnh sửa phần tử).
Có thể gán lại một mảng mới bằng cách thay đổi tham chiếu của biến.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

//  Có thể thay đổi nội dung của mảng
fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]

// Có thể gán lại một mảng mới
fruits = ["Orange", "Grapes"];
console.log(fruits); // Output: ["Orange", "Grapes"]

Phạm vi hoạt động (Block Scope)

• let cũng có phạm vi trong khối {}, giống như const.
• Không thể khai báo lại cùng một tên biến trong cùng một khối.

Ví dụ:

{
    let animals = ["Dog", "Cat"];
}
// console.log(animals); //  Lỗi: animals is not defined (biến chỉ tồn tại trong block)

var – Có thể thay đổi nội dung và gán lại mảng mới nhưng có phạm vi rộng hơn

• Khi khai báo một mảng bằng var:
• Có thể thay đổi nội dung của mảng.
• Có thể gán lại một mảng mới.

Phạm vi hoạt động (Function Scope) thay vì Block Scope, nghĩa là biến có thể bị truy cập bên ngoài {} nếu không nằm trong hàm.

Ví dụ:

var cities = ["Hanoi", "Saigon", "Danang"];

//  Có thể thay đổi nội dung của mảng
cities.push("Hue");
console.log(cities); // Output: ["Hanoi", "Saigon", "Danang", "Hue"]

// Có thể gán lại một mảng mới
cities = ["London", "New York"];
console.log(cities); // Output: ["London", "New York"]

Phạm vi hoạt động (Function Scope)

• var không bị giới hạn trong block {}, mà chỉ bị giới hạn trong function.
• Có thể khai báo lại cùng một tên biến trong cùng phạm vi.

Ví dụ:

{
    var numbers = [1, 2, 3];
}
console.log(numbers); //  Không lỗi, vẫn truy cập được ["1, 2, 3"]

const numbers = [1, 2, 3];

//  Có thể thay đổi nội dung mảng
numbers.push(4);
numbers[0] = 100;

console.log(numbers); // Output: [100, 2, 3, 4]

//  Không thể gán lại mảng mới
numbers = [10, 20, 30]; // Lỗi: Assignment to constant variable