JavaScript/Notes/Array

From Noisebridge
< JavaScript(Difference between revisions)
Jump to: navigation, search
(Assignment 1)
Line 71: Line 71:
 
Write a function that removes an element from an array.
 
Write a function that removes an element from an array.
  
== Assignment 2 ==
+
== Assignment 2 Write a function that removes duplicate elements from an array. ==
Write a function that removes duplicate elements from an array.
+
  
== Assignment 3 ==  
+
 
 +
== 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 13:48, 29 October 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.

Contents

Array Instances

Array instances inherit properties from the Array prototype object and their Class internal property value is "Array". Array instances also have a special 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.

var a = ["a", "b" , "c", undefined];
"3" in a; // true;
a[3]; // undefined;
a.length = 2; 
"2" in a; // false.

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,

document.getElementsByTagName("div");

— 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:

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);

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.

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

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.

var filter = Array.prototype.filter;
 
filter.call("foo",  function (ch) { return ch == "o"; }).join("");

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 elements from an array.

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

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

Personal tools