[Javascript] Methods you need to know when working with arrays

Tram Ho

Introduce

Hello everyone, I wrote an article about ruby ​​array handling in the previous session, but the problem is that I don’t always do that on the back end.
So today I am going to add a way of handling arrays in javascript so that it has a couple of pairs, saying that, but actually, they are similar to 80% already, so nothing new.
Lets’ go. Let’s create an array first:

1. Length

Will return the total number of elements in the array.

Most people often empty an array by assigning it with an empty array, but is that really effective?

When emptying an array by assigning it to an empty space, the array will simply forget the address of the memory cell to store the value [1, 2, 3] and will receive the memory location to store the value [] => data. The old one is not deleted, but also creates a new array with an empty value.
Assigning the length of the array to zero is different, this will directly work with the memory address to store the value [1, 2, 3] and assign the memory address to be empty.
Tip: The simplest and most effective way is to use .length = 0 to empty an array

2. Push

Add an element at the end of the array.

Tip: Add more elements in the array via Spread syntax (...) – a relatively good feature of ES6 that can replace concat function.

3. Unshift

Add an element to the beginning of the array.

Tip: Add more elements in the array via Spread syntax (...)

4. Pop

Delete one last element of the array and return the newly deleted element.

5. Shift

Removes the first element of the array and also returns the newly deleted element.

6. Join

Join the elements of an array together into a string.

7. Concat

Combine the arrays together:

Tip: It is also possible to use Spread syntax - (...) instead of concat

8. Reverse

Reverse the position of the particles in an array.

Tip: Reverse a string (convert to array -> reverse -> convert string)

9. indexOf and lastIndexOf

indexOf returns the index of the first found element in the array, otherwise it returns -1.
lastIndexOf returns the index of the last found element in the array, otherwise it returns -1.

appletangerinebeefPizzaapplehotdogegg
Index0first2345
indexOf0first2305-first
lastIndexOf4first2345-first

10. Some

Checks if any một phần tử satisfies the condition, returns true .

Above is an abbreviated way of using arrow function in ES6 and the full syntax will be as follows:

11. Every

More strictly, it is every , only true when tất cả các phần tử meet the conditions set forth.

12. Sort

Arrange the elements in the array, if no condition is passed, the default will sort by char code .

Note: Be careful when using sort , remember that this method is based on char code , not value, a typical example is 100> 2 but “100” <“2”.

Tip: Shuffle an array with sort .

13. Filter

The filter() creates a new array based on conditions that return true results from an existing array.

14. Reduce

The reduce() method executes the processing methods for each element in the array and finally summarizes the return results for us.
Let’s look at a simple example:

15. ReduceRight

Similar to reduce, but the elements pass in order from right to left (the last element runs first, the first element runs last).

16. Map

You want to transform the data of each element in an array, or you want to retrieve the properties of the object in the array then use map .
Map allows you to customize the data on each element (add, subtract, divide, add and remove types) to get a new array that has data from the original array but has been processed.

17. Splice

The splice(ịndex, n, m) will remove n elements from the index onwards and also add the desired elements – m .

18. Slice

The slice(start, end) returns a copy from the original array, where:
start: start position
end: end position, the result will not include the end element .

Tip: Get the last n elements in an array

19. forEach

Execute a function callback for each element in the array. We cannot use break and continue in forEach :

Bonus

1. Remove duplicate elements

2. Retrieve the last element in an array

That’s a trick while using the slice I have mentioned above.

3. Straighten an array

In ES2019, one more function is flat()
This function takes an array straighten according to the number we passed.

Refer

https://medium.com/better-programming/20-methods-to-get-to-know-javascript-array-operations-6935e757729b
https://medium.com/@PurpleGreenLemon/simplify-your-javascript-with-these-6-array-methods-db4c278f08c9

Share the news now

Source : Viblo