JavaScript/Notes/Array: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
Line 84: Line 84:
Write a function that removes an element from an array.
Write a function that removes an element from an array.


== Assignment 2 Write a function that removes duplicate elements from an array. ==  
== Assignment 2 Write a function that removes duplicate numbers from an array. ==
 
<source lang="javascript">
var input = [1, 2, 3, 1, 0, 1];
var result = arrayUnique( input ); // [1, 2, 3, 0];
</source>


== Assignment 3 Write a function that sorts an array of strings case-insensitively. ==  
== Assignment 3 Write a function that sorts an array of strings case-insensitively. ==  
Write a function that sorts an array of strings case-insensitively.
Write a function that sorts an array of strings case-insensitively.

Revision as of 01:26, 1 November 2013

In this lesson, I explain what an Array is, properties of Array instances, and methods of Array.prototype that were added in EcmaScript 5.

Array Instances

Array instances also have a special definition for the internal method called [[DefineOwnProperty]] ( P, Desc, Throw ) used for property assignment and a special length property that affects and is affected by the properties in the array. The [[Class]] internal property value is "Array" (§ 15.4.5).

Array instances inherit properties from the Array prototype (§15.4.4) object. === Length and [[DefineOwnProperty]] === <source lang="javascript"> // length. var a = ["a", "b" , "c", undefined]; "3" in a; // true; a[3]; // undefined; a.length = 2; "2" in a; // false.

// DefineOwnProperty a[4] = "CC"; a.length; // 5; "3" in a; // true. a[3]; // undefined.

// Sparse array DO NOT DO THIS. delete a[2]; // true "2" in a; // false </source>

NodeLists Are Not Arrays

There are many collections in the DOM that have indexed properties but are not Arrays. NodeList is one such example. For example, <source lang="javascript"> document.getElementsByTagName("div"); </source> — returns a live collection.

In modern browsers in standards mode, it is possible to use Array methods generically on these Array-like objects. For example:

<source lang="javascript"> var slice = Array.prototype.slice;

var divs = .getElementsByTagName("div"); divArray = slice.call(divs); // create a new Array

function filterOutEmptyDivs(el) { // Using ES5 String.prototype.trim; assuming textContent is supported.

 return el.getElementsByTagName("*").length > 0 && !el.textContent.trim();

}

divArray.filter(filterOutEmptyDivs); </source>

EcmaScript 5 Array Methods

The [http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 normative reference for Array is the EcmaScript 5.1 specification, a mature, official standard.

EcmaScript 5 formally standardized the "Array Extras" that were previously introduced in Firefox 1.5 (Mozilla JavaScript™ 1.6) in 2006.

These added methods are present in common modern browsers, but can have a noticeable performance impact for lengthy arrays, particularly on limited devices, and especially with large data sets.

<source lang="javascript"> Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.reduceRight </source>

Each method description has an overview of what it does, followed by the algorithm. Here is the link to Array.prototype: [1].

MDC on Array: [2]

It is interesting that these methods can also be used generically on something that is Array-like. <source lang="javascript"> var filter = Array.prototype.filter;

filter.call("foo", function (ch) { return ch == "o"; }).join(""); </source>

Array-like was proposed as a standard interface (I championed this idea for a while), but was not included. Perhaps it will be, some day.

But for now, it is useful to know that these methods are natively supported in modern browsers.

Assignment 1 Write a function that removes an element from an array.

Write a function that removes an element from an array.

Assignment 2 Write a function that removes duplicate numbers from an array.

<source lang="javascript"> var input = [1, 2, 3, 1, 0, 1]; var result = arrayUnique( input ); // [1, 2, 3, 0]; </source>

Assignment 3 Write a function that sorts an array of strings case-insensitively.

Write a function that sorts an array of strings case-insensitively.