Specific use of ES6 array copy and fill methods copyWithin() and fill()

What do copyWithin() and fill() have in common?

• You need to specify the range of an array instance: including the start index and excluding the end index.
• Using this method will change the array contents but not the size of the array.

Batch copy copyWithin()

• The copyWithin() method is used to copy elements from a specified position in an array to another specified position in the array.
• copyWithin() shallowly copies the contents of the array within the specified range and inserts them starting at the specified index.

grammar

array.copyWithin(target, start, end)

parameter:

Return value: Returns the copied array

Code example:

// Copy the first two elements of the array to the last two elements:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.copyWithin(2, 0);//Banana,Orange,Banana,Orange

// Copy the first two elements of the array to the third and fourth positions:
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
fruits.copyWithin(2, 0, 2); //Banana,Orange,Banana,Orange,Kiwi,Papaya

Fill array method fill()

The fill() method is used to replace the elements of an array with a fixed value.

grammar:

array.fill(value, start, end)

parameter:

Return value: array

Code example:

//Fill "Runoob" to the last two elements of the array:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.fill("Runoob", 2, 4); //[ "Banana", "Orange", "Runoob", "Runoob" ]

// Fill the array with fixed values:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.fill("Runoob");//Runoob,Runoob,Runoob,Runoob

Regarding the calculation method of the index, both methods are the same

• The start index is used to specify the position to start filling, it is optional.
• If no end index is provided, the array is filled to the end.
• Negative indices are counted from the end of the array. You can also think of a negative index as the length of the array plus a positive index.
• Out-of-array, zero-length, and reverse-direction index ranges are silently ignored.

Code example:

const zeroes = [0,0,0,0,0];

//Fill the elements with index greater than or equal to 3 with 6 zeroes.fill(6, 3);//[0,0,0,6,6]
zeroes.fill(0); //Reset //Fill the elements with index greater than or equal to 1 and less than 3 with 7 zeroes.fill(7,1,3); //[0,7,7,0,0]
zeroes.fill(0); //Reset //Fill elements with index greater than or equal to 1 and less than 4 with 8 //(-4+zeroes.length=1) (-1+zeroes.length=4)
zeroes.fill(8,-4,-1); //[0,8,8,8,0]

//Index is too low, ignore zeroes.fill(1,-10,-6);//[0,0,0,0,0]
//Index too high, ignored zeroes.fill(1,10,15);//[0,0,0,0,0]
//Index reversed, ignore zeroes.fill(2,4,2);//[0,0,0,0,0]
//The index part is available, fill the available part zeroes.fill(4,3,10);//[0,0,0,4,4]

This concludes this article on the specific use of ES6 copy and fill methods copyWithin() and fill(). For more information about ES6 copyWithin() and fill(), please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!