Geek Answers Handbook

Zepto using array.filter

I am trying to increase understanding of Javascript, so I am browsing the Zepto library. I came across this line:

uniq = function(array){ return array.filter(function(item, idx){ return array.indexOf(item) == idx }) }

What is the purpose of this feature? From what I can say, it creates a new, unique array of elements, right? But isn't this just cloning an array? If yes, is array.slice() faster?

Finally, won't performance increase to change array.indexOf(item) to array.indexOf(item,idx) ? Or better yet, just return true ? When is array.indexOf(item)==idx not true? Does this prevent duplication of items? But when will this really happen?

+4
source share
5 answers

it is creating a new, unique array of elements, right?

It simply filters the elements of the array to return unique elements.

demonstration

But isn't it essentially just cloning the array?

No, as I explain above.

If so, wouldn't array.slice() be faster?

Slice does not remove duplicates.

Finally, wouldn't it increase performance to change array.indexOf(item) to array.indexOf(item,idx)? Or better yet, just return true?

If you return true, you will not identify whether this element will be duplicated or not.

demonstration

When does array.indexOf(item)==idx not equal true?

Example:
I have the following array:

['10', '20', '30', '20', '10']

Iterations

  • 1: array.IndexOf(10) == 0 ? // yes, so return true
  • 2: array.IndexOf(20) == 1 ? // yes, so return true
  • 3: array.IndexOf(30) == 2 ? // yes, so return true
  • 4: array.IndexOf(20) == 3 ? // no, because array.indexOf(20) is 1, so return false
  • 5: array.IndexOf(10) == 4 ? // no, because array.indexOf(10) is 2, so return false

So, when an element is already found, it gets false because the indices do not match.

+3
source

This code seems to eliminate duplicates.

+1
source

Ah, I see the “difference” we are asking. You answered that, but in your editing. I think this method returns a new array containing unique values ​​from the original.

When the indexOf method scans an array, it detects the first occurrence of the object being checked. If this event does not match the index of the currently checked index, the result of indexOf will not be idx . Therefore, it will not return a value because it either was not found or was found earlier in the array (which means its duplicate).

Here is an example:

 [10, 30, 10, 100]

When filter methods go through elements: 10 , 30 , 10 , then 100 , it will execute indexOf on it.

For 10 , indexOf will return 0 . And idx also 0 .

For 30 , indexOf will return 1 . And idx also 1 .

For 10 , indexOf will return 0 . But idx will be 2 .

For 100 , indexOf will return 3 . And idx also 3 .

Consequently, [10, 30, 100] returned, and not just a simple clone of the original.

+1
source

The function (as indicated) takes unique elements in the original array and returns them to the new array. Therefore, if the original array has different elements, it will simply return a clone.

Remember that indexOf returns the first index of this element. Therefore, if the current element appears twice in the array, the filter value will be false.

For instance.

 var a = [1, 2, 3]; var b = [1, 2, 3, 2]; console.log(uniq(a)); // [1,2,3] console.log(uniq(b)); // [1,2,3]

0
source

As others have said, this eliminates duplicates in the array. Just added your answer to show why this works. If you select the values ​​inside the filter function, you will see a template:

 array.filter(function( item, idx ){ console.log( item, idx, array.indexOf( item ) ); ... ... console.log( uniq( ['a','a','b','b','c','c','c','d'] ) ); /* a 0 0 * a 1 0 b 2 2 * b 3 2 c 4 4 * c 5 4 c 6 4 d 7 7 * */

Check the last column to see if the item exists, so the comparison array.indexOf(item) == idx checks the second column if it is not the same number as the duplicate. For an element to be unique ( * ), the index and index position must match.

0
source

More articles:


All Articles