JavaScript is a very flexible language that provides many ways to operate arrays to facilitate developers to operate arrays. However, some arrays operate not in line with our expectations and are prone to unexpected results, especially those that may change the original array. Therefore, to avoid this, this article will introduce which native array methods can change the original array and my suggestions on how to better use array methods.
Methods that do not modify the original array
Before discussing which array methods will change the original array, let's first look at which methods will not change the original array. Here are the commonly used array methods and whether the original array will be changed.
Add, search, iterate
- concat(): Returns the new array, the original array remains unchanged
- includes(): Query whether the element exists, the original array remains unchanged
- indexOf(): Query the element position, the original array remains unchanged
- join(): Returns the new string, the original array remains unchanged
- lastIndexOf(): Query the element position, the original array remains unchanged
- slice(): Returns the new array, the original array remains unchanged
- toString(): Returns the string, the original array remains unchanged
- values(): Returns the iterative object, the original array remains unchanged
Operations that do not change the original array
- filter(): Filter out the new array, the original array remains unchanged
- find(): Query the element and return it, the original array remains unchanged
- findIndex(): Query the element position and return, the original array remains unchanged
- map(): Returns the new array, the original array remains unchanged
- reduce(): Returns the result of an accumulator calculation, the original array remains unchanged
- some(): Determine whether there are any elements that meet the conditions, and the original array remains unchanged
These methods allow you to get the information you want from the array or create a new array or object. Using these methods is very helpful and safe when you want to keep the original array.
Methods that modify the original array
push() and unshift()
Although JavaScript provides many methods for array operation,push()andunshift()Often used. They add an element to the array,push()Add at the end,unshift()Add at the beginning. However, instead of returning new arrays or implementing simple search functions like other methods, they directly modify the original array.
let numArr = [1, 2, 3]
(4)
(numArr) // [1, 2, 3, 4]
let nameArr = ['Tom', 'Jerry']
('Lisa') // 3
(nameArr) // ['Lisa', 'Tom', 'Jerry']
pop() and shift()
andpush()、unshift()Similar methods,pop()The method deletes the last element from the end of the array and returns the value of that element. andshift()The method is to delete the first element from the beginning and return the value of the element. These two methods modify the original array and return the deleted elements. Here are some examples:
let numArr = [1, 2, 3] () (numArr) // [1, 2] let nameArr = ['Tom', 'Jerry'] () (nameArr) // ['Jerry']
When you use these two methods, be careful not to forget to get the value of the deleted element.
reverse()
reverse()The method inverts all elements in the array in sequence and returns a new modified array, but changes on the original array.
let numArr = [1, 2, 3] () (numArr) // [3, 2, 1]
While this method can be used to flip an array, if you want to keep the original array, you need to call it in advance on it.slice()method to create a copy.
sort()
sort()The method sorts the array and returns the modified array. By default, it sorts strings in ascending order and numbers in ascending order. Similarly, this method also makes changes to the original array.
let numArr = [9, 2, 5, 1] () (numArr) // [1, 2, 5, 9]
However, if you sort the array of numbers, usesort()Its default behavior needs to be paid attention to. For example, the following is an example of sorting arrays of numbers in order from large to small.
let numArr = [9, 2, 5, 1]
(function(a, b) {
return b - a;
});
(numArr); // [9, 5, 2, 1]Please note thatsort()There are other uses of the method, please refer to the relevant information for more information.
splice()
In addition to adding and removing a single element,splice()Multiple elements can also be added, removed, or replaced. The return value of this method is a new array composed of deleted elements, and the original array will also be modified.
let numArr = [1, 2, 3, 4] (2, 1, 'three') (numArr) // [1, 2, "three", 4]
splice()The first parameter of the method indicates which position to start the operation, the second parameter indicates that several elements are deleted at that position, and the optional parameters afterwards indicate that elements are added to the array. These operations will change the original array, so be extra careful.
Best Practices
Although sometimes we need to modify the original array, it is best not to directly manipulate the original array. useconcat()、slice()andmap()Methods, etc., can create new arrays, and can effectively solve the problem.
let numArr = [1, 2, 3]
let incrementedArr = (function(num) {
return num + 1;
});
(incrementedArr); // [2, 3, 4]
(numArr); // [1, 2, 3]When using original arrays, try to avoid these methods that modify the array, and consider copying or backing up the original array to avoid unnecessary changes.
In addition, it can also be used()、()etc. create new objects instead of directly modifying the source object. This avoids difficulties tracing object states in your application and also helps make your code more modular and easy to maintain.
in conclusion
JavaScript provides many methods for array operations, but some of them will modify the original array. It is important for front-end developers to understand which array manipulation methods may change the original array. In practical applications, misuse of these methods that modify the original array may lead to unpredictable and flawed results. Therefore, it is recommended to better choose methods that can create new arrays when using original arrays, and be careful to back up the original arrays to avoid unnecessary changes.
I hope that through the introduction of this article, readers can gain insight into which array native methods will change the original array. Although there are not many methods involved, their functions and application scenarios are significantly different and have important practical value. In daily development, developers should choose the right method according to their specific needs, thereby maximizing the powerful features provided by JavaScript.
This is the article about avoiding these JavaScript array methods that will change the original array JavaScript array methods to make development smooth. For more related JavaScript array methods, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!