• An in-depth Exploration of the array.fill () Function
  • By Keith Dawson
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: niayyy
  • Proofreader: Siva, Long Xiong

The array.fill () function is simple

Over the years, Javascript Array global objects have added a number of useful functions that give developers more options when writing array-related code. These functions have many advantages, most notably that in the past, developers had to implement complex logic to perform various array operations themselves, but now all these new functions eliminate the need to implement their own functions. This article explores one of the useful array functions: the ‘fill()’ function.

Description of the function

The fill() function provides the ability to change all elements in a given range of arrays to a specific value. This function not only modifies the original array directly, but also returns the new array. So it is important to remember that if you choose to use fill() without first saving a deep copy of the original array, you will not be able to maintain the original array. It is also worth pointing out that this function does not change the length of the original array.

The fill() function accepts a maximum of three arguments, the first of which is mandatory and the second and third optional. The first argument can be any desired value, and the second and third arguments are indexed from zero. If one of these arguments is negative, it is evaluated from the end of the Array, meaning that argument -3 equals the length of the Array plus -3 (array.length + -3).

The first argument is value. This parameter can be any value and will be used to fill the specified range of the new array with the same value. The second argument is start. This parameter is the start index of the value range, and the range will include the start index bit. This parameter is optional and defaults to 0 if not specified, meaning that the array will be populated from the first value if not specified. The third argument is end. This parameter is the end index of the value range, and the range will not include the value at the index. This parameter is optional and defaults to the Array length (array.length) if not specified, which is padded to the end of the Array.

The original value

This case overrides general function behavior, so let’s look at some examples of how the fill() function works in practice. The following example specifies the original argument value:

var array = [1.2.3.4.5];
array.fill(0);
// array: [0, 0, 0, 0, 0]
Copy the code

The fill() function is called with an argument of 0. This function call is equivalent to fill(0, 0, 5), taking into account the default values of the optional arguments. This means that the specified value is padded to include the entire array from beginning to end.

The code example illustrates the earlier information about how the fill() function does not change the array length. Although the padding range is not specified, the padding range defaults to the actual size of the array, and this function populates each item in the array with the specified value.

Original value, positive initial index value

The following example demonstrates specifying the original value parameter value and the positive start parameter value:

var array = [1.2.3.4.5];
array.fill(0.2);
// array: [1, 2, 0, 0, 0]
Copy the code

Fill () is called with arguments 0 and 2. Considering the default values of the optional arguments, this function call is equivalent to fill(0, 2, 5). This means that the specified value is padded from index 2 to the end of the array.

Original value, negative initial index value

The following example demonstrates specifying the original value parameter value and the negative start parameter value:

var array = [1.2.3.4.5];
array.fill(0.2 -);
// array: [1, 2, 3, 0, 0]
Copy the code

Fill () is called by passing in arguments 0 and -2, which is equivalent to fill(0, 3, 5), taking into account the conversion of the default and negative index values of the optional arguments. This means that the specified value is padded from index 3 to the end of the array. When specifying a negative start parameter, note that if this value causes the start parameter plus the array length to remain less than zero, fill() ignores the starting index value and fills the array with the specified value from the beginning of the array.

Original value, positive start index value, positive end index value

The following example demonstrates specifying the original value parameter value and the positive start and end parameter values:

var array = [1.2.3.4.5];
array.fill(0.2.4);
// array: [1, 2, 0, 0, 5]
Copy the code

The fill() function is called with arguments 0, 2, and 4, specifying the range of values to be filled starting at index 2 and ending at index 3, so that only the two items starting at index 2 fill the specified value. One thing to note when specifying a positive end value is that if the value is greater than the array length, the fill() function ignores the end value and fills the specified value to the end of the array.

Original value, positive start index value, negative end index value

The following example demonstrates specifying the original value parameters value, positive start, and negative end values:

var array = [1.2.3.4.5];
array.fill(0.2.- 3);
// array: [1, 2, 3, 4, 5]
Copy the code

The fill() function is called with arguments 0, 2, and -3. This function call is equivalent to fill(0, 2, 2), taking into account the conversion of negative index values. This code example is the first time in this article that we have seen the start and end parameters have the same value. Since the two index parameters have the same value, the index-specific value does not populate any array items, so the array state is exactly the same as it was before the function was executed.

When using the fill() function, the result array is exactly the same as it was before the function was executed in any of the following cases: the end parameter value is less than the start parameter value; The start parameter value is equal to or greater than the array length; Or the value of the end argument is equal to or less than 0.

Object values

The following example demonstrates specifying the object value parameter value:

var array = [1.2.3];
array.fill({ a: 1.b: 2 });
// array: [{ a: 1, b: 2 }, { a: 1, b: 2 }, { a: 1, b: 2 }]
Copy the code

The fill() function is called with the object value argument value. Considering the default values of the optional arguments, this function call is equivalent to fill({a: 1, b: 2}, 0, 3). This means that the padding range for a particular value is the entire array from beginning to end. Although the previous examples used the original value 0 as the value parameter value, this code example shows that object values can also be used to populate the specified range of arrays when necessary.

experience

There are some lessons to be learned from this article about the fill() function. The first is that fill() does not change the size of the original array regardless of what values start and end specify as arguments. The second is that in addition to returning a modified array, fill() directly modifies the original array. This means that if for some reason you need to maintain the state of the original array, you need to make a deep copy of the original array before executing the function.

Another takeaway from this article is that you no longer need to implement any type of custom logic to replace all or part of an array with a single value. In this case, the first thought is to implement such logic through a for loop, which certainly works well, but is not as rigorous or easy to read as using the fill() function. A similar example might be to create an array of a specific size and set default values for each index. The first thing that comes to mind might be to create an array and then use a for loop to populate the array with the default values. However, using fill() can be very simple, such as the following statement: Array(10).fill(0).

The last thing you need to know about the fill() function is how to deal with the object passed as the value of the value argument. When you pass any value as the value parameter value, all the padding items in the array will be exactly the same. For objects, all padding items will point to exactly the same object. This means that updating any populated object in the array will update the populated object in the other array. The following example shows this functionality in action:

var array1 = [1.2.3];
array1.fill([1.2.3]);

// array1: [[1, 2, 3], [1, 2, 3], [1, 2, 3]]

array1[0].fill(0);

// array1: [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

var array2 = [1.2.3];
array2.fill({ a: 1.b: 2});

// array2: [{ a: 1, b: 2 }, { a: 1, b: 2 }, { a: 1, b: 2 }]

array2[1].a = 3;
array2[2].b = 4;

// array2: [{ a: 3, b: 4 }, { a: 3, b: 4 }, { a: 3, b: 4 }]
Copy the code

In the case of the first array, the original array fills three arrays, and then the first of those three arrays is filled with zeros. This causes the other two arrays to be filled with zeros. In the case of the second array, the original array fills three objects, and the second and third objects are all changed in the same way, causing all three objects to update their values at the same time. Of course, as mentioned earlier, this is the result of each populated array or object pointing to the exact same object when the array is populated. Changing any array or object is equivalent to changing a single array or object that is actually referenced.

conclusion

Thank you for reading this article. I hope that my exploration of the fill() function on JavaScript Array global objects has yielded a lot of useful information, and that you can use this knowledge to your advantage in your own code. If you have any further questions about this function, you are advised to refer to the link below for all information related to the fill() function. Stay tuned for more articles on interesting and useful functions on JavaScript Array global objects in the future.

The related resources

Javascript Array. The fill () function

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.