<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Martin's Blog &#187; javascript</title>
	<atom:link href="http://www.martienus.com/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.martienus.com</link>
	<description>Logic to Art</description>
	<lastBuildDate>Fri, 12 Feb 2010 19:07:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Javascript: Remove values from array prototype</title>
		<link>http://www.martienus.com/code/javascript-remove-values-from-array-prototype.html</link>
		<comments>http://www.martienus.com/code/javascript-remove-values-from-array-prototype.html#comments</comments>
		<pubDate>Wed, 29 Oct 2008 18:33:11 +0000</pubDate>
		<dc:creator>Martin</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[remove]]></category>

		<guid isPermaLink="false">http://www.martienus.com/?p=33</guid>
		<description><![CDATA[In order to remove certain values or objects from an array many people iterate through it and remove unwanted occurences with the splice() method. It does what you want it to do but it&#8217;s pretty cumbersome. There are far easier and simpler ways to remove a certain value from an array. If we have an [...]]]></description>
			<content:encoded><![CDATA[<p>In order to remove certain values or objects from an array many people iterate through it and remove unwanted occurences with the splice() method. It does what you want it to do but it&#8217;s pretty cumbersome. There are far easier and simpler ways to remove a certain value from an array.</p>
<p>If we have an array like so: arr = [1,2,2,3,4,5,2,6] and we&#8217;d do this: arr.remove(2) we&#8217;ll end up with [1,3,4,5,6]. Nobody likes two&#8217;s anyway.</p>
<p>Here is how I do it:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">remove</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>subject<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> n <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> n<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>subject<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			r<span style="color: #009900;">&#91;</span>r.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> r<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Why is this better?</p>
<ul>
<li>No copy of the original is needed to do the math</li>
<li>It is yet again inherently independent of other array prototypes or methods</li>
<li>It runs alot faster <img src='http://www.martienus.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </li>
</ul>
<p>So there you go, another mystery solved.<br />
Take care!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.martienus.com/code/javascript-remove-values-from-array-prototype.html/feed</wfw:commentRss>
		<slash:comments>8648</slash:comments>
		</item>
		<item>
		<title>Javascript: Remove duplicates from Array</title>
		<link>http://www.martienus.com/code/javascript-remove-duplicates-from-array.html</link>
		<comments>http://www.martienus.com/code/javascript-remove-duplicates-from-array.html#comments</comments>
		<pubDate>Fri, 21 Dec 2007 18:25:04 +0000</pubDate>
		<dc:creator>Martin</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[duplicate]]></category>
		<category><![CDATA[duplicates]]></category>
		<category><![CDATA[entries]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[remove]]></category>

		<guid isPermaLink="false">http://www.martienus.com/code/javascript-remove-duplicates-from-array.html</guid>
		<description><![CDATA[Removing duplicate entries or values from a Javascript array is something which isn&#8217;t accomodated for by the native functions in Javascript. I searched Google for a few solutions but they were all lacking something in my opinion, be it performance or just sheer elegance. *UPDATE* There is now an array prototype function for removing duplicates. [...]]]></description>
			<content:encoded><![CDATA[<p>Removing duplicate entries or values from a Javascript array is something which isn&#8217;t accomodated for by the native functions in Javascript. I searched Google for a few solutions but they were all lacking something in my opinion, be it performance or just sheer elegance.</p>
<p>*UPDATE*</p>
<p>There is now an array prototype function for removing duplicates. I suggest you use the prototype function instead of the functions below. It is the way it should have been done in the first place and is faster and moreover the most correct way to do it.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">unique</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	o<span style="color: #339933;">:</span><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> n <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> n<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> y <span style="color: #339933;">=</span> r.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> x <span style="color: #339933;">&lt;</span> y<span style="color: #339933;">;</span> x<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>r<span style="color: #009900;">&#91;</span>x<span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">continue</span> o<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		r<span style="color: #009900;">&#91;</span>r.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> r<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>You can now utilize the unique function like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span><span style="color: #CC0000;">6</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">7</span><span style="color: #339933;">,</span><span style="color: #CC0000;">8</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span><span style="color: #CC0000;">9</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> unique <span style="color: #339933;">=</span> arr.<span style="color: #660066;">unique</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>unique<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The result will be [1,2,3,4,5,6,7,8,9].</p>
<p>*UPDATE*</p>
<p>I therefore made two variants myself:</p>
<p>The first one does what you&#8217;ll expect, it&#8217;ll regard the first encountered entry as the original and all subsequent entries as duplicates.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> unique<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   o<span style="color: #339933;">:</span><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> n <span style="color: #339933;">=</span> a.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> n<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
   <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> y <span style="color: #339933;">=</span> r.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> x <span style="color: #339933;">&lt;</span> y<span style="color: #339933;">;</span> x<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
         <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>r<span style="color: #009900;">&#91;</span>x<span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>a<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">continue</span> o<span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      r<span style="color: #009900;">&#91;</span>r.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> a<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
   <span style="color: #000066; font-weight: bold;">return</span> r<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>If we pass the following array [1, 2, 3, 1, 4, 5] to the function the result will be [1, 2, 3, 4, 5].</p>
<p>The second variant returns different results. It will regard the last encountered duplicate as the original. This may be desirable in certain situations.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> unique<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   o<span style="color: #339933;">:</span><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> n <span style="color: #339933;">=</span> a.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> n<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> i <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">;</span> x <span style="color: #339933;">&lt;</span> n<span style="color: #339933;">;</span> x<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
         <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span>x<span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>a<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">continue</span> o<span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      r<span style="color: #009900;">&#91;</span>r.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> a<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
   <span style="color: #000066; font-weight: bold;">return</span> r<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>The output in this case will be [2, 3, 1, 4, 5].</p>
<p>I wrote both these functions with performance in mind. I have thoroughly tested and profiled both of them. Here are the benefits over other solutions to the problem:</p>
<ul>
<li>it&#8217;s just one function</li>
<li>the loop length is determined through the object model just once per loop (see the <strong>for</strong> statements: var i = 0, n = a.length;)</li>
<li>after a duplicate has been detected in the nested loop it doesn&#8217;t iterate further but goes on to the next entry in the source array (see <strong>continue</strong> statement)</li>
</ul>
<p>You can easily adapt the function to make it a prototype function of an Array object. If people don&#8217;t know how to do it just ask, i&#8217;ll add it.</p>
<p>Hope this helps someone out!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.martienus.com/code/javascript-remove-duplicates-from-array.html/feed</wfw:commentRss>
		<slash:comments>8595</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.433 seconds -->

