Hàm fill() trong JavaScript

• Trần Thị Vân
• 1014
• 28/08/2025

Chức năng của Hàm fill() trong JavaScript

Hàm fill() trong JavaScript dùng để điền một giá trị để thay thế giá trị của một hoặc nhiều phần tử trong mảng.

Cú pháp của Hàm fill() trong JavaScript

mang.fill(giatri,batdau,ketthuc);

mang: Mảng cần thay giá trị.

giatri: giá trị cần điền vào, chỉ có 1 giá trị.

batdau: vị trí bắt đầu cần điền giá trị vào.

ketthuc: vị trí kết thúc, tới vị trí này sẽ không điền nữa, chỉ điền ở vị trí trước vị trí này.

Nếu batdau và ketthuc không điền thì sẽ điền vào tất cả các vị trí trong mảng.

Code Hàm fill() trong JavaScript

<script>
// Điền giá trị 88 vào vị trí 0
document.write("<b>Điền giá trị 88 vào vị trí 0</b><br>"); 
var mang  = [1,2,3,4,5,6,7,8,9];
mang.fill(88,0,1);
// Vòng lặp xem các phần tử trong mảng
mang.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});

// Điền giá trị 88 vào vị trí 0,1,2
document.write("<b>Điền giá trị 88 vào vị trí 0,1,2</b><br>"); 
var manghai  = [1,2,3,4,5,6,7,8,9];
manghai.fill(88,0,3);
// Vòng lặp xem các phần tử trong mảng
manghai.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});

// Điền giá trị 88 vào tất cả vị trí
document.write("<b>Điền giá trị 88 vào tất cả vị trí</b><br>"); 
var mangba  = [1,2,3,4,5,6,7,8,9];
mangba.fill(88);
// Vòng lặp xem các phần tử trong mảng
mangba.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Điền giá trị 88 vào vị trí 0
Vị trí 0: 88
Vị trí 1: 2
Vị trí 2: 3
Vị trí 3: 4
Vị trí 4: 5
Vị trí 5: 6
Vị trí 6: 7
Vị trí 7: 8
Vị trí 8: 9
Điền giá trị 88 vào vị trí 0,1,2
Vị trí 0: 88
Vị trí 1: 88
Vị trí 2: 88
Vị trí 3: 4
Vị trí 4: 5
Vị trí 5: 6
Vị trí 6: 7
Vị trí 7: 8
Vị trí 8: 9
Điền giá trị 88 vào tất cả vị trí
Vị trí 0: 88
Vị trí 1: 88
Vị trí 2: 88
Vị trí 3: 88
Vị trí 4: 88
Vị trí 5: 88
Vị trí 6: 88
Vị trí 7: 88
Vị trí 8: 88

Chạy Thử

Những lưu ý quan trọng khi sử dụng fill() trong JavaScript

Khi sử dụng fill(), điều quan trọng không chỉ là biết cách truyền giá trị vào mảng. Phương thức này có một số đặc điểm dễ gây nhầm lẫn, đặc biệt khi làm việc với mảng đang được sử dụng ở nhiều vị trí trong chương trình.

fill() thay đổi trực tiếp mảng ban đầu

fill() sửa trực tiếp các phần tử trong mảng gốc và trả về chính mảng đó. Vì vậy, nếu mảng đang được lưu trong một biến khác hoặc được sử dụng ở nhiều nơi, những thay đổi này cũng sẽ được nhìn thấy từ các tham chiếu đến cùng mảng.

Ví dụ:

const numbers = [1, 2, 3, 4];

numbers.fill(0);

console.log(numbers);

Sau khi thực hiện, mảng numbers đã bị thay đổi thành [0, 0, 0, 0]. Đây là điểm cần lưu ý nếu bạn muốn giữ lại dữ liệu ban đầu để sử dụng cho các thao tác khác.

Nếu cần tạo một bản sao trước khi thay đổi, có thể sao chép mảng rồi mới gọi fill():

const numbers = [1, 2, 3, 4];
const copiedNumbers = [...numbers];

copiedNumbers.fill(0);

console.log(numbers);
console.log(copiedNumbers);

Cách này giúp dữ liệu trong mảng ban đầu không bị tác động, trong khi bản sao có thể được thay đổi độc lập.

Cẩn thận khi dùng fill() với giá trị là object

Một trường hợp dễ phát sinh lỗi hơn là dùng fill() với object. Khi truyền một object vào phương thức này, các vị trí được điền sẽ cùng tham chiếu đến một object, thay vì tạo ra một object mới cho từng phần tử.

Ví dụ:

const users = Array(3).fill({ active: false });

users[0].active = true;

console.log(users);

Kết quả là cả ba phần tử đều có active bằng true. Nguyên nhân là users[0], users[1] và users[2] đang tham chiếu đến cùng một object.

Nếu mỗi phần tử cần một object riêng, nên tạo object mới cho từng vị trí, chẳng hạn sử dụng Array.from():

const users = Array.from({ length: 3 }, () => ({ active: false }));

users[0].active = true;

console.log(users);

Lúc này, thay đổi users[0] sẽ không làm ảnh hưởng đến các phần tử còn lại. Đây là lưu ý đặc biệt quan trọng khi dùng fill() để khởi tạo mảng chứa object hoặc các cấu trúc dữ liệu có thể thay đổi.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm fill() trong JavaScript.