1609 lines
58 KiB
HTML
1609 lines
58 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>Underscore.js</title>
|
|
<style>
|
|
body {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
background: #f0f0e5;
|
|
color: #252519;
|
|
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
|
}
|
|
div.container {
|
|
width: 720px;
|
|
margin: 50px 0 50px 50px;
|
|
}
|
|
p {
|
|
width: 550px;
|
|
}
|
|
#documentation p {
|
|
margin-bottom: 4px;
|
|
}
|
|
a, a:visited {
|
|
padding: 0 2px;
|
|
text-decoration: none;
|
|
background: #dadaba;
|
|
color: #252519;
|
|
}
|
|
a:active, a:hover {
|
|
color: #000;
|
|
background: #f0c095;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 40px;
|
|
}
|
|
b.header {
|
|
font-size: 18px;
|
|
}
|
|
span.alias {
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
margin-left: 20px;
|
|
}
|
|
table, tr, td {
|
|
margin: 0; padding: 0;
|
|
}
|
|
td {
|
|
padding: 2px 12px 2px 0;
|
|
}
|
|
code, pre, tt {
|
|
font-family: Monaco, Consolas, "Lucida Console", monospace;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
color: #555529;
|
|
}
|
|
code {
|
|
margin-left: 20px;
|
|
}
|
|
pre {
|
|
font-size: 12px;
|
|
padding: 2px 0 2px 12px;
|
|
border-left: 6px solid #aaaa99;
|
|
margin: 0px 0 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1>Underscore.js</h1>
|
|
|
|
<p>
|
|
<a href="http://github.com/documentcloud/underscore/">Underscore</a> is a
|
|
utility-belt library for JavaScript that provides a lot of the
|
|
functional programming support that you would expect in
|
|
<a href="http://prototypejs.org/api">Prototype.js</a>
|
|
(or <a href="http://www.ruby-doc.org/core/classes/Enumerable.html">Ruby</a>),
|
|
but without extending any of the built-in JavaScript objects. It's the
|
|
tie to go along with <a href="http://docs.jquery.com">jQuery</a>'s tux.
|
|
</p>
|
|
|
|
<p>
|
|
Underscore provides 60-odd functions that support both the usual
|
|
functional suspects: <b>map</b>, <b>select</b>, <b>invoke</b> —
|
|
as well as more specialized helpers: function binding, javascript
|
|
templating, deep equality testing, and so on. It delegates to built-in
|
|
functions, if present, so modern browsers will use the
|
|
native implementations of <b>forEach</b>, <b>map</b>, <b>reduce</b>,
|
|
<b>filter</b>, <b>every</b>, <b>some</b> and <b>indexOf</b>.
|
|
</p>
|
|
|
|
<p>
|
|
A complete <a href="test/test.html">Test & Benchmark Suite</a>
|
|
is included for your perusal.
|
|
</p>
|
|
|
|
<p>
|
|
You may also read through the <a href="docs/underscore.html">annotated source code</a>.
|
|
</p>
|
|
|
|
<p>
|
|
The project is
|
|
<a href="http://github.com/documentcloud/underscore/">hosted on GitHub</a>.
|
|
You can report bugs and discuss features on the
|
|
<a href="http://github.com/documentcloud/underscore/issues">issues page</a>,
|
|
on Freenode in the <tt>#documentcloud</tt> channel,
|
|
or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<i>Underscore is an open-source component of <a href="http://documentcloud.org/">DocumentCloud</a>.</i>
|
|
</p>
|
|
|
|
<h2>Downloads <i style="padding-left: 12px; font-size:12px;">(Right-click, and use "Save As")</i></h2>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><a href="underscore.js">Development Version (1.1.7)</a></td>
|
|
<td><i>28kb, Uncompressed with Comments</i></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="underscore-min.js">Production Version (1.1.7)</a></td>
|
|
<td><i>3kb, Minified and Gzipped</i></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>Table of Contents</h2>
|
|
|
|
<a href="#styles">Object-Oriented and Functional Styles</a>
|
|
|
|
<p>
|
|
<b>Collections</b>
|
|
<br />
|
|
<span class="methods"><a href="#each">each</a>, <a href="#map">map</a>,
|
|
<a href="#reduce">reduce</a>, <a href="#reduceRight">reduceRight</a>,
|
|
<a href="#detect">detect</a>, <a href="#select">select</a>,
|
|
<a href="#reject">reject</a>, <a href="#all">all</a>,
|
|
<a href="#any">any</a>, <a href="#include">include</a>,
|
|
<a href="#invoke">invoke</a>, <a href="#pluck">pluck</a>,
|
|
<a href="#max">max</a>, <a href="#min">min</a>,
|
|
<a href="#sortBy">sortBy</a>, <a href="#groupBy">groupBy</a>, <a href="#sortedIndex">sortedIndex</a>,
|
|
<a href="#toArray">toArray</a>, <a href="#size">size</a></span>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Arrays</b>
|
|
<br />
|
|
<span class="methods"><a href="#first">first</a>, <a href="#rest">rest</a>, <a href="#last">last</a>,
|
|
<a href="#compact">compact</a>, <a href="#flatten">flatten</a>, <a href="#without">without</a>,
|
|
<a href="#union">union</a>, <a href="#intersection">intersection</a>, <a href="#difference">difference</a>,
|
|
<a href="#uniq">uniq</a>, <a href="#zip">zip</a>, <a href="#indexOf">indexOf</a>,
|
|
<a href="#lastIndexOf">lastIndexOf</a>, <a href="#range">range</a></span>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Functions</b>
|
|
<br />
|
|
<span class="methods"><a href="#bind">bind</a>, <a href="#bindAll">bindAll</a>,
|
|
<a href="#memoize">memoize</a>, <a href="#delay">delay</a>, <a href="#defer">defer</a>,
|
|
<a href="#throttle">throttle</a>, <a href="#debounce">debounce</a>,
|
|
<a href="#once">once</a>, <a href="#after">after</a>, <a href="#wrap">wrap</a>, <a href="#compose">compose</a></span>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Objects</b>
|
|
<br />
|
|
<span class="methods"><a href="#keys">keys</a>, <a href="#values">values</a>,
|
|
<a href="#functions">functions</a>, <a href="#extend">extend</a>, <a href="#defaults">defaults</a>, <a href="#clone">clone</a>, <a href="#tap">tap</a>,
|
|
<a href="#isEqual">isEqual</a>, <a href="#isEmpty">isEmpty</a>, <a href="#isElement">isElement</a>,
|
|
<a href="#isArray">isArray</a>, <a href="#isArguments">isArguments</a>, <a href="#isFunction">isFunction</a>, <a href="#isString">isString</a>,
|
|
<a href="#isNumber">isNumber</a>, <a href="#isBoolean">isBoolean</a>, <a href="#isDate">isDate</a>, <a href="#isRegExp">isRegExp</a>
|
|
<a href="#isNaN">isNaN</a>, <a href="#isNull">isNull</a>,
|
|
<a href="#isUndefined">isUndefined</a>
|
|
</span>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Utility</b>
|
|
<br />
|
|
<span class="methods"><a href="#noConflict">noConflict</a>,
|
|
<a href="#identity">identity</a>, <a href="#times">times</a>,
|
|
<a href="#mixin">mixin</a>, <a href="#uniqueId">uniqueId</a>,
|
|
<a href="#template">template</a></span>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Chaining</b>
|
|
<br />
|
|
<span class="methods"><a href="#chain">chain</a>, <a href="#value">value</a>
|
|
</p>
|
|
|
|
<div id="documentation">
|
|
|
|
<h2 id="styles">Object-Oriented and Functional Styles</h2>
|
|
|
|
<p>
|
|
You can use Underscore in either an object-oriented or a functional style,
|
|
depending on your preference. The following two lines of code are
|
|
identical ways to double a list of numbers.
|
|
</p>
|
|
|
|
<pre>
|
|
_.map([1, 2, 3], function(n){ return n * 2; });
|
|
_([1, 2, 3]).map(function(n){ return n * 2; });</pre>
|
|
|
|
<p>
|
|
Using the object-oriented style allows you to chain together methods. Calling
|
|
<tt>chain</tt> on a wrapped object will cause all future method calls to
|
|
return wrapped objects as well. When you've finished the computation,
|
|
use <tt>value</tt> to retrieve the final value. Here's an example of chaining
|
|
together a <b>map/flatten/reduce</b>, in order to get the word count of
|
|
every word in a song.
|
|
</p>
|
|
|
|
<pre>
|
|
var lyrics = [
|
|
{line : 1, words : "I'm a lumberjack and I'm okay"},
|
|
{line : 2, words : "I sleep all night and I work all day"},
|
|
{line : 3, words : "He's a lumberjack and he's okay"},
|
|
{line : 4, words : "He sleeps all night and he works all day"}
|
|
];
|
|
|
|
_(lyrics).chain()
|
|
.map(function(line) { return line.words.split(' '); })
|
|
.flatten()
|
|
.reduce(function(counts, word) {
|
|
counts[word] = (counts[word] || 0) + 1;
|
|
return counts;
|
|
}, {}).value();
|
|
|
|
=> {lumberjack : 2, all : 4, night : 2 ... }</pre>
|
|
|
|
<p>
|
|
In addition, the
|
|
<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/prototype">Array prototype's methods</a>
|
|
are proxied through the chained Underscore object, so you can slip a
|
|
<tt>reverse</tt> or a <tt>push</tt> into your chain, and continue to
|
|
modify the array.
|
|
</p>
|
|
|
|
<h2>Collection Functions (Arrays or Objects)</h2>
|
|
|
|
<p id="each">
|
|
<b class="header">each</b><code>_.each(list, iterator, [context])</code>
|
|
<span class="alias">Alias: <b>forEach</b></span>
|
|
<br />
|
|
Iterates over a <b>list</b> of elements, yielding each in turn to an <b>iterator</b>
|
|
function. The <b>iterator</b> is bound to the <b>context</b> object, if one is
|
|
passed. Each invocation of <b>iterator</b> is called with three arguments:
|
|
<tt>(element, index, list)</tt>. If <b>list</b> is a JavaScript object, <b>iterator</b>'s
|
|
arguments will be <tt>(value, key, list)</tt>. Delegates to the native
|
|
<b>forEach</b> function if it exists.
|
|
</p>
|
|
<pre>
|
|
_.each([1, 2, 3], function(num){ alert(num); });
|
|
=> alerts each number in turn...
|
|
_.each({one : 1, two : 2, three : 3}, function(num, key){ alert(num); });
|
|
=> alerts each number in turn...</pre>
|
|
|
|
<p id="map">
|
|
<b class="header">map</b><code>_.map(list, iterator, [context])</code>
|
|
<br />
|
|
Produces a new array of values by mapping each value in <b>list</b>
|
|
through a transformation function (<b>iterator</b>). If the native <b>map</b> method
|
|
exists, it will be used instead. If <b>list</b> is a JavaScript object,
|
|
<b>iterator</b>'s arguments will be <tt>(value, key, list)</tt>.
|
|
</p>
|
|
<pre>
|
|
_.map([1, 2, 3], function(num){ return num * 3; });
|
|
=> [3, 6, 9]
|
|
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
|
|
=> [3, 6, 9]</pre>
|
|
|
|
<p id="reduce">
|
|
<b class="header">reduce</b><code>_.reduce(list, iterator, memo, [context])</code>
|
|
<span class="alias">Aliases: <b>inject, foldl</b></span>
|
|
<br />
|
|
Also known as <b>inject</b> and <b>foldl</b>, <b>reduce</b> boils down a
|
|
<b>list</b> of values into a single value. <b>Memo</b> is the initial state
|
|
of the reduction, and each successive step of it should be returned by
|
|
<b>iterator</b>.
|
|
</p>
|
|
<pre>
|
|
var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
|
|
=> 6
|
|
</pre>
|
|
|
|
<p id="reduceRight">
|
|
<b class="header">reduceRight</b><code>_.reduceRight(list, iterator, memo, [context])</code>
|
|
<span class="alias">Alias: <b>foldr</b></span>
|
|
<br />
|
|
The right-associative version of <b>reduce</b>. Delegates to the
|
|
JavaScript 1.8 version of <b>reduceRight</b>, if it exists. <b>Foldr</b>
|
|
is not as useful in JavaScript as it would be in a language with lazy
|
|
evaluation.
|
|
</p>
|
|
<pre>
|
|
var list = [[0, 1], [2, 3], [4, 5]];
|
|
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
|
|
=> [4, 5, 2, 3, 0, 1]
|
|
</pre>
|
|
|
|
<p id="detect">
|
|
<b class="header">detect</b><code>_.detect(list, iterator, [context])</code>
|
|
<br />
|
|
Looks through each value in the <b>list</b>, returning the first one that
|
|
passes a truth test (<b>iterator</b>). The function returns as
|
|
soon as it finds an acceptable element, and doesn't traverse the
|
|
entire list.
|
|
</p>
|
|
<pre>
|
|
var even = _.detect([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
|
|
=> 2
|
|
</pre>
|
|
|
|
<p id="select">
|
|
<b class="header">select</b><code>_.select(list, iterator, [context])</code>
|
|
<span class="alias">Alias: <b>filter</b></span>
|
|
<br />
|
|
Looks through each value in the <b>list</b>, returning an array of all
|
|
the values that pass a truth test (<b>iterator</b>). Delegates to the
|
|
native <b>filter</b> method, if it exists.
|
|
</p>
|
|
<pre>
|
|
var evens = _.select([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
|
|
=> [2, 4, 6]
|
|
</pre>
|
|
|
|
<p id="reject">
|
|
<b class="header">reject</b><code>_.reject(list, iterator, [context])</code>
|
|
<br />
|
|
Returns the values in <b>list</b> without the elements that the truth
|
|
test (<b>iterator</b>) passes. The opposite of <b>select</b>.
|
|
</p>
|
|
<pre>
|
|
var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
|
|
=> [1, 3, 5]
|
|
</pre>
|
|
|
|
<p id="all">
|
|
<b class="header">all</b><code>_.all(list, iterator, [context])</code>
|
|
<span class="alias">Alias: <b>every</b></span>
|
|
<br />
|
|
Returns <i>true</i> if all of the values in the <b>list</b> pass the <b>iterator</b>
|
|
truth test. Delegates to the native method <b>every</b>, if present.
|
|
</p>
|
|
<pre>
|
|
_.all([true, 1, null, 'yes'], _.identity);
|
|
=> false
|
|
</pre>
|
|
|
|
<p id="any">
|
|
<b class="header">any</b><code>_.any(list, [iterator], [context])</code>
|
|
<span class="alias">Alias: <b>some</b></span>
|
|
<br />
|
|
Returns <i>true</i> if any of the values in the <b>list</b> pass the
|
|
<b>iterator</b> truth test. Short-circuits and stops traversing the list
|
|
if a true element is found. Delegates to the native method <b>some</b>,
|
|
if present.
|
|
</p>
|
|
<pre>
|
|
_.any([null, 0, 'yes', false]);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="include">
|
|
<b class="header">include</b><code>_.include(list, value)</code>
|
|
<span class="alias">Alias: <b>contains</b></span>
|
|
<br />
|
|
Returns <i>true</i> if the <b>value</b> is present in the <b>list</b>, using
|
|
<i>===</i> to test equality. Uses <b>indexOf</b> internally, if <b>list</b>
|
|
is an Array.
|
|
</p>
|
|
<pre>
|
|
_.include([1, 2, 3], 3);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="invoke">
|
|
<b class="header">invoke</b><code>_.invoke(list, methodName, [*arguments])</code>
|
|
<br />
|
|
Calls the method named by <b>methodName</b> on each value in the <b>list</b>.
|
|
Any extra arguments passed to <b>invoke</b> will be forwarded on to the
|
|
method invocation.
|
|
</p>
|
|
<pre>
|
|
_.invoke([[5, 1, 7], [3, 2, 1]], 'sort');
|
|
=> [[1, 5, 7], [1, 2, 3]]
|
|
</pre>
|
|
|
|
<p id="pluck">
|
|
<b class="header">pluck</b><code>_.pluck(list, propertyName)</code>
|
|
<br />
|
|
A convenient version of what is perhaps the most common use-case for
|
|
<b>map</b>: extracting a list of property values.
|
|
</p>
|
|
<pre>
|
|
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
|
|
_.pluck(stooges, 'name');
|
|
=> ["moe", "larry", "curly"]
|
|
</pre>
|
|
|
|
<p id="max">
|
|
<b class="header">max</b><code>_.max(list, [iterator], [context])</code>
|
|
<br />
|
|
Returns the maximum value in <b>list</b>. If <b>iterator</b> is passed,
|
|
it will be used on each value to generate the criterion by which the
|
|
value is ranked.
|
|
</p>
|
|
<pre>
|
|
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
|
|
_.max(stooges, function(stooge){ return stooge.age; });
|
|
=> {name : 'curly', age : 60};
|
|
</pre>
|
|
|
|
<p id="min">
|
|
<b class="header">min</b><code>_.min(list, [iterator], [context])</code>
|
|
<br />
|
|
Returns the minimum value in <b>list</b>. If <b>iterator</b> is passed,
|
|
it will be used on each value to generate the criterion by which the
|
|
value is ranked.
|
|
</p>
|
|
<pre>
|
|
var numbers = [10, 5, 100, 2, 1000];
|
|
_.min(numbers);
|
|
=> 2
|
|
</pre>
|
|
|
|
<p id="sortBy">
|
|
<b class="header">sortBy</b><code>_.sortBy(list, iterator, [context])</code>
|
|
<br />
|
|
Returns a sorted copy of <b>list</b>, ranked by the results of running
|
|
each value through <b>iterator</b>.
|
|
</p>
|
|
<pre>
|
|
_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });
|
|
=> [5, 4, 6, 3, 1, 2]
|
|
</pre>
|
|
|
|
<p id="groupBy">
|
|
<b class="header">groupBy</b><code>_.groupBy(list, iterator)</code>
|
|
<br />
|
|
Splits a collection into sets, grouped by the result of running each
|
|
value through <b>iterator</b>.
|
|
</p>
|
|
<pre>
|
|
_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
|
|
=> {1: [1.3], 2: [2.1, 2.4]}
|
|
</pre>
|
|
|
|
<p id="sortedIndex">
|
|
<b class="header">sortedIndex</b><code>_.sortedIndex(list, value, [iterator])</code>
|
|
<br />
|
|
Uses a binary search to determine the index at which the <b>value</b>
|
|
<i>should</i> be inserted into the <b>list</b> in order to maintain the <b>list</b>'s
|
|
sorted order. If an <b>iterator</b> is passed, it will be used to compute
|
|
the sort ranking of each value.
|
|
</p>
|
|
<pre>
|
|
_.sortedIndex([10, 20, 30, 40, 50], 35);
|
|
=> 3
|
|
</pre>
|
|
|
|
<p id="toArray">
|
|
<b class="header">toArray</b><code>_.toArray(list)</code>
|
|
<br />
|
|
Converts the <b>list</b> (anything that can be iterated over), into a
|
|
real Array. Useful for transmuting the <b>arguments</b> object.
|
|
</p>
|
|
<pre>
|
|
(function(){ return _.toArray(arguments).slice(0); })(1, 2, 3);
|
|
=> [1, 2, 3]
|
|
</pre>
|
|
|
|
<p id="size">
|
|
<b class="header">size</b><code>_.size(list)</code>
|
|
<br />
|
|
Return the number of values in the <b>list</b>.
|
|
</p>
|
|
<pre>
|
|
_.size({one : 1, two : 2, three : 3});
|
|
=> 3
|
|
</pre>
|
|
|
|
<h2>Array Functions</h2>
|
|
|
|
<p>
|
|
<i>Note: All array functions will also work on the <b>arguments</b> object.</i>
|
|
</p>
|
|
|
|
<p id="first">
|
|
<b class="header">first</b><code>_.first(array, [n])</code>
|
|
<span class="alias">Alias: <b>head</b></span>
|
|
<br />
|
|
Returns the first element of an <b>array</b>. Passing <b>n</b> will
|
|
return the first <b>n</b> elements of the array.
|
|
</p>
|
|
<pre>
|
|
_.first([5, 4, 3, 2, 1]);
|
|
=> 5
|
|
</pre>
|
|
|
|
<p id="rest">
|
|
<b class="header">rest</b><code>_.rest(array, [index])</code>
|
|
<span class="alias">Alias: <b>tail</b></span>
|
|
<br />
|
|
Returns the <b>rest</b> of the elements in an array. Pass an <b>index</b>
|
|
to return the values of the array from that index onward.
|
|
</p>
|
|
<pre>
|
|
_.rest([5, 4, 3, 2, 1]);
|
|
=> [4, 3, 2, 1]
|
|
</pre>
|
|
|
|
<p id="last">
|
|
<b class="header">last</b><code>_.last(array)</code>
|
|
<br />
|
|
Returns the last element of an <b>array</b>.
|
|
</p>
|
|
<pre>
|
|
_.last([5, 4, 3, 2, 1]);
|
|
=> 1
|
|
</pre>
|
|
|
|
<p id="compact">
|
|
<b class="header">compact</b><code>_.compact(array)</code>
|
|
<br />
|
|
Returns a copy of the <b>array</b> with all falsy values removed.
|
|
In JavaScript, <i>false</i>, <i>null</i>, <i>0</i>, <i>""</i>,
|
|
<i>undefined</i> and <i>NaN</i> are all falsy.
|
|
</p>
|
|
<pre>
|
|
_.compact([0, 1, false, 2, '', 3]);
|
|
=> [1, 2, 3]
|
|
</pre>
|
|
|
|
<p id="flatten">
|
|
<b class="header">flatten</b><code>_.flatten(array)</code>
|
|
<br />
|
|
Flattens a nested <b>array</b> (the nesting can be to any depth).
|
|
</p>
|
|
<pre>
|
|
_.flatten([1, [2], [3, [[[4]]]]]);
|
|
=> [1, 2, 3, 4];
|
|
</pre>
|
|
|
|
<p id="without">
|
|
<b class="header">without</b><code>_.without(array, [*values])</code>
|
|
<br />
|
|
Returns a copy of the <b>array</b> with all instances of the <b>values</b>
|
|
removed. <i>===</i> is used for the equality test.
|
|
</p>
|
|
<pre>
|
|
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
|
|
=> [2, 3, 4]
|
|
</pre>
|
|
|
|
<p id="union">
|
|
<b class="header">union</b><code>_.union(*arrays)</code>
|
|
<br />
|
|
Computes the union of the passed-in <b>arrays</b>: the list of unique items,
|
|
in order, that are present in one or more of the <b>arrays</b>.
|
|
</p>
|
|
<pre>
|
|
_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
|
|
=> [1, 2, 3, 101, 10]
|
|
</pre>
|
|
|
|
<p id="intersection">
|
|
<b class="header">intersection</b><code>_.intersection(*arrays)</code>
|
|
<br />
|
|
Computes the list of values that are the intersection of all the <b>arrays</b>.
|
|
Each value in the result is present in each of the <b>arrays</b>.
|
|
</p>
|
|
<pre>
|
|
_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
|
|
=> [1, 2]
|
|
</pre>
|
|
|
|
<p id="difference">
|
|
<b class="header">difference</b><code>_.difference(array, other)</code>
|
|
<br />
|
|
Similar to <b>without</b>, but returns the values from <b>array</b> that
|
|
are not present in <b>other</b>.
|
|
</p>
|
|
<pre>
|
|
_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
|
|
=> [1, 3, 4]
|
|
</pre>
|
|
|
|
<p id="uniq">
|
|
<b class="header">uniq</b><code>_.uniq(array, [isSorted])</code>
|
|
<span class="alias">Alias: <b>unique</b></span>
|
|
<br />
|
|
Produces a duplicate-free version of the <b>array</b>, using <i>===</i> to test
|
|
object equality. If you know in advance that the <b>array</b> is sorted,
|
|
passing <i>true</i> for <b>isSorted</b> will run a much faster algorithm.
|
|
</p>
|
|
<pre>
|
|
_.uniq([1, 2, 1, 3, 1, 4]);
|
|
=> [1, 2, 3, 4]
|
|
</pre>
|
|
|
|
<p id="zip">
|
|
<b class="header">zip</b><code>_.zip(*arrays)</code>
|
|
<br />
|
|
Merges together the values of each of the <b>arrays</b> with the
|
|
values at the corresponding position. Useful when you have separate
|
|
data sources that are coordinated through matching array indexes.
|
|
If you're working with a matrix of nested arrays, <b>zip.apply</b>
|
|
can transpose the matrix in a similar fashion.
|
|
</p>
|
|
<pre>
|
|
_.zip(['moe', 'larry', 'curly'], [30, 40, 50], [true, false, false]);
|
|
=> [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]
|
|
</pre>
|
|
|
|
<p id="indexOf">
|
|
<b class="header">indexOf</b><code>_.indexOf(array, value, [isSorted])</code>
|
|
<br />
|
|
Returns the index at which <b>value</b> can be found in the <b>array</b>,
|
|
or <i>-1</i> if value is not present in the <b>array</b>. Uses the native
|
|
<b>indexOf</b> function unless it's missing. If you're working with a
|
|
large array, and you know that the array is already sorted, pass <tt>true</tt>
|
|
for <b>isSorted</b> to use a faster binary search.
|
|
</p>
|
|
<pre>
|
|
_.indexOf([1, 2, 3], 2);
|
|
=> 1
|
|
</pre>
|
|
|
|
<p id="lastIndexOf">
|
|
<b class="header">lastIndexOf</b><code>_.lastIndexOf(array, value)</code>
|
|
<br />
|
|
Returns the index of the last occurrence of <b>value</b> in the <b>array</b>,
|
|
or <i>-1</i> if value is not present. Uses the native <b>lastIndexOf</b>
|
|
function if possible.
|
|
</p>
|
|
<pre>
|
|
_.lastIndexOf([1, 2, 3, 1, 2, 3], 2);
|
|
=> 4
|
|
</pre>
|
|
|
|
<p id="range">
|
|
<b class="header">range</b><code>_.range([start], stop, [step])</code>
|
|
<br />
|
|
A function to create flexibly-numbered lists of integers, handy for
|
|
<tt>each</tt> and <tt>map</tt> loops. <b>start</b>, if omitted, defaults
|
|
to <i>0</i>; <b>step</b> defaults to <i>1</i>. Returns a list of integers
|
|
from <b>start</b> to <b>stop</b>, incremented (or decremented) by <b>step</b>,
|
|
exclusive.
|
|
</p>
|
|
<pre>
|
|
_.range(10);
|
|
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
|
|
_.range(1, 11);
|
|
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
|
_.range(0, 30, 5);
|
|
=> [0, 5, 10, 15, 20, 25]
|
|
_.range(0, -10, -1);
|
|
=> [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
|
|
_.range(0);
|
|
=> []
|
|
</pre>
|
|
|
|
<h2>Function (uh, ahem) Functions</h2>
|
|
|
|
<p id="bind">
|
|
<b class="header">bind</b><code>_.bind(function, object, [*arguments])</code>
|
|
<br />
|
|
Bind a <b>function</b> to an <b>object</b>, meaning that whenever
|
|
the function is called, the value of <i>this</i> will be the <b>object</b>.
|
|
Optionally, bind <b>arguments</b> to the <b>function</b> to pre-fill them,
|
|
also known as <b>currying</b>.
|
|
</p>
|
|
<pre>
|
|
var func = function(greeting){ return greeting + ': ' + this.name };
|
|
func = _.bind(func, {name : 'moe'}, 'hi');
|
|
func();
|
|
=> 'hi: moe'
|
|
</pre>
|
|
|
|
<p id="bindAll">
|
|
<b class="header">bindAll</b><code>_.bindAll(object, [*methodNames])</code>
|
|
<br />
|
|
Binds a number of methods on the <b>object</b>, specified by
|
|
<b>methodNames</b>, to be run in the context of that object whenever they
|
|
are invoked. Very handy for binding functions that are going to be used
|
|
as event handlers, which would otherwise be invoked with a fairly useless
|
|
<i>this</i>. If no <b>methodNames</b> are provided, all of the object's
|
|
function properties will be bound to it.
|
|
</p>
|
|
<pre>
|
|
var buttonView = {
|
|
label : 'underscore',
|
|
onClick : function(){ alert('clicked: ' + this.label); },
|
|
onHover : function(){ console.log('hovering: ' + this.label); }
|
|
};
|
|
_.bindAll(buttonView);
|
|
jQuery('#underscore_button').bind('click', buttonView.onClick);
|
|
=> When the button is clicked, this.label will have the correct value...
|
|
</pre>
|
|
|
|
<p id="memoize">
|
|
<b class="header">memoize</b><code>_.memoize(function, [hashFunction])</code>
|
|
<br />
|
|
Memoizes a given <b>function</b> by caching the computed result. Useful
|
|
for speeding up slow-running computations. If passed an optional
|
|
<b>hashFunction</b>, it will be used to compute the hash key for storing
|
|
the result, based on the arguments to the original function. The default
|
|
<b>hashFunction</b> just uses the first argument to the memoized function
|
|
as the key.
|
|
</p>
|
|
<pre>
|
|
var fibonacci = function(n) {
|
|
return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
|
|
};
|
|
var fastFibonacci = _.memoize(fibonacci);
|
|
</pre>
|
|
|
|
<p id="delay">
|
|
<b class="header">delay</b><code>_.delay(function, wait, [*arguments])</code>
|
|
<br />
|
|
Much like <b>setTimeout</b>, invokes <b>function</b> after <b>wait</b>
|
|
milliseconds. If you pass the optional <b>arguments</b>, they will be
|
|
forwarded on to the <b>function</b> when it is invoked.
|
|
</p>
|
|
<pre>
|
|
var log = _.bind(console.log, console);
|
|
_.delay(log, 1000, 'logged later');
|
|
=> 'logged later' // Appears after one second.
|
|
</pre>
|
|
|
|
<p id="defer">
|
|
<b class="header">defer</b><code>_.defer(function)</code>
|
|
<br />
|
|
Defers invoking the <b>function</b> until the current call stack has cleared,
|
|
similar to using <b>setTimeout</b> with a delay of 0. Useful for performing
|
|
expensive computations or HTML rendering in chunks without blocking the UI thread
|
|
from updating.
|
|
</p>
|
|
<pre>
|
|
_.defer(function(){ alert('deferred'); });
|
|
// Returns from the function before the alert runs.
|
|
</pre>
|
|
|
|
<p id="throttle">
|
|
<b class="header">throttle</b><code>_.throttle(function, wait)</code>
|
|
<br />
|
|
Returns a throttled version of the function, that, when invoked repeatedly,
|
|
will only actually call the wrapped function at most once per every <b>wait</b>
|
|
milliseconds. Useful for rate-limiting events that occur faster than you
|
|
can keep up with.
|
|
</p>
|
|
<pre>
|
|
var throttled = _.throttle(updatePosition, 100);
|
|
$(window).scroll(throttled);
|
|
</pre>
|
|
|
|
<p id="debounce">
|
|
<b class="header">debounce</b><code>_.debounce(function, wait)</code>
|
|
<br />
|
|
Repeated calls to a debounced function will postpone it's execution
|
|
until after <b>wait</b> milliseconds have elapsed. Useful for implementing
|
|
behavior that should only happen <i>after</i> the input has stopped arriving.
|
|
For example: rendering a preview of a Markdown comment, recalculating a
|
|
layout after the window has stopped being resized...
|
|
</p>
|
|
<pre>
|
|
var lazyLayout = _.debounce(calculateLayout, 300);
|
|
$(window).resize(lazyLayout);
|
|
</pre>
|
|
|
|
<p id="once">
|
|
<b class="header">once</b><code>_.once(function)</code>
|
|
<br />
|
|
Creates a version of the function that can only be called one time.
|
|
Repeated calls to the modified function will have no effect, returning
|
|
the value from the original call. Useful for initialization functions,
|
|
instead of having to set a boolean flag and then check it later.
|
|
</p>
|
|
<pre>
|
|
var initialize = _.once(createApplication);
|
|
initialize();
|
|
initialize();
|
|
// Application is only created once.
|
|
</pre>
|
|
|
|
<p id="after">
|
|
<b class="header">after</b><code>_.after(count, function)</code>
|
|
<br />
|
|
Creates a version of the function that will only be run after first
|
|
being called <b>count</b> times. Useful for grouping asynchronous responses,
|
|
where you want to be sure that all the async calls have finished, before
|
|
proceeding.
|
|
</p>
|
|
<pre>
|
|
var renderNotes = _.after(notes.length, render);
|
|
_.each(notes, function(note) {
|
|
note.asyncSave({success: renderNotes});
|
|
});
|
|
// renderNotes is run once, after all notes have saved.
|
|
</pre>
|
|
|
|
<p id="wrap">
|
|
<b class="header">wrap</b><code>_.wrap(function, wrapper)</code>
|
|
<br />
|
|
Wraps the first <b>function</b> inside of the <b>wrapper</b> function,
|
|
passing it as the first argument. This allows the <b>wrapper</b> to
|
|
execute code before and after the <b>function</b> runs, adjust the arguments,
|
|
and execute it conditionally.
|
|
</p>
|
|
<pre>
|
|
var hello = function(name) { return "hello: " + name; };
|
|
hello = _.wrap(hello, function(func) {
|
|
return "before, " + func("moe") + ", after";
|
|
});
|
|
hello();
|
|
=> 'before, hello: moe, after'
|
|
</pre>
|
|
|
|
<p id="compose">
|
|
<b class="header">compose</b><code>_.compose(*functions)</code>
|
|
<br />
|
|
Returns the composition of a list of <b>functions</b>, where each function
|
|
consumes the return value of the function that follows. In math terms,
|
|
composing the functions <i>f()</i>, <i>g()</i>, and <i>h()</i> produces
|
|
<i>f(g(h()))</i>.
|
|
</p>
|
|
<pre>
|
|
var greet = function(name){ return "hi: " + name; };
|
|
var exclaim = function(statement){ return statement + "!"; };
|
|
var welcome = _.compose(exclaim, greet);
|
|
welcome('moe');
|
|
=> 'hi: moe!'
|
|
</pre>
|
|
|
|
<h2>Object Functions</h2>
|
|
|
|
<p id="keys">
|
|
<b class="header">keys</b><code>_.keys(object)</code>
|
|
<br />
|
|
Retrieve all the names of the <b>object</b>'s properties.
|
|
</p>
|
|
<pre>
|
|
_.keys({one : 1, two : 2, three : 3});
|
|
=> ["one", "two", "three"]
|
|
</pre>
|
|
|
|
<p id="values">
|
|
<b class="header">values</b><code>_.values(object)</code>
|
|
<br />
|
|
Return all of the values of the <b>object</b>'s properties.
|
|
</p>
|
|
<pre>
|
|
_.values({one : 1, two : 2, three : 3});
|
|
=> [1, 2, 3]
|
|
</pre>
|
|
|
|
<p id="functions">
|
|
<b class="header">functions</b><code>_.functions(object)</code>
|
|
<span class="alias">Alias: <b>methods</b></span>
|
|
<br />
|
|
Returns a sorted list of the names of every method in an object —
|
|
that is to say, the name of every function property of the object.
|
|
</p>
|
|
<pre>
|
|
_.functions(_);
|
|
=> ["all", "any", "bind", "bindAll", "clone", "compact", "compose" ...
|
|
</pre>
|
|
|
|
<p id="extend">
|
|
<b class="header">extend</b><code>_.extend(destination, *sources)</code>
|
|
<br />
|
|
Copy all of the properties in the <b>source</b> objects over to the
|
|
<b>destination</b> object. It's in-order, to the last source will override
|
|
properties of the same name in previous arguments.
|
|
</p>
|
|
<pre>
|
|
_.extend({name : 'moe'}, {age : 50});
|
|
=> {name : 'moe', age : 50}
|
|
</pre>
|
|
|
|
<p id="defaults">
|
|
<b class="header">defaults</b><code>_.defaults(object, *defaults)</code>
|
|
<br />
|
|
Fill in missing properties in <b>object</b> with default values from the
|
|
<b>defaults</b> objects. As soon as the property is filled, further defaults
|
|
will have no effect.
|
|
</p>
|
|
<pre>
|
|
var iceCream = {flavor : "chocolate"};
|
|
_.defaults(iceCream, {flavor : "vanilla", sprinkles : "lots"});
|
|
=> {flavor : "chocolate", sprinkles : "lots"}
|
|
</pre>
|
|
|
|
<p id="clone">
|
|
<b class="header">clone</b><code>_.clone(object)</code>
|
|
<br />
|
|
Create a shallow-copied clone of the <b>object</b>. Any nested objects
|
|
or arrays will be copied by reference, not duplicated.
|
|
</p>
|
|
<pre>
|
|
_.clone({name : 'moe'});
|
|
=> {name : 'moe'};
|
|
</pre>
|
|
|
|
<p id="tap">
|
|
<b class="header">tap</b><code>_.tap(object, interceptor)</code>
|
|
<br />
|
|
Invokes <b>interceptor</b> with the <b>object</b>, and then returns <b>object</b>.
|
|
The primary purpose of this method is to "tap into" a method chain, in order to perform operations on intermediate results within the chain.
|
|
</p>
|
|
<pre>
|
|
_([1,2,3,200]).chain().
|
|
select(function(num) { return num % 2 == 0; }).
|
|
tap(console.log).
|
|
map(function(num) { return num * num }).
|
|
value();
|
|
=> [2, 200]
|
|
=> [4, 40000]
|
|
</pre>
|
|
|
|
<p id="isEqual">
|
|
<b class="header">isEqual</b><code>_.isEqual(object, other)</code>
|
|
<br />
|
|
Performs an optimized deep comparison between the two objects, to determine
|
|
if they should be considered equal.
|
|
</p>
|
|
<pre>
|
|
var moe = {name : 'moe', luckyNumbers : [13, 27, 34]};
|
|
var clone = {name : 'moe', luckyNumbers : [13, 27, 34]};
|
|
moe == clone;
|
|
=> false
|
|
_.isEqual(moe, clone);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isEmpty">
|
|
<b class="header">isEmpty</b><code>_.isEmpty(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> contains no values.
|
|
</p>
|
|
<pre>
|
|
_.isEmpty([1, 2, 3]);
|
|
=> false
|
|
_.isEmpty({});
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isElement">
|
|
<b class="header">isElement</b><code>_.isElement(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a DOM element.
|
|
</p>
|
|
<pre>
|
|
_.isElement(jQuery('body')[0]);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isArray">
|
|
<b class="header">isArray</b><code>_.isArray(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is an Array.
|
|
</p>
|
|
<pre>
|
|
(function(){ return _.isArray(arguments); })();
|
|
=> false
|
|
_.isArray([1,2,3]);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isArguments">
|
|
<b class="header">isArguments</b><code>_.isArguments(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is an Arguments object.
|
|
</p>
|
|
<pre>
|
|
(function(){ return _.isArguments(arguments); })(1, 2, 3);
|
|
=> true
|
|
_.isArguments([1,2,3]);
|
|
=> false
|
|
</pre>
|
|
|
|
<p id="isFunction">
|
|
<b class="header">isFunction</b><code>_.isFunction(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a Function.
|
|
</p>
|
|
<pre>
|
|
_.isFunction(alert);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isString">
|
|
<b class="header">isString</b><code>_.isString(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a String.
|
|
</p>
|
|
<pre>
|
|
_.isString("moe");
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isNumber">
|
|
<b class="header">isNumber</b><code>_.isNumber(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a Number.
|
|
</p>
|
|
<pre>
|
|
_.isNumber(8.4 * 5);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isBoolean">
|
|
<b class="header">isBoolean</b><code>_.isBoolean(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is either <i>true</i> or <i>false</i>.
|
|
</p>
|
|
<pre>
|
|
_.isBoolean(null);
|
|
=> false
|
|
</pre>
|
|
|
|
<p id="isDate">
|
|
<b class="header">isDate</b><code>_.isDate(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a Date.
|
|
</p>
|
|
<pre>
|
|
_.isDate(new Date());
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isRegExp">
|
|
<b class="header">isRegExp</b><code>_.isRegExp(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is a RegExp.
|
|
</p>
|
|
<pre>
|
|
_.isRegExp(/moe/);
|
|
=> true
|
|
</pre>
|
|
|
|
<p id="isNaN">
|
|
<b class="header">isNaN</b><code>_.isNaN(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>object</b> is <i>NaN</i>.<br /> Note: this is not
|
|
the same as the native <b>isNaN</b> function, which will also return
|
|
true if the variable is <i>undefined</i>.
|
|
</p>
|
|
<pre>
|
|
_.isNaN(NaN);
|
|
=> true
|
|
isNaN(undefined);
|
|
=> true
|
|
_.isNaN(undefined);
|
|
=> false
|
|
</pre>
|
|
|
|
<p id="isNull">
|
|
<b class="header">isNull</b><code>_.isNull(object)</code>
|
|
<br />
|
|
Returns <i>true</i> if the value of <b>object</b> is <i>null</i>.
|
|
</p>
|
|
<pre>
|
|
_.isNull(null);
|
|
=> true
|
|
_.isNull(undefined);
|
|
=> false
|
|
</pre>
|
|
|
|
<p id="isUndefined">
|
|
<b class="header">isUndefined</b><code>_.isUndefined(variable)</code>
|
|
<br />
|
|
Returns <i>true</i> if <b>variable</b> is <i>undefined</i>.
|
|
</p>
|
|
<pre>
|
|
_.isUndefined(window.missingVariable);
|
|
=> true
|
|
</pre>
|
|
|
|
<h2>Utility Functions</h2>
|
|
|
|
<p id="noConflict">
|
|
<b class="header">noConflict</b><code>_.noConflict()</code>
|
|
<br />
|
|
Give control of the "_" variable back to its previous owner. Returns
|
|
a reference to the <b>Underscore</b> object.
|
|
</p>
|
|
<pre>
|
|
var underscore = _.noConflict();</pre>
|
|
|
|
<p id="identity">
|
|
<b class="header">identity</b><code>_.identity(value)</code>
|
|
<br />
|
|
Returns the same value that is used as the argument. In math:
|
|
<tt>f(x) = x</tt><br />
|
|
This function looks useless, but is used throughout Underscore as
|
|
a default iterator.
|
|
</p>
|
|
<pre>
|
|
var moe = {name : 'moe'};
|
|
moe === _.identity(moe);
|
|
=> true</pre>
|
|
|
|
<p id="times">
|
|
<b class="header">times</b><code>_.times(n, iterator)</code>
|
|
<br />
|
|
Invokes the given iterator function <b>n</b> times.
|
|
</p>
|
|
<pre>
|
|
_(3).times(function(){ genie.grantWish(); });</pre>
|
|
|
|
<p id="mixin">
|
|
<b class="header">mixin</b><code>_.mixin(object)</code>
|
|
<br />
|
|
Allows you to extend Underscore with your own utility functions. Pass
|
|
a hash of <tt>{name: function}</tt> definitions to have your functions
|
|
added to the Underscore object, as well as the OOP wrapper.
|
|
</p>
|
|
<pre>
|
|
_.mixin({
|
|
capitalize : function(string) {
|
|
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
|
|
}
|
|
});
|
|
_("fabio").capitalize();
|
|
=> "Fabio"
|
|
</pre>
|
|
|
|
<p id="uniqueId">
|
|
<b class="header">uniqueId</b><code>_.uniqueId([prefix])</code>
|
|
<br />
|
|
Generate a globally-unique id for client-side models or DOM elements
|
|
that need one. If <b>prefix</b> is passed, the id will be appended to it.
|
|
</p>
|
|
<pre>
|
|
_.uniqueId('contact_');
|
|
=> 'contact_104'</pre>
|
|
|
|
<p id="template">
|
|
<b class="header">template</b><code>_.template(templateString, [context])</code>
|
|
<br />
|
|
Compiles JavaScript templates into functions that can be evaluated
|
|
for rendering. Useful for rendering complicated bits of HTML from JSON
|
|
data sources. Template functions can both interpolate variables, using<br />
|
|
<tt><%= … %></tt>, as well as execute arbitrary JavaScript code, with
|
|
<tt><% … %></tt>. When you evaluate a template function, pass in a
|
|
<b>context</b> object that has properties corresponding to the template's free
|
|
variables. If you're writing a one-off, you can pass the <b>context</b>
|
|
object as the second parameter to <b>template</b> in order to render
|
|
immediately instead of returning a template function.
|
|
</p>
|
|
<pre>
|
|
var compiled = _.template("hello: <%= name %>");
|
|
compiled({name : 'moe'});
|
|
=> "hello: moe"
|
|
|
|
var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
|
|
_.template(list, {people : ['moe', 'curly', 'larry']});
|
|
=> "<li>moe</li><li>curly</li><li>larry</li>"</pre>
|
|
|
|
<p>
|
|
You can also use <tt>print</tt> from within JavaScript code. This is
|
|
sometimes more convenient than using <tt><%= ... %></tt>.
|
|
</p>
|
|
|
|
<pre>
|
|
var compiled = _.template("<% print('Hello ' + epithet); %>");
|
|
compiled({epithet: "stooge"});
|
|
=> "Hello stooge."</pre>
|
|
|
|
<p>
|
|
If ERB-style delimiters aren't your cup of tea, you can change Underscore's
|
|
template settings to use different symbols to set off interpolated code.
|
|
Define an <b>interpolate</b> regex, and an (optional) <b>evaluate</b> regex
|
|
to match expressions that should be inserted and evaluated, respectively.
|
|
If no <b>evaluate</b> regex is provided, your templates will only be
|
|
capable of interpolating values.
|
|
For example, to perform
|
|
<a href="http://github.com/janl/mustache.js#readme">Mustache.js</a>
|
|
style templating:
|
|
</p>
|
|
|
|
<pre>
|
|
_.templateSettings = {
|
|
interpolate : /\{\{(.+?)\}\}/g
|
|
};
|
|
|
|
var template = _.template("Hello {{ name }}!");
|
|
template({name : "Mustache"});
|
|
=> "Hello Mustache!"</pre>
|
|
|
|
<h2>Chaining</h2>
|
|
|
|
<p id="chain">
|
|
<b class="header">chain</b><code>_(obj).chain()</code>
|
|
<br />
|
|
Returns a wrapped object. Calling methods on this object will continue
|
|
to return wrapped objects until <tt>value</tt> is used. (
|
|
<a href="#styles">A more realistic example.</a>)
|
|
</p>
|
|
<pre>
|
|
var stooges = [{name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23}];
|
|
var youngest = _(stooges).chain()
|
|
.sortBy(function(stooge){ return stooge.age; })
|
|
.map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
|
|
.first()
|
|
.value();
|
|
=> "moe is 21"
|
|
</pre>
|
|
|
|
<p id="value">
|
|
<b class="header">value</b><code>_(obj).value()</code>
|
|
<br />
|
|
Extracts the value of a wrapped object.
|
|
</p>
|
|
<pre>
|
|
_([1, 2, 3]).value();
|
|
=> [1, 2, 3]
|
|
</pre>
|
|
|
|
<h2 id="duck_typing">Duck Typing</h2>
|
|
|
|
<p>
|
|
The <b>isType</b> (<tt>isArray</tt>, <tt>isFunction</tt>, <tt>isString</tt> ...) family of type-checking
|
|
functions use property detection to do their work, which, although
|
|
orders of magnitude faster than the alternative, isn't entirely safe when dealing
|
|
with objects that are used as hashes, where arbitrary strings are being
|
|
set for the keys. It's entirely possible for an object to masquerade as
|
|
another type, if you're setting properties with names like "concat" and
|
|
"charCodeAt". So be aware.
|
|
</p>
|
|
|
|
|
|
<h2>Links & Suggested Reading</h2>
|
|
|
|
<p>
|
|
<a href="http://mirven.github.com/underscore.lua/">Underscore.lua</a>,
|
|
a Lua port of the functions that are applicable in both languages.
|
|
Includes OOP-wrapping and chaining.
|
|
The <a href="http://github.com/mirven/underscore.lua">source</a> is
|
|
available on GitHub.
|
|
</p>
|
|
|
|
<p>
|
|
<a href="https://github.com/edtsech/underscore.string">Underscore.string</a>,
|
|
an Underscore extension that adds functions for string-manipulation:
|
|
<tt>trim</tt>, <tt>startsWith</tt>, <tt>contains</tt>, <tt>capitalize</tt>,
|
|
<tt>reverse</tt>, <tt>sprintf</tt>, and more.
|
|
</p>
|
|
|
|
<p>
|
|
Ruby's <a href="http://ruby-doc.org/core/classes/Enumerable.html">Enumerable</a> module.
|
|
</p>
|
|
|
|
<p>
|
|
<a href="http://www.prototypejs.org/">Prototype.js</a>, which provides
|
|
JavaScript with collection functions in the manner closest to Ruby's Enumerable.
|
|
</p>
|
|
|
|
<p>
|
|
Oliver Steele's
|
|
<a href="http://osteele.com/sources/javascript/functional/">Functional JavaScript</a>,
|
|
which includes comprehensive higher-order function support as well as string lambdas.
|
|
</p>
|
|
|
|
<p>
|
|
Michael Aufreiter's <a href="http://substance.io/#michael/data-js">Data.js</a>,
|
|
a data manipulation + persistence library for JavaScript.
|
|
</p>
|
|
|
|
<p>
|
|
Python's <a href="http://docs.python.org/library/itertools.html">itertools</a>.
|
|
</p>
|
|
|
|
<h2 id="changelog">Change Log</h2>
|
|
|
|
<p>
|
|
<b class="header">1.1.7</b> — <small><i>July 13, 2011</i></small><br />
|
|
Added <tt>_.groupBy</tt>, which aggregates a collection into groups of like items.
|
|
Added <tt>_.untion</tt> and <tt>_.difference</tt>, to complement the
|
|
(re-named) <tt>_.intersection</tt>.
|
|
Various improvements for support of sparse arrays.
|
|
<tt>_.toArray</tt> now returns a clone, if directly passed an array.
|
|
<tt>_.functions</tt> now also returns the names of functions that are present
|
|
in the prototype chain.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.6</b> — <small><i>April 18, 2011</i></small><br />
|
|
Added <tt>_.after</tt>, which will return a function that only runs after
|
|
first being called a specified number of times.
|
|
<tt>_.invoke</tt> can now take a direct function reference.
|
|
<tt>_.every</tt> now requires an iterator function to be passed, which
|
|
mirrors the ECMA5 API.
|
|
<tt>_.extend</tt> no longer copies keys when the value is undefined.
|
|
<tt>_.bind</tt> now errors when trying to bind an undefined value.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.5</b> — <small><i>Mar 20, 2011</i></small><br />
|
|
Added an <tt>_.defaults</tt> function, for use merging together JS objects
|
|
representing default options.
|
|
Added an <tt>_.once</tt> function, for manufacturing functions that should
|
|
only ever execute a single time.
|
|
<tt>_.bind</tt> now delegates to the native ECMAScript 5 version,
|
|
where available.
|
|
<tt>_.keys</tt> now throws an error when used on non-Object values, as in
|
|
ECMAScript 5.
|
|
Fixed a bug with <tt>_.keys</tt> when used over sparse arrays.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.4</b> — <small><i>Jan 9, 2011</i></small><br />
|
|
Improved compliance with ES5's Array methods when passing <tt>null</tt>
|
|
as a value. <tt>_.wrap</tt> now correctly sets <tt>this</tt> for the
|
|
wrapped function. <tt>_.indexOf</tt> now takes an optional flag for
|
|
finding the insertion index in an array that is guaranteed to already
|
|
be sorted. Avoiding the use of <tt>.callee</tt>, to allow <tt>_.isArray</tt>
|
|
to work properly in ES5's strict mode.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.3</b> — <small><i>Dec 1, 2010</i></small><br />
|
|
In CommonJS, Underscore may now be required with just: <br />
|
|
<tt>var _ = require("underscore")</tt>.
|
|
Added <tt>_.throttle</tt> and <tt>_.debounce</tt> functions.
|
|
Removed <tt>_.breakLoop</tt>, in favor of an ECMA5-style un-<i>break</i>-able
|
|
each implementation — this removes the try/catch, and you'll now have
|
|
better stack traces for exceptions that are thrown within an Underscore iterator.
|
|
Improved the <b>isType</b> family of functions for better interoperability
|
|
with Internet Explorer host objects.
|
|
<tt>_.template</tt> now correctly escapes backslashes in templates.
|
|
Improved <tt>_.reduce</tt> compatibility with the ECMA5 version:
|
|
if you don't pass an initial value, the first item in the collection is used.
|
|
<tt>_.each</tt> no longer returns the iterated collection, for improved
|
|
consistency with ES5's <tt>forEach</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.2</b><br />
|
|
Fixed <tt>_.contains</tt>, which was mistakenly pointing at
|
|
<tt>_.intersect</tt> instead of <tt>_.include</tt>, like it should
|
|
have been. Added <tt>_.unique</tt> as an alias for <tt>_.uniq</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.1</b><br />
|
|
Improved the speed of <tt>_.template</tt>, and its handling of multiline
|
|
interpolations. Ryan Tenney contributed optimizations to many Underscore
|
|
functions. An annotated version of the source code is now available.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.1.0</b><br />
|
|
The method signature of <tt>_.reduce</tt> has been changed to match
|
|
the ECMAScript 5 signature, instead of the Ruby/Prototype.js version.
|
|
This is a backwards-incompatible change. <tt>_.template</tt> may now be
|
|
called with no arguments, and preserves whitespace. <tt>_.contains</tt>
|
|
is a new alias for <tt>_.include</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.0.4</b><br />
|
|
<a href="http://themoell.com/">Andri Möll</a> contributed the <tt>_.memoize</tt>
|
|
function, which can be used to speed up expensive repeated computations
|
|
by caching the results.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.0.3</b><br />
|
|
Patch that makes <tt>_.isEqual</tt> return <tt>false</tt> if any property
|
|
of the compared object has a <tt>NaN</tt> value. Technically the correct
|
|
thing to do, but of questionable semantics. Watch out for NaN comparisons.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.0.2</b><br />
|
|
Fixes <tt>_.isArguments</tt> in recent versions of Opera, which have
|
|
arguments objects as real Arrays.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.0.1</b><br />
|
|
Bugfix for <tt>_.isEqual</tt>, when comparing two objects with the same
|
|
number of undefined keys, but with different names.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">1.0.0</b><br />
|
|
Things have been stable for many months now, so Underscore is now
|
|
considered to be out of beta, at <b>1.0</b>. Improvements since <b>0.6</b>
|
|
include <tt>_.isBoolean</tt>, and the ability to have <tt>_.extend</tt>
|
|
take multiple source objects.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.6.0</b><br />
|
|
Major release. Incorporates a number of
|
|
<a href="http://github.com/ratbeard">Mile Frawley's</a> refactors for
|
|
safer duck-typing on collection functions, and cleaner internals. A new
|
|
<tt>_.mixin</tt> method that allows you to extend Underscore with utility
|
|
functions of your own. Added <tt>_.times</tt>, which works the same as in
|
|
Ruby or Prototype.js. Native support for ECMAScript 5's <tt>Array.isArray</tt>,
|
|
and <tt>Object.keys</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.8</b><br />
|
|
Fixed Underscore's collection functions to work on
|
|
<a href="https://developer.mozilla.org/En/DOM/NodeList">NodeLists</a> and
|
|
<a href="https://developer.mozilla.org/En/DOM/HTMLCollection">HTMLCollections</a>
|
|
once more, thanks to
|
|
<a href="http://github.com/jmtulloss">Justin Tulloss</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.7</b><br />
|
|
A safer implementation of <tt>_.isArguments</tt>, and a
|
|
faster <tt>_.isNumber</tt>,<br />thanks to
|
|
<a href="http://jedschmidt.com/">Jed Schmidt</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.6</b><br />
|
|
Customizable delimiters for <tt>_.template</tt>, contributed by
|
|
<a href="http://github.com/iamnoah">Noah Sloan</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.5</b><br />
|
|
Fix for a bug in MobileSafari's OOP-wrapper, with the arguments object.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.4</b><br />
|
|
Fix for multiple single quotes within a template string for
|
|
<tt>_.template</tt>. See:
|
|
<a href="http://www.west-wind.com/Weblog/posts/509108.aspx">Rick Strahl's blog post</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.2</b><br />
|
|
New implementations of <tt>isArray</tt>, <tt>isDate</tt>, <tt>isFunction</tt>,
|
|
<tt>isNumber</tt>, <tt>isRegExp</tt>, and <tt>isString</tt>, thanks to
|
|
a suggestion from
|
|
<a href="http://www.broofa.com/">Robert Kieffer</a>.
|
|
Instead of doing <tt>Object#toString</tt>
|
|
comparisons, they now check for expected properties, which is less safe,
|
|
but more than an order of magnitude faster. Most other Underscore
|
|
functions saw minor speed improvements as a result.
|
|
<a href="http://dolzhenko.org/">Evgeniy Dolzhenko</a>
|
|
contributed <tt>_.tap</tt>,
|
|
<a href="http://ruby-doc.org/core-1.9/classes/Object.html#M000191">similar to Ruby 1.9's</a>,
|
|
which is handy for injecting side effects (like logging) into chained calls.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.1</b><br />
|
|
Added an <tt>_.isArguments</tt> function. Lots of little safety checks
|
|
and optimizations contributed by
|
|
<a href="http://github.com/iamnoah/">Noah Sloan</a> and
|
|
<a href="http://themoell.com/">Andri Möll</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.5.0</b><br />
|
|
<b>[API Changes]</b> <tt>_.bindAll</tt> now takes the context object as
|
|
its first parameter. If no method names are passed, all of the context
|
|
object's methods are bound to it, enabling chaining and easier binding.
|
|
<tt>_.functions</tt> now takes a single argument and returns the names
|
|
of its Function properties. Calling <tt>_.functions(_)</tt> will get you
|
|
the previous behavior.
|
|
Added <tt>_.isRegExp</tt> so that <tt>isEqual</tt> can now test for RegExp equality.
|
|
All of the "is" functions have been shrunk down into a single definition.
|
|
<a href="http://github.com/grayrest/">Karl Guertin</a> contributed patches.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.7</b><br />
|
|
Added <tt>isDate</tt>, <tt>isNaN</tt>, and <tt>isNull</tt>, for completeness.
|
|
Optimizations for <tt>isEqual</tt> when checking equality between Arrays
|
|
or Dates. <tt>_.keys</tt> is now <small><i><b>25%–2X</b></i></small> faster (depending on your
|
|
browser) which speeds up the functions that rely on it, such as <tt>_.each</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.6</b><br />
|
|
Added the <tt>range</tt> function, a port of the
|
|
<a href="http://docs.python.org/library/functions.html#range">Python
|
|
function of the same name</a>, for generating flexibly-numbered lists
|
|
of integers. Original patch contributed by
|
|
<a href="http://github.com/kylichuku">Kirill Ishanov</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.5</b><br />
|
|
Added <tt>rest</tt> for Arrays and arguments objects, and aliased
|
|
<tt>first</tt> as <tt>head</tt>, and <tt>rest</tt> as <tt>tail</tt>,
|
|
thanks to <a href="http://github.com/lukesutton/">Luke Sutton</a>'s patches.
|
|
Added tests ensuring that all Underscore Array functions also work on
|
|
<i>arguments</i> objects.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.4</b><br />
|
|
Added <tt>isString</tt>, and <tt>isNumber</tt>, for consistency. Fixed
|
|
<tt>_.isEqual(NaN, NaN)</tt> to return <i>true</i> (which is debatable).
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.3</b><br />
|
|
Started using the native <tt>StopIteration</tt> object in browsers that support it.
|
|
Fixed Underscore setup for CommonJS environments.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.2</b><br />
|
|
Renamed the unwrapping function to <tt>value</tt>, for clarity.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.1</b><br />
|
|
Chained Underscore objects now support the Array prototype methods, so
|
|
that you can perform the full range of operations on a wrapped array
|
|
without having to break your chain. Added a <tt>breakLoop</tt> method
|
|
to <b>break</b> in the middle of any Underscore iteration. Added an
|
|
<tt>isEmpty</tt> function that works on arrays and objects.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.4.0</b><br />
|
|
All Underscore functions can now be called in an object-oriented style,
|
|
like so: <tt>_([1, 2, 3]).map(...);</tt>. Original patch provided by
|
|
<a href="http://macournoyer.com/">Marc-André Cournoyer</a>.
|
|
Wrapped objects can be chained through multiple
|
|
method invocations. A <a href="#functions"><tt>functions</tt></a> method
|
|
was added, providing a sorted list of all the functions in Underscore.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.3.3</b><br />
|
|
Added the JavaScript 1.8 function <tt>reduceRight</tt>. Aliased it
|
|
as <tt>foldr</tt>, and aliased <tt>reduce</tt> as <tt>foldl</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.3.2</b><br />
|
|
Now runs on stock <a href="http://www.mozilla.org/rhino/">Rhino</a>
|
|
interpreters with: <tt>load("underscore.js")</tt>.
|
|
Added <a href="#identity"><tt>identity</tt></a> as a utility function.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.3.1</b><br />
|
|
All iterators are now passed in the original collection as their third
|
|
argument, the same as JavaScript 1.6's <b>forEach</b>. Iterating over
|
|
objects is now called with <tt>(value, key, collection)</tt>, for details
|
|
see <a href="#each"><tt>_.each</tt></a>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.3.0</b><br />
|
|
Added <a href="http://github.com/dmitryBaranovskiy">Dmitry Baranovskiy</a>'s
|
|
comprehensive optimizations, merged in
|
|
<a href="http://github.com/kriskowal/">Kris Kowal</a>'s patches to make Underscore
|
|
<a href="http://wiki.commonjs.org/wiki/CommonJS">CommonJS</a> and
|
|
<a href="http://narwhaljs.org/">Narwhal</a> compliant.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.2.0</b><br />
|
|
Added <tt>compose</tt> and <tt>lastIndexOf</tt>, renamed <tt>inject</tt> to
|
|
<tt>reduce</tt>, added aliases for <tt>inject</tt>, <tt>filter</tt>,
|
|
<tt>every</tt>, <tt>some</tt>, and <tt>forEach</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.1.1</b><br />
|
|
Added <tt>noConflict</tt>, so that the "Underscore" object can be assigned to
|
|
other variables.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header">0.1.0</b><br />
|
|
Initial release of Underscore.js.
|
|
</p>
|
|
|
|
<p>
|
|
<a href="http://documentcloud.org/" title="A DocumentCloud Project" style="background:none;">
|
|
<img src="http://jashkenas.s3.amazonaws.com/images/a_documentcloud_project.png" alt="A DocumentCloud Project" />
|
|
</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Include Underscore, so you can play with it in the console. -->
|
|
<script type="text/javascript" src="underscore.js"></script>
|
|
|
|
</body>
|
|
</html>
|