ES6 learning notes -- Set object

preface:

ES6 provides us with a new data structure, which is Set. In fact, the Set here is very similar to the Set in java,
All stored are key value pairs and cannot be repeated. Let me study together.

1, Concept and basic usage of Set

The Set object allows you to store unique values of any type of data, whether original values or object references.

Simply put, the Set object can store data of any data type and will automatically help us to redo it.

// Set to store arrays. Duplicate values are not allowed
let setArr = new Set(['I','love','you','love'])
console.log(setArr); // Set(3) {'I', 'love', 'you'}

However, when storing objects, you should note that the only value of the object stored in the Set is the physical memory address of the stored object, not the attribute value of the object. Therefore, when we create two different variables to store the same object, there will be two duplicate objects in the Set.

let set = new Set()
let obj = {a:'I', b:'love'}
let obj1 = {a:'I', b:'love'}
set.add(obj)
set.add(obj1)
console.log(set);

2, Instance properties and methods of Set

1. Instance properties

Set.prototype.constructor: constructor, which is set function by default.
Set.prototype.size: returns the total number of members of the set instance.

constructor doesn't say much. Creating a new Set object is a direct call.

size attribute

let setArr = new Set(['I','love','you','love'])
console.log(setArr.size); // 3

2. Example method

methoddescribe
add(value)Add a value and return the Set structure itself.
delete(value)When a value is deleted, a Boolean value is returned to indicate whether the deletion is successful.
has(value)Returns a Boolean value indicating whether the value is a member of Set.
clear()Clear all members without return value.
let setArr = new Set(['I','love','you','love'])
console.log(setArr);
// Add add
setArr.add('now')
console.log(setArr);
// has lookup
console.log(setArr.has('love')); // Found, return true
// Delete delete
console.log(setArr.delete('now')); // Delete succeeded, return true
console.log(setArr);
// Clear clear
setArr.clear()
console.log(setArr);

3. Traversal operation

methoddescribe
keys()Iterator that returns the key name
values()Iterators that return key values
entries()Returns the traversal of key value pairs
forEach()Use the callback function to traverse each member

keys(), values(), entries() are used in the same way as the previous ES6 object, so I won't repeat it

Here is how to use forEach:

let setArr = new Set(['I','love','you','love'])
setArr.forEach(value=>{
    console.log(value);
})

4.WeakSet

The WeakSet structure is similar to Set, and it is also a collection of non duplicate values. However, it differs from Set in two ways.

(1) First, the members of a WeakSet can only be objects, not values of other types.
(2) Secondly, all objects in the WeakSet are weak references, that is, the garbage collection mechanism does not consider the reference of the WeakSet to the object, that is, if other objects no longer reference the object, the garbage collection mechanism will automatically recycle the memory occupied by the object, regardless of the object still existing in the WeakSet.

Instance method:

methoddescribe
add(value)Add a new member to the WeakSet instance.
delete(value)Clears the specified member of the WeakSet instance.
has(value)Returns a Boolean value indicating whether a value is in the WeakSet instance.
const ws = new WeakSet();
const obj = {};
const foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo);    // false
ws.delete(window);
ws.has(window);    // false

The WeakSet has no size attribute, and there is no way to traverse its members.

The WeakSet cannot be traversed because the members are weak references and may disappear at any time. The traversal mechanism cannot guarantee the existence of members. It is likely that the members will not be obtained just after the traversal. One use of WeakSet is to store DOM nodes without worrying about memory leaks when these nodes are removed from the document.

Tags: Javascript Front-end ECMAScript

Posted on Fri, 12 Nov 2021 13:05:37 -0500 by JeanieTallis