What is a Set?
ES6 adds a new data structure called Set. It is similar to an array, but it does not duplicate values.
What can be the parameters of new Set()?
1. Array
2. Objects similar to arrays
For example, the NodeList collection returned by the DOM operation and the arguments object inside the function.
//NodeList object document.querySelectorAll('p'); //Arguments object function args() { return arguments; }
3. It can even be a string
Attention
1. In the Set data structure, there is a size attribute, which can be regarded as the length of the array.
2. The Set data structure has no key name, that is, you cannot use the index to obtain a value like an array.
Convert Set structure to array
Although Set is similar to array, many methods in array cannot be used on Set. So sometimes you need to convert it into an array.
use Array.from method
This method is used to convert two types of objects into real arrays:
·Array like object
·Traversible objects (including the new data structures Set and Map in ES6)
For more information about Array.from, click here
Set Instance Method
Methods for adding/deleting/querying data in the instance:
·Add (value): add a value and return the Set structure itself.
·Delete (value): deletes a value and returns a Boolean value, indicating whether the deletion was successful.
·Has (value): returns a Boolean value, indicating whether the value is a member of Set.
·Clear(): Clear all members without return value.
var color = new Set(["red", "yellow", "blue"]); color.add("green"); // {"red", "yellow", "blue", "green"} color.delete("yellow"); // true color // {"red", "blue", "green"} color.has("blue"); // true color.has("yellow"); // false color.clear(); color // {}
Method for traversing data in the instance:
·Keys (): a traverser that returns the key name
·Values (): Iterator that returns key values
·Entries (): return the traverser of key value pairs
·ForEach (): use callback function to traverse each member
The keys (), values (), and entries () methods all return traverser objects.
Since the Set structure has no key name and only key value (or the key name and key value are the same value), the results of keys () and values () are the same.
var color = new Set(["red", "yellow", "blue"]); for(let item of color.keys()) { console.log(item); } // red // yellow // blue for(let item of color.values()) { console.log(item); } // red // yellow // blue for(let item of color.entries()) { console.log(item); } // ["red", "red"] // ["yellow", "yellow"] // ["blue", "blue"]
The forEach () method can be used just like an array, but unlike an array, the second parameter in the callback function is not an index, it is still a key value.
/*Set uses the forEach method*/ var color = new Set(["red", "yellow", "blue"]); color.forEach((value, key) => { console.log(`[${key}] ${value}`) }) // [red] red // [yellow] yellow // [blue] blue
/*Arrays using the forEach method*/ var userName = ["Barben", "Lonely", "Zero-B"]; userName.forEach((item, index) => { console.log(`[${index}] ${item}`); }) // [0] Barben // [1] Lonely // [2] Zero-B
