ES6 Array methods

Some new array methods are introduced in ES6, such as Array.of(), Array.from(), and many more.

The array methods introduced in ES6 are tabulated below.

Let us understand these new array methods.

Array.from()

The general function of this method is to enable new array creation from an array-like object. It converts array-like values and iterable values (such as set and map) into arrays.

Array.from(object, mapFunction, thisValue)

Let's understand the parameter values of this function.

object: This parameter value is always required. It is the object to convert to an array.

mapFunction: It is optional. It is a map function to call on each item of the array.

thisValue: It is also optional. It is a value to use as this when executing the mapFunction.

let name = Array.from('rookienerd')

console.log(name)

Array.of()

In ES5, when a single numeric value gets passed in the array constructor, then it will create an array of that size. Array.of() is a new way of creating an array which fixes this behavior of ES5.

By using this method, if you are creating an array only with a single numeric value, then it will create an array only with that value instead of creating the array of that size.

let name = Array.of(42)

console.log(name)
console.log(name.length)

Array.prototype.copyWithin()

It is an interesting method that is added to the library of array methods in ES6. This method copies the part of an array to a different location within the same array.

It returns the modified array without any modification in its length.

array.copyWithin(target, start, end)

Let's understand the parameters of this method.

target: It is always required. It is the index position to copy the elements.

start: It is an optional parameter. It refers to the index position to start copying the elements. Its default value is 0. If the value of this parameter is negative, then start will be counted from the end.

end: It is also an optional parameter. It refers to the index position to stop copying the elements. Its default value is the length of the array.

Let's understand the example of this method with various possibilities.

const num = [1,2,3,4,5,6,7,8,9,10];
const num1 = [1,2,3,4,5,6,7,8,9,10];
const num2 = [1,2,3,4,5,6,7,8,9,10];
console.log(num.copyWithin(1,3,5));
console.log(num1.copyWithin(1,3)); //omitting the parameter end
console.log(num2.copyWithin(1)); //omitting the parameters start and end

Array.prototype.find()

It is another new function of ES6. It finds a value from an array, based on the specific criteria that are passed to this method. It returns the first element value that satisfies the given condition.

array.find(callback(currentValue, index, arr),thisValue)

Let's understand the parameters of this method.

callback: It represents the function that executes every element.

currentValue:I t is the required parameter. It is the value of the current element.

index: it is an optional parameter. It is the array index of the current element.

arr: It is also an optional parameter. It is the array on which the find() operated.

thisValue: It is optional. It is a value that is used as this while using callback.

var arr=[5,22,19,25,34];  
var result=arr.find(x=>x>20);  
console.log(result);

Array.prototype.findIndex()

The Array.prototype.findIndex() method returns the index of the first element of the given array that satisfies the given condition. If no element satisfies the condition, then it returns -1.

array.findIndex(callback(value,index,arr),thisArg)

var arr=[5,22,19,25,34];  
var result=arr.findIndex(x=>x>20);  
console.log(result)

Array.prototype.entries()

This method returns an array iterator object, which can be used to loop through keys and values of arrays.

Entries will return an array of arrays, in which every child array is an array of [index, value].

array.entries()

var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.entries();

for (i of show) {
  console.log(i);
}

In above example, we can also use the spread operator instead of for...of loop which will give you same result.

var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.entries();
console.log(...show);

Output

Array.prototype.keys()

This method works similarly to the Array.entries() method. As its name implies, it is used to return an array iterator object along with the keys of the array.

array.keys()

var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.keys();
console.log(...show);

Array.prototype.values()

This method is similar to Array.keys() and Array.entries() except that it provides the value of each key.

array.values()

var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.values();
console.log(...show);

Array.prototype.fill()

This method fills the specified array elements with a static value. The value can be used to fill a part of an array or to fill the entire array. It modifies the original array.

You can specify the position of the start and end the filling. If not specified, then all elements will be filled.

array.fill(value, start, end)

Parameter Values

value: It is a static value to fill the array. It is always required.

start: It is the index to start filling the array. It is optional, and its default value is 0.

end: It is the index to stop filling the array. It is also optional, and its default value is the length of the array.

var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.fill("Green",2,4);
console.log(...show);

JavaScript Array Methods