Arrays with the help of ES6 now have uber kool methods in them! Let’s have a look at them with few simple examples to understand them.

Array

• from()
• of()

Array.prototype:

• copyWithin()
• fill()
• find()
• findIndex()
• keys()
• entries()
• values()

Array.from():

Coverts arrayLike and interator objects to arrays.

Simple senario in ES5 to enumarate over a NodeList:

var divs = document.querySelectorAll('div');
[].forEach.call(divs, function(node) {
  console.log(node);
});

Same with ES6:

var divs = document.querySelectorAll('div');
Array.from(divs).forEach(function(node) {
  console.log(node);
});

Also

> Array.from({ 0: 'X', 1: 'Y', length: 2 })
> ['X', 'Y']

Array.of():

This creates a new Array instance with a variable number of arguments, regardless of the type.

> Array.of(0,true, undefined, null);
> [ 0, true, undefined, null ]

A simple implementation of the same in ES5 would be:

Array.of = function() {
    return Array.prototype.slice.call(arguments);
};

Array.copyWithin():

Given the target starting index, source start and end indices, this method copies the sequence of array elements.

If the starting or the ending indices are negitive values, then the array length is added to them.

> [1, 3, 5, 7, 9].copyWithin(0, 3);
> [ 7, 9, 5, 7, 9 ]

> [1, 3, 5, 7, 9].copyWithin(0, 1, 3);
> [ 3, 3, 5, 7, 9 ]

> [1, 3, 5, 7, 9].copyWithin(0, -2, -1);
> [ 7, 3, 5, 7, 9 ]

Array.fill():

Fills all the elements of an array from a start index to an end index with a static value.

> [1,1,2,3,5,8].fill(4)
> [ 4, 4, 4, 4, 4, 4 ]

> [1,1,2,3,5,8].fill(4, 3)
> [ 1, 1, 2, 4, 4, 4 ]

> [1,1,2,3,5,8].fill(4, 1, 3)
> [ 1, 4, 4, 3, 5, 8 ]

Array.find():

This returns a value in the array or undefined, based on the testing function that is passed to this method.

isEven = (element, index, array) => (element % 2 === 0)

> [1,2,3,5,7].find(isEven)
> 2

> [1,3,5,7,9].find(isEven)
> undefined

Array.findIndex():

Similar to find() but retruns the matching index if found, or else returns -1

> [0,1,3,5,7].findIndex(isEven)
> 0

> [1,3,5,7].findIndex(isEven)
> -1

Array.{keys, entries, values}():

keys, entires and values methods returns a new Array Iterator object that contains keys, values and key/value pairs respectively.

> alphas = ['R', 'G', 'B']

> keyIter = alphas.keys()

> KeyIter.next()
> { value: 0, done: false }

> KeyIter.next()
> { value: 1, done: false }

> KeyIter.next()
> { value: 2, done: false }

> KeyIter.next()
> { value: undefined, done: true }

> entrIter = alphas.entires()
> entrIter.next().value
> [0, 'R'] // So...on

> valIter = alphas.values();
> valIter.next().value
> 'R' // So...on

Bonus for scrolling till the end ;)

ES7 will have Array.contains as a matter of fact it’s already there in FF35+

> [1,2,3,4,5].contains(5) // true

> [0,1,2,3,4].contains(5) // false

Hope this helped, happy hacking! :)

Update 0 After publishing this post noticed one more uber kool post by Dr. Axel Rauschmayer don’t miss it!