JavaScript

In a previous post on extending the JavaScript Array prototype, I showed how methods could be added to the Array prototype to make it (mostly) consistent with the Ecma 5 standard across all browsers using a technique called polyfilling. In this article, I will further extend the Array prototype with methods borrowed from Ruby, which […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

In a previous post on extending the JavaScript Array prototype, I showed how methods could be added to the Array prototype to make it (mostly) consistent with the Ecma 5 standard across all browsers using a technique called polyfilling. In this article, I will further extend the Array prototype with methods borrowed from Ruby, which in my opinion has a very useful Array toolkit.

JavaScript allows native objects like Array to be extended by extending their prototypes. If you would like to add a method to the Array prototype, you would do this:

After this code is executed, any other code can now call the hello method on any array. There is no need to instantiate a special array class, or to make any modifications to the code. This is the magic of prototypes:

In this article, we present a set of methods to add to the Array prototype that implement part of the Ruby array methods. All methods are defined within an anonymous function so as not to create namespace conflicts with other code:

at

Returns the element at index. A negative index counts from the end of self, where -1 is the last element.

clear

Removes all elements from self and returns self for chaining purposes.

compact

Returns a copy of self with all undefined elements removed, turning a sparse array into a dense array. Returns self for chaining purposes.

$compact

Removes null  and undefined  elements from the array, turning it into a dense array. Returns self for chaining purposes.

deleteAt

Deletes the element at the specified index, returning that element, or undefined  if the index is out of range. A negative index is counted from the end of the array, where -1 corresponds to the last element. Returns self for chaining purposes.

Examples

deleteIf

Deletes every element of self for which function evaluates to true . Sparse arrays are converted to dense arrays. The array is changed instantly every time the function is called, not after the iteration is over.

Example

drop

Drops first n elements from array and returns the rest of the elements in a new array.

Example

dropWhile

Drops elements up to, but not including, the first element for which the function returns false  and returns an array containing the remaining elements.

Example

fetch

Tries to return the element at position index, but throws a RangeError  exception if the referenced index lies outside of the array bounds. This error can be prevented by supplying a second argument, which will act as a default value. Alternatively, if a function is given it will only be executed when an invalid index is referenced. Negative values of index count from the end of the array.

Example:

fill

The first two forms set the selected elements of self (which may be the entire array) to obj.

A start of null / undefined  is equivalent to zero. A length of null / undefined  is equivalent to the length of the array.

The last two forms fill the array with the value of the given function, which is passed the absolute index of each element to be filled.

Negative values of start count from the end of the array, where -1 is the last element.

Example

find

Returns the index of the first object for which the function returns true . Returns undefined  if no match is found.

first

Returns the first element, or the first n elements, of the array. If the array is empty, requesting one element returns undefined , and requesting multiple elements returns an empty array.

Example

flatten

Returns a new array that is a one-dimensional flattening of self (recursively). That is, for every element that is an array, extract its elements into the new array. The optional level  argument determines the level of recursion to flatten.

Example

includes

Returns true  if the given object is present in self (that is, if any element ===  object), otherwise returns false .

Example

insert

Inserts the given values before the element with the given index.

Negative indices count backwards from the end of the array, where -1 is the last element. If a negative index is used, the given values will be inserted after that element, so using an index of -1 will insert the values at the end of the array.

Example

isEmpty

Returns true  if self contains no elements.

keepIf

Deletes every element of self for which the given function evaluates to false .

last

Returns the last element(s) of self. If the array is empty, returns undefined  if only one element requested.

Example

reject

Returns a new array containing the items in self  for which the given block is not true .

$reject

Same as delete_if , works on self.

$reverse

Reverses self in place.

rfind

Returns the index of the last object for which the function returns true .
Returns undefined  if no match is found.

shuffle

Returns a new array with elements of self shuffled.

take

Returns first n elements from the array.

takeWhile

Passes elements to the function until the function returns false , then stops iterating and returns an array of all prior elements.

uniq

Returns a new array by removing duplicate values in self. Comparison is done by default using the ===  operator.

If a function is given, it will use the return value of the function for comparison.

Example

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">