9 new array handling functions in ES6

Tram Ho

There are many new extensions for array objects in ES6. In this article, I have some new array handling functions in ES6 such as Array.of() , Array.from() , Array.fill() , Array.find() , Array.findIndex() , Array.copyWithin() , Array.entries() , Array.keys() , and Array.values() . These functions make array handling easier and they replace some of the external library functions.

Array.of ()

To understand this new function, let’s first take a look at an odd little solution in ES5 regarding the use of the Array constructor. Let’s create an array of prices then see the length of the array

When the code runs, it tells us that we have an array of length 5000, right in ES5 if you pass only one value to the array constructor as a number, an array of that size will be created. And ES6 has created Array.of() to create an array, if you convert a value into an array, it will create an array 1 value is that number.

Array.from ()

See how this function works. Below we have set up an array with three values ​​500, 700 and 1000. On the second line, we call Array.from () and pass the first argument and an arrow function as the second argument. By running the code, we see that the price is currently taxed at 5 percent. Array.from () creates an entirely new array based on the prices array, and for each element in the array, the arrow function is called. So basically, we take each price and multiply it by 1.05 denoting the tax rate of 5 percent.

Use Array.from () with 3 arguments

In the previous example, we passed two arguments to the Array.from() function. The first is the array we are working on and the second is a function. In this example, we will pass an array, a function, and an object. Let’s say you have a website listing items for sale, but for every item sold, you pay a listing fee of $ 5. Let’s take a look at this calculation

What is happening here is that the third argument to Array.from() is an object that becomes this in the function. That is why we can get the price and add this.listingfee to give us the total price. Note that when using this technique, we need to use a standard function as opposed to the arrow function for the second argument of Array.from() . This is because arrow functions do not allow association with this value

Array.fill ()

ES6 now provides you an easy way to fill an array with Array.fill() . Let see a quick example.

It seems that this function will override any existing value in all keys of the array with the provided value. There is also an option to pass a second argument to Array.fill() to start at a specific index. Let see how to do it.

By passing the value of 2 as the second argument, we are telling the fill function to start filling the array at index 2. Since the starting index of the array is 0 based on what we know, it is the price. The third value in our array is overwritten with the value 2000. Now, why only pass two arguments when we can pass three arguments ?! Here we will pass another argument to Array.fill() . This will prove that the second argument specifies which index will start and the third argument specifies where to stop. Check it now.

We have added some values ​​to the original array to make it easier to see how it works. Note that when we start to fill in the 2000 value at index 2 and stop at index 4, then the stop is index 3 before 1 value. That is why you only see index 2 and 3 changes.

Array.find ()

Is another new function added to array in ES6. You can use it to easily find a value in an array that meets a certain criteria. See how it works

Note passing an arrow function to the find() function. That function is applied to every element in the array and as soon as a value that meets the criteria is found, that value is returned, it doesn’t continue to return all values ​​that meet the criteria. This is why we only get one result in this example. Let’s walk through this example again to see it in action.

Array.findIndex ()

In addition to Array.find() , we now have the Array.findIndex() function that works the same way but instead of returning values, it returns the index. Let see how it works.

Here we use a regular JavaScript function passed to the .findIndex() function. They simply return the result of the price equal to this . This value is set to 1000, which is the second argument of .findIndex() . We can see that the value of 1000 is at index 5 of the array starting at 0.

Array.copyWithin ()

Array.copyWithin() is an interesting addition in ES6. With it, you can copy values ​​inside the array. It takes a value from one index and places it into another index. Here is an example.

The key to understanding copyWithin() is the meaning of the arguments. The first argument is the index to be overwritten, which is where the data will be copied, and the second is the data to copy from. So in our example, we are saying that we are going to copy the data at index 1 (600) and paste it into index 3 (800). After the program runs, we see that the index 3 is no longer 800, but 600. It is working as expected. There is also the option of passing a third argument to copyWithin() . This third argument tells us how many items to copy. Let see how it works.

The only purpose is 2 or the third value in the array. We start copying from index 0 or the first value in the array. We will copy three consecutive values ​​starting from index 0. Therefore, the result displays exactly 500 at the 2nd index position, followed by two additional copied values ​​of 600 and 700. Indexes 5 and 6 are not affected and therefore they contain initial values ​​of 1000 and 1500.

Array.entries ()

The Array.entries() function is a great addition to the language. It takes an array and creates a list to talk about each item. See it in action

First you create an array simply words . We then call .entries() and its result is an array iterator. Hmm, we can call the .next () function on iterators, let’s call to see it

Great! We can see that we get the first list to talk about arrays. The iterator object is not implemented, so it is set to false . However, value is an array containing two values. At index 0 of that array is the index where Lenovo is, it’s index 0, at index 1 is its own value, which is Lenovo . One more example to better understand

The .entries() function gives us the index / value pair of the array.

Array.keys ()

Array.keys() works in a similar way to Array.entries() except that it only provides array keys. See it in action.

Array.values ​​()

Finally, we have the Array.values() function similar to the previous two examples but provided only values. Watch it work.


The above are new array handling functions in ES6 that contribute to reducing the burden of working with arrays as implemented in ES5. I hope it helps you.

Share the news now

Source : Viblo