revision:
The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.
The fill() method fills specified elements in an array with a value. It overwrites the original array. Start and end position can be specified. If not, all elements will be filled.
array.fill(value)
array.fill(value, start)
array.fill(value, start, end)
Parameters:
value : required. Value to fill the array with. Note all elements in the array will be this exact value: if "value" is an object, each slot in the array will reference that object.
start : optional. Zero-based index at which to start filling, converted to an integer. Negative index counts back from the end of the array — if "start < 0", "start + array.length" is used. If "start < -array.length" or "start is omitted", 0 is used. If "start >= array.length", no index is filled.
end : optional. Zero-based index at which to end filling, converted to an integer. fill() fills up to but not including end. Negative index counts back from the end of the array — if "end < 0", "end + array.length" is used. If e"nd < -array.length", 0 is used. If "end >= array.length" or "end is omitted", array.length is used, causing all indices until the end to be filled. If "end" is positioned before or at start after normalization, no index is filled.
const array1 = [1, 2, 3, 4];
// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]
// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]
console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]
example: using fill() method
<div>
<p id="fill-1"></p>
<p id="fill-2"></p>
<p id="fill-3"></p>
<p id="fill-4"></p>
<p id="fill-5"></p>
<p id="fill-6"></p>
<p id="fill-7"></p>
<p id="fill-8"></p>
<p id="fill-9"></p>
<p id="fill-10"></p>
<p id="fill-11"></p>
</div>
<script>
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]
const array = [1, 2, 3, 4]
const array1 = [1, 2, 3, 4]
const array2 = [1, 2, 3, 4]
const array3 = [1, 2, 3, 4]
const array4 = [1, 2, 3, 4]
const array5 = [1, 2, 3, 4]
const array6 = [1, 2, 3, 4]
const array7 = [1, 2, 3, 4]
const array8 = [1, 2, 3, 4]
const array9 = [1, 2, 3, 4]
document.getElementById("fill-1").innerHTML = "array : " + array;
document.getElementById("fill-2").innerHTML = "array1.fill(4): " + array1.fill(4);
document.getElementById("fill-3").innerHTML = "array2.fill(4, 1): " + array2.fill(4, 1);
document.getElementById("fill-4").innerHTML = "array3.fill(4, 1, 2): " + array3.fill(4, 1,2);
document.getElementById("fill-5").innerHTML = "array4.fill(4, 1, 1): " + array4.fill(4, 1, 1);
document.getElementById("fill-6").innerHTML = "array5.fill(4, 3, 3): " + array5.fill(4, 3, 3);
document.getElementById("fill-7").innerHTML = "array6.fill(4, -3, -2): " + array6.fill(4, -3, -2);
document.getElementById("fill-8").innerHTML = "array7.fill(4, NaN, NaN): " + array7.fill(4, NaN, NaN);
document.getElementById("fill-9").innerHTML = "array8.fill(4, 3, 5): " + array8.fill(4, 3, 5);
document.getElementById("fill-10").innerHTML = "array9.fill(4, 2): " + array9.fill(4, 2);
// A single object, referenced by each slot of the array:
const arr = Array(3).fill({}); // [{}, {}, {}]
console.log(arr[0].hi = "hi");
console.log(arr[1].hi = "hi");
console.log(arr[2].hi = "hi");
// [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
document.getElementById("fill-11").innerHTML = JSON.stringify(arr);
</script>
example: using fill() method to create a matrix of all 1.
<div>
<p id="fill-12"></p>
<p id="fill-13"></p>
<p id="fill-14"></p>
</div>
<script>
const arr_A = new Array(3);
for (let i = 0; i < arr_A.length; i++) {
arr_A[i] = new Array(4).fill(1); // Creating an array of size 4 and filled of 1
}
arr_A[0][0] = 10;
console.log(arr_A[0][0]); // 10
console.log(arr_A[1][0]); // 1
console.log(arr_A[2][0]); // 1
document.getElementById("fill-12").innerHTML = "arrary matrix element: " + arr_A[0][0];
document.getElementById("fill-13").innerHTML = "arrary matrix element: " + arr_A[1][0];
document.getElementById("fill-14").innerHTML = "arrary matrix element: " +arr_A[2][0];
</script>
example: fill() method fills specified elements in an array with a value.
original array :
Fill all array elements with "Kiwi":
Fill the last two array elements with "Kiwi":
<div>
<p>original array :<span id="fill_A"></span></span></p>
<p>Fill all array elements with "Kiwi":</p>
<p id="fill-15"></p>
<p>Fill the last two array elements with "Kiwi":</p>
<p id="fill-16"></p>
</div>
<script>
const fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("fill_A").innerHTML = fruits;
document.getElementById("fill-15").innerHTML = fruits.fill(" Kiwi");
const fruits1 = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("fill-16").innerHTML = fruits1.fill(" Kiwi",2,4);