Classification of JavaScript Array object methods - methods to change the original array

Note: Methods in the experimental stage are not included

List of methods for Array object to change the original array

Interpretation: An array object will modify its own content by calling this class method.

method	describe
copyWithin()	Copies an element from a specified location in an array to another specified location in an array.
fill()	Replaces an element of an array with a fixed value.
pop()	Removes the last element of the array and returns the removed element.
push()	Adds one or more elements to the end of the array and returns the new length.
reverse()	Reverses the order of the elements in the array.
shift()	Removes the first element from an array and returns the value of the first element.
sort()	Sorts the elements of an array.
splice()	Add or remove elements from an array.
unshift()	Adds one or more elements to the beginning of the array and returns the new length.

The method usage of the Array object to change the original array

copyWithin()

Method 浅拷贝Moves part of an array to another location in the same array and returns it without changing the length of the original array.

Shallow copy : Shallow copy only copies the pointer to an object, not the object itself, and the old and new objects still share the same storage space.
Deep copy : Deep copy will create an identical object. The new object does not use the same storage space as the original object, and modifying the new object will not change the original object.

grammar

copyWithin(target)
copyWithin(target, start)
copyWithin(target, start, end)

parameter

name	type	describe
target	integer	Required , the index starts from 0, and the sequence is copied to this position. If negative, target will count from the end. If target is greater than or equal to arr.length, no copy will occur. If target is after start, the copied sequence will be modified to fit arr.length.
start	integer	Optional , the index starts from 0, the starting position of the copied element. If negative, start will count from the end. If start is omitted, copyWithin will start copying from zero.
end	integer	Optional , the index starts from 0, and starts copying the end position of the element. copyWithin will copy to this position, but not including the element at position end. If negative, end will count from the end. If end is omitted, the copyWithin method will copy until the end of the array (defaults to arr.length).

return value

The changed array.

example

[1, 2, 3, 4, 5, 6, 7, 8].copyWithin(2);
// [1, 2, 1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8].copyWithin(1,3);
// [1, 4, 5, 6, 7, 8, 7, 8]
[1, 2, 3, 4, 5, 6, 7, 8].copyWithin(0,3,4);
// [4, 2, 3, 4, 5, 6, 7, 8]

fill()

method fills all elements in an array from the start index to the end index with a fixed value. Does not include terminating index.

grammar

fill(value)
fill(value, start)
fill(value, start, end)

parameter

name	type	describe
value	any type	Mandatory , used to fill the value of the array element. It should be noted that if the parameter of fill is a reference type, the same reference type will be executed.
start	integer	Required , start index, default value is 0. If it is a negative value, it means counting from the end.
end	integer	Required , terminating index, default value is this.length. If it is a negative value, it means counting from the end.

return value

The modified array.

example

[1, 2, 3, 4, 5, 6, 7, 8].fill(2);
// [2, 2, 2, 2, 2, 2, 2, 2]
[1, 2, 3, 4, 5, 6, 7, 8].fill(2,3);
// [1, 2, 3, 2, 2, 2, 2, 2]
[1, 2, 3, 4, 5, 6, 7, 8].fill(2,3,5);
// [1, 2, 3, 2, 2, 6, 7, 8]

const arr = Array(3).fill({
    
    a:1}); // arr:[{}, {}, {}]
arr[0].a = "b"; // arr:[{a:"b"}, {a:"b"}, {a:"b"}]

pop()

method removes the last element from the array and returns the value of that element.

grammar

arr.pop()

parameter

name	type	describe
none	none	none

return value

The element to remove from the array; returns undefined if the array is empty.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.pop(); // 8
// arr:[1, 2, 3, 4, 5, 6, 7]

push()

method adds one or more elements to the end of the array and returns the new length of the array.

grammar

arr.push(element1, …, elementN)

parameter

name	type	describe
elementN	any type	Optional , the element to be added to the end of the array.

return value

The new length attribute value.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.push(); // 8
// arr:[1, 2, 3, 4, 5, 6, 7, 8]
arr.push(9); // 9
// arr:[1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.push(10, 11); // 11
// arr:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

reverse()

method reverses the position of the elements in the array and returns the array. The first element of the array becomes the last, and the last element of the array becomes the first.

grammar

arr.reverse()

parameter

name	type	describe
none	none	none

return value

The reversed array.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.reverse();
// arr:[8, 7, 6, 5, 4, 3, 2, 1]

shift()

method removes the first element from the array and returns the value of that element.

grammar

arr.shift()

parameter

name	type	describe
none	none	none

return value

The element to remove from the array; returns undefined if the array is empty.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.shift(); // 1
// arr:[2, 3, 4, 5, 6, 7, 8]

sort()

The method sorts all elements of an array in place and returns the array. Sorting is not necessarily stable (stable). The default sort order is based on the Unicode encoding position (code points) of the string. Since it depends on the implementation of the execution environment, the time and space complexity of sorting cannot be guaranteed.

grammar

arr.sort([compareFunction])

parameter

name	type	describe
compareFunction	function	Optional , used to specify a function to sort in some order. If omitted, the elements are sorted by the Unicode position of each character of the converted string.

illustrate:

If no compareFunction is specified, the elements are sorted by the Unicode points of the characters of the converted string. For example, "Banana" would be sorted before "cherry". When numbers are sorted from small to large, 9 appears before 80. Because compareFunction is specified, the compared numbers will be converted to strings first, so "80" is earlier than "9" in Unicode order.
If compareFunction is specified, the array is sorted by the value returned by calling the function. That is, a and b are the two elements to be compared:

• If compareFunction(a, b) is less than 0, then a will be arranged before b;
• If compareFunction(a, b) is equal to 0, the relative positions of a and b are unchanged. Note: This behavior is not guaranteed by the ECMAScript standard, and not all browsers will comply (e.g. Mozilla pre-2003 versions)
• If compareFunction(a, b) is greater than 0, b will be sorted before a.
• compareFunction(a, b) must always return the same comparison result on the same input, otherwise the result of the sort will be undefined.

return value

sorted array.

example

const arr = [1, 3, 5, 2, 4, 8, 7, 6];
arr.sort(); // [1, 2, 3, 4, 5, 6, 7, 8]
// arr:[1, 2, 3, 4, 5, 6, 7, 8]

const arr1 = [1, 3, 2, "a", "b", "A", "B"];
arr1.sort(); // [1, 2, 3, 'A', 'B', 'a', 'b']
// arr1:[1, 2, 3, 'A', 'B', 'a', 'b']

const arr2 = [1, 3, 5, 2, 4, 8, 7, 6];
arr2.sort(function(a, b) {
    
    
  return b - a;
}); // [8, 7, 6, 5, 4, 3, 2, 1]
// arr2:[8, 7, 6, 5, 4, 3, 2, 1]

splice()

The method modifies the array by deleting or replacing existing elements or adding new elements in place, and returns the modified content as an array.

grammar

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, …, itemN)

parameter

name	type	describe
start	integer	Required , specifies the starting position of modification (counting from 0). If the length of the array is exceeded, the content is added from the end of the array; if it is a negative value, it indicates the number from the end of the array (counting from -1, which means -n is the last nth element and etc. equal to array.length-n); if the absolute value of the negative number is greater than the length of the array, it means that the starting position is the 0th position.
deleteCount	integer	Optional , the number of array elements to remove. If deleteCount is omitted, or its value is greater than or equal to array.length - start (that is, if it is greater than or equal to the number of all elements after start), then all elements of the array after start will be deleted. If deleteCount is 0 or negative, no elements are removed. In this case, at least one new element should be added.
item1, item2, …	any type	Optional , starting from the start position, the elements to be added to the array. If not specified, splice() will only remove array elements.

return value

Returns an array of removed elements. If only one element was removed, returns an array containing only one element. Returns an empty array if no elements were removed.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.splice(3); // [4, 5, 6, 7, 8]
// arr:[1, 2, 3]

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
arr1.splice(3, 2); // [4, 5]
// arr1:[1, 2, 3, 6, 7, 8]

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
arr2.splice(3, 2, "true", "false"); // [4, 5]
// arr2:[1, 2, 3, 'true', 'false', 6, 7, 8]

unshift()

method adds one or more elements to the beginning of the array and returns the new length of the array.

grammar

arr.unshift(element1, …, elementN)

parameter

name	type	describe
elementN	any type	Optional , the element or elements to add to the beginning of the array.

return value

The new length attribute value.

example

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.unshift("true", "false"); // 10
// arr:['true', 'false', 1, 2, 3, 4, 5, 6, 7, 8]

References:
1. "Array - JavaScript | MDN";
2. "JavaScript Array Object | Novice Tutorial";
3. "JavaScript Array" -- W3School;