JAVA SCRIPT - Creating a Collection of Non-Duplicated Value - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript JAVA SCRIPT - Creating a Collection of Non-Duplicated Value - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Wednesday, March 6, 2019

JAVA SCRIPT - Creating a Collection of Non-Duplicated Value

Creating a Collection of Non-Duplicated Value


Problem

You want to create a collection of unique values. 

Solution

Use the new ECMAScript 6 Set object to create the collection:



var col1 = new Set();
col1.add("apple");
col1.add("oranges");
console.log(col1.size); // 2

EXPLAIN

Before ECMAScript 6, the only object JavaScript provided for collections was the Array. It’s been very useful, but has its limitations: one glaring example is lack of ability to enforce uniqueness of collection members without having to do some computationally expensive processing. 

To ensure a unique value in an Array, before you add the new member, you’d have to see if it was already in the Array by checking it against all existing members. No amount of fancy new Array methods is going to make this simpler. 

The Set handles uniqueness for us. If you try to add the same value multiple times, it’s added the first time and the rest of the additions are just ignored: 


col1.add("banana");
col1.add("banana"); // ignored
col1.add("banana"); // yup, still ignored


The Set also has a clean way of removing members, without having to use the splice() method:


col1.delete("banana"); // OK, all gone

To discover whether the Set has a specific value, use the has() method:

col1.has("banana"); // false, it was removed
col1.has("apple"); // true

You can also iterate through the members:

col1.forEach(function(value) {
 console.log(value);
});

as well as convert a Set to an Array using the new ES 6 spread operator:

var arr = [...col1];
console.log(arr[1]); // oranges

If the browser supports the spread operator, of course. The spread operator allows for expansion in place. Instead of specifying each member of the set when assigning to the new array, the spread operator performs a one-to-one assignment, until all members of the expanded object are exhausted. It can be used in array literals, as demonstrated in the code snippet, or it can be used with function arguments:

functionName(...iterableObj)

Returning to Set, you can also create a set from an array literal with the following syntax:

var col2 = new Set(['one','two','three']);
console.log(col2.size); // 3

And if you want to get rid of all the Set members, use clear():

col1.clear();
console.log(col1.size); // 0

Unlike some other JavaScript functionality, the Set does not do any type coercion. If you add 5 and "5", both will be added and treated as two distinct Set members. Think of how strict equality works: the only time Set won’t add a member is if they are strictly equal.

Advanced

A Set collection can consist of any number of object types, including objects. And that includes well-known objects, functions, even other Sets:

var mySet = new Set();
mySet.add(window);
mySet.add(function() { console.log("whoa");});
var mySet2 = new Set();
mySet2.add('test');
mySet2.add(5);
mySet2.add(true);
mySet.add(mySet2);
mySet.forEach(function(value) {
 console.log(value.toString());
});


The output from this code snippet is:


[object Window]
function () { console.log("whoa");}
[object Set]


There’s also a variation of Set that accepts only objects, and that’s WeakSet. The entire reason for this second object is that references to objects contained in the collection are weakly held.

When there is no other reference to the object in the collection, it can be garbage collected. The advantage to using WeakSet is that it helps prevent memory leaks.

However, because of their nature, you can’t enumerate through the collection members with a WeakSet, like you can with Set.

No comments:

Post a Comment

Post Top Ad