Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper also participates inProject DigginTo win the creative gift package and challenge the creative incentive money

preface

Hello, everyone. Today I’m going to share with you some knowledge about ES6 series. Everyone in the front end should know that since the release of ES6, it has provided us with a lot of new syntax and methods, and also made our development process more efficient and convenient. We’ll share the Set and Map methods for data structures in es6’s new syntax.

Set

A Set is a data structure provided in ES6 that resembles an array but differs from an array in that its values are unique and have no duplicates. Set has the following characteristics and functions:

  • A Set is also a constructor by nature, so it needs new when used, and it can take an array (or some other data structure with an Iterable interface) as an argument to initialize the Set
  • The values in a Set can be of any type, but must not be duplicated
  • Set values are unique, so they can be used for array de-duplication
  • The Set assumes that NaN and NaN are the same value, so there can only be one NaN value in the Set (but we know that NaN and NaN are not used equally).
  • Two objects in a Set are never equal, even if the key and value are the same
  • Set can also be de-duplicated for strings
  • No conversion occurs when adding values to a Set, so “5” and “5” are two values
  • Set is traversable

Let’s use specific code to demonstrate each of the above features

//1. Set is a constructor
//2. Set can be of any type
//3. Set does not perform type conversion
//4. Set accepts an array as an argument
//5. Set values are unique
//6. Set is traversable
let mySet = new Set([1.2.2.3.4.5."5"."set"."set"]);
mySet.forEach(item= >{
	console.log(item);
})
1,2,3,4,5,'5','set'

//7. Set can be used for array de-duplication
let arr = [1.1.1.2.3.4.4.5.6.7.8.8.8]
arr = Array.from(new Set(arr))
//arr = [...new Set(arr)]
// output result: [1,2,3,4,5,6,7,8]

//8. NaN is the same value in Set
let set = new Set(a); set.add(NaN);
set.add(NaN);
console.log(set.size) / / 1

//9. Two objects in a Set are always unequal
let set = new Set(a); set.add({'a':'b'})
set.add({'a':'b'})
console.log(set.size) / / 2

//10. Set can also be used to deduplicate strings
let str = 'abcabcaabbcc'
let set = new Set(str)
str = [...set].join(' ')
console.log(str);//abc

Copy the code

Instance properties and methods of Set

Set provides a Set of instance properties and methods for handling Set operations. As you can see from the example above, we have already used two methods and an attribute

  • The add(value) method is used to add a new value to a Set. Its return value is also a Set structure, so it can be used together. If you add the same value consecutively, only one value will eventually be added
  • The delete(value) method is used to delete a value from a Set structure. The return value is a Boolean that indicates whether the deletion was successful
  • The has(value) method checks for the presence of a value in a Set and returns a Boolean that identifies whether a value is contained
  • The clear() method, which takes no arguments and returns no value, clears all members of a Set
  • Size, which is an instance attribute that identifies how many members there are in the Set. The return value is a number
  • The keys() method iterates through the Set data structure, returning all the key names in the Set
  • The values() method is used to traverse the Set data structure, returning all the keys in the Set
  • The Entries () method is used to iterate through the Set data structure and return any additional key-value pairs in the Set
  • The forEach() method is used in the same way as an array, iterating through all the members of a Set and doing whatever the business needs

The add and forEach methods, as well as the size attribute, have already been used in the examples above and will not be shown here. Here are a few examples of the other functions

let set = new Set([1.2.3.4.5.6.7.8.9.10])
set.delete(1);//true
set.has(1)//false
set.has(2)//true
for(let item of set.keys()){
	console.log(item)
}
// Output: 1 2 3 4 5 6 7 8 9 10

for(let item of set.values()){
	console.log(item)
}
// Output: 1 2 3 4 5 6 7 8 9 10

for(let item of set.entries()){
	console.log(item)
}
/ / output: [1, 1] [2] [3, 3, 4, 4] [5, 5] [6] [7, 7] [8] [9, 9] [10, 10]

set.clear();
console.log(set.size);/ / 0
Copy the code

Note that the keys, values, and entries methods all return iterators. Because the Set structure has no key name, only the key value (or the key name and the key value are the same value), the keys and values methods behave exactly the same. The entries method returns a traverser that contains both the key name and the key value, so it prints an array of identical entries one at a time.

conclusion

About the Set data structure to share here, I believe that after learning Set, according to these characteristics of the Set data structure, in our future daily development will certainly bring a lot of benefits. In the next section, we will share another data structure, WeakSet, similar to Set. Like small partners welcome to praise critics attention oh!