Editing JavaScript/Notes/Array

Jump to navigation Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 1: Line 1:
In this lesson, I explain what an <code>Array</code> is, properties of Array instances, and methods of <code>Array.prototype</code> that were added in EcmaScript 5.
In this lesson, I explain what an <code>Array</code> is, properties of Array instances, and methods of <code>Array.prototype</code> that were added in EcmaScript 5.
== What is an Array ==
== Array Instances ==
Array instances also have a special definition for the internal method called <code><nowiki>[[DefineOwnProperty]] ( P, Desc, Throw )</nowiki></code> used for property assignment and a special <code>length</code> property that affects and is affected by the properties in the array. The <code><nowiki>[[Class]]</nowiki></code> internal property value is "Array" ([http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.5 &sect; 15.4.5]).
Array instances also have a special definition for the internal method called <code><nowiki>[[DefineOwnProperty]] ( P, Desc, Throw )</nowiki></code> used for property assignment and a special <code>length</code> property that affects and is affected by the properties in the array. The <code><nowiki>[[Class]]</nowiki></code> internal property value is "Array" ([http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.5 &sect; 15.4.5]).


Arrays are Objects. Array instances inherit properties from the <code>Array prototype</code> ([http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 &sect;15.4.4]) object and Array.prototype inherits properties from Object.prototype.
Array instances inherit properties from the <code>Array prototype</code> ([http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 &sect;15.4.4]) object. === Length and <nowiki>[[DefineOwnProperty]]</nowiki> ===
=== Length and <nowiki>[[DefineOwnProperty]]</nowiki> ===
<source lang="javascript">
<source lang="javascript">
// length.
// length.
Line 31: Line 30:
&mdash; returns a live collection.  
&mdash; returns a live collection.  


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


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


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


Line 46: Line 45:
divArray.filter(filterOutEmptyDivs);
divArray.filter(filterOutEmptyDivs);
</source>
</source>
However, IE8 and below will throw an error when slice is called on a Host object. See also:
* [http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.10 Array.prototype.slice (start, end)]
* [http://lists.w3.org/Archives/Public/public-webapps/2008JulSep/0480.html Re: [whatwg] WebIDL and HTML5]
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice Slice:MDN]
* [http://www.jibbering.com/faq/#hostObject What is a Host Object?]


== EcmaScript 5 Array Methods ==  
== EcmaScript 5 Array Methods ==  
The normative reference for Array is the EcmaScript 5.1 specification, a mature, official standard. See [http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 &sect;15.4 Array].
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&trade; 1.6) in 2006.  
EcmaScript 5 formally standardized the "Array Extras" that were previously introduced in Firefox 1.5 (Mozilla JavaScript&trade; 1.6) in 2006.  
Line 72: Line 65:
</source>
</source>


Each method description has an overview of what it does, followed by the algorithm. The complete list of methods is to be found in the EcmaScript specification. See [http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4 Array.prototype].
Each method description has an overview of what it does, followed by the algorithm. Here is the link to Array.prototype: [http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4].


[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array MDC Array]
MDC on Array:
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array]


It is interesting that these methods can also be used generically on something that is Array-like.
It is interesting that these methods can also be used generically on something that is Array-like.
Line 88: Line 82:


== Assignment 1 Write a function that removes an element from an array. ==  
== Assignment 1 Write a function that removes an element from an array. ==  
Write a function that that takes an array and a specified element, and returns the array, minus the first occurence of the element from the array.
Write a function that removes an element from an array.
 
Given:
<source lang="javascript">
var thing = {}, f = function(){};
var input = [f, [], /foo/, thing, []];
 
removeElement(input, thing); //  [f, [], /foo/, []];
</source>
 
<!--
 
// YAGNI.
a.splice(a.indexOf(x), 1);
 
// Returns the same array.
function removeElement(a, x) {
  a.splice(a.indexOf(x), 1);
  return a;
}
 
// returns a new array.
function removeElement(a, x) {
  var i = a.indexOf(x);
  if(x != -1 && a.length > 0) {
    var r = a.slice(0, i).concat(a.slice(i));
  } else {
    r = []; return r;
  }
}
-->


== Assignment 2 Write a function that removes duplicate numbers from an array. ==
== Assignment 2 Write a function that removes duplicate numbers from an array. ==
<source lang="javascript">
<source lang="javascript">
var input = [1, 2, 3, 1, 0, 1];
var input = [1, 2, 3, 1, 0, 1];
var result = arrayUniqueNumbers( input ); // [1, 2, 3, 0];
var result = arrayUnique( input ); // [1, 2, 3, 0];
</source>
</source>
<!--
function arrayUnique( input ) {
    var ret = [], j = 0, obj = {};
    for(var i = 0; i < input.length; i++) {
        var x = input[i]; if(x in obj) continue;
        obj[x] = true; ret[j++] = x; } return ret;
    }
}
-->


== 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.
<source lang="javascript">
var input = ["penguin", "Beard", "pelican", "bear", "ostrich"];
sortStringsCI(input); // ["Bear", "pelican", "penguin", "ostrich"];
</source>
<!--
function sortStringsCI(a, b) {
    return a.toLowerCase() > b.toLowerCase();
}
-->
Please note that all contributions to Noisebridge are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see Noisebridge:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Cancel Editing help (opens in new window)