Example of deduplication in Javascript array

Source: Internet
Author: User

When writing JavaScript, often encounter the problem of the array to heavy, has been based on jquery write code, encountered in the array need to go heavy when the $.unique method often used, because the development test environment is a Chrome browser, so did not realize that they have been wrong for so long, It was not until yesterday that $.unique had some problems in IE.

Looked at the jquery API, which originally $.unique to only delete DOM element arrays, not strings or numeric arrays. Looked at the jquery source code, $.unique used the Sizzle.uniquesort method, as if in Chrome/firefox, because the browser support comparedocumentposition processing a string or numeric array, So can be in the non-IE browser can be the normal sort.

Refer to the other people wrote to the weight of the method, they made a little change:


Array.prototype.unique = function () {
if (This.length = = 0) return [];
This.sort ();
var re = [this[0]];
for (var i = 1; i < this.length; i++) {
if (This[i]!== re[re.length-1]) {
Re.push (This[i]);
}
}
return re;
}

How to use: [1,1,2].unique ()

This method applies only to the weight of numeric or string arrays.

Example

There are array var arr = [' A ', ' B ', ' C ', ' 1 ', 0, ' C ', 1, ', 1, 0],

Please use JavaScript to implement the unqiue, so that the unique (arr) return [' A ', ' B ', ' C ', ' 1 ', 0, 1, ']

As a question, there are two test centers:

1. Right. Do not underestimate this test site, considering JavaScript often to run in the browser, in a variety of browser environment to protect a function of the correctness is not a simple matter, do not believe you continue to read this blog.

2. Performance. Although most of the JavaScript language itself (narrowly defined, not including DOM extensions) does not cause performance problems, unfortunately this is a test, so the interviewer will still use performance as a test center.


A question to be prepared at the front end of the interview: How to remove duplicates from JavaScript array. As far as I know, Baidu, Tencent, Shanda and so on in the interview has been out of this topic. The problem seems simple, but it's actually a hidden murder. The test is not only to achieve this function, but also to see your computer program implementation of the in-depth understanding.

I've come up with three algorithms to achieve this:

1.array.prototype.unique1 = function ()
{
var n = []; A new, temporary array
for (var i = 0; i < this.length i++)//traverse the current array
{
If part I of the current array is already saved in a temporary array, skip,
Otherwise push the current item into the temporary array
if (N.indexof (this[i]) = = 1) n.push (this[i));
}
return n;
}2.array.prototype.unique2 = function ()
{
var n = {},r=[]; n is a hash table and r is a temporary array
for (var i = 0; i < this.length i++)//traverse the current array
{
if (!n[this[i]])//If there is no current item in the hash table
{
N[this[i]] = true; Deposit into a hash table
R.push (This[i]); Push the current item of the current array into a temporary array
}
}
return R;
}3.array.prototype.unique3 = function ()
{
var n = [This[0]]; Array of results
for (var i = 1; i < this.length i++)//Go through the second item
{
If the first occurrence of the current array in the current array is not the position I,
It means that item I is repetitive and ignored. Otherwise, the result array is stored
if (This.indexof (this[i]) = = i) N.push (This[i]);
}
return n;
}

Both the 1th and 3rd methods use the IndexOf method of the array. The purpose of this method is to find the position where the parameter is stored for the first time in the array. It is obvious that the JS engine will iterate through the array when it implements this method until it finds the target. So this function will waste a lot of time. The 2nd method uses a hash table. To deposit an object in a form that has already appeared through the subscript. The subscript reference is much faster than searching the array with indexof.

To determine the efficiency of these three methods, I did a test program that generated an array of 10000-length random numbers, and then tested the execution time in several ways. The results show that the second method is much faster than the other two methods. But memory footprint should be more than the second method, because there is more than one hash table.  This is called space exchange time. This is the test page, you can also go to see.

October 7, 2010 Update:

According to HPL Daniel, I wrote a fourth way:

Array.prototype.unique4 = function ()
{
This.sort ();
var re=[this[0]];
for (var i = 1; i < this.length; i++)
{
if (This[i]!== re[re.length-1])
{
Re.push (This[i]);
}
}
return re;
}

The idea of this method is to sort the array first and then compare the adjacent two values. The sort time uses the JS native sort method, the JS engine interior should be uses the quick sort. The result of the final test is that this method runs about three times times the average of the second method, but much faster than the first and third methods.

Efficiently remove duplicates from JS array


The array type does not provide a way to repeat, if you want to kill the repeating elements of the array, you have to do it yourself:


function Unique (arr) {
var result = [], isrepeated;
for (var i = 0, len = arr.length i < len; i++) {
isrepeated = false;
for (var j = 0, Len = result.length J < Len; J + +) {
if (arr[i] = = Result[j]) {
Isrepeated = true;
Break
}
}
if (!isrepeated) {
Result.push (Arr[i]);
}
}
return result;
}

The overall idea is to move the elements of the array to another array, the process of handling to check whether the element is duplicated, if there is a direct throw away. It can be seen from nested loops that this method is extremely inefficient. We can use a Hashtable structure to record existing elements so that the inner loops can be avoided. Exactly, implementing Hashtable in JavaScript is extremely simple, as follows:


function Unique (arr) {
var result = [], hash = {};
for (var i = 0, elem; (Elem = arr[i])!= null; i++) {
if (!hash[elem]) {
Result.push (Elem);
Hash[elem] = true;
}
}
return result;

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.