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.
Anti-spam check. Do
not
fill this in!
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 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 § 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 §15.4.4]) object and Array.prototype inherits properties from Object.prototype. === Length and <nowiki>[[DefineOwnProperty]]</nowiki> === <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 Array methods can be used generically on these Array-like host objects. For example: <source lang="javascript"> var slice = Array.prototype.slice; var divs = document.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> 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 == 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 §15.4 Array]. 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. 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]. [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array MDC Array] 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 that takes an array and a specified element, and returns the array, minus the first occurence of the element from the 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. == <source lang="javascript"> var input = [1, 2, 3, 1, 0, 1]; var result = arrayUniqueNumbers( input ); // [1, 2, 3, 0]; </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. == 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(); } -->
Summary:
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)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Log in
Request account
Namespaces
Page
Discussion
English
Views
Read
Edit
View history
More
Search
Dig in!
Noisebridge
- Status: MOVED
- Donate
- ABOUT
- Accessibility
- Vision
- Blog
Manual
MANUAL
Visitors
Participation
Community Standards
Channels
Operations
Events
EVENTS
Guilds
GUILDS
- Meta
- Electronics
- Fabrication
- Games
- Music
- Library
- Neuro
- Philosophy
- Funding
- Art
- Crypto
- Documentation/Wiki
Wiki
Recent Changes
Random Page
Help
Categories
(Edit)
Tools
What links here
Related changes
Special pages
Page information