1. Map
1.Definition
Map is a new data structure provided by ES6. It is a collection of key-value pairs, similar to an object, but the range of keys is not limited to strings. Various types of values can be used as keys.
The Object structure is the correspondence of "string-value", and the Map structure is the correspondence of "value-value".
2.Code examples
Map itself is a constructor. First, generate a Map data structure. As can be seen from the printed results, the Map instance has the following attributes and methods:
size、set()、get()、has()、delete()、clear()、keys()、values()、entries()、forEach()
const map = new Map()
console.log(map, 'newMap');
2.1Storing data set()
The format is set(key,value). If the value corresponding to the key already has a value, it will be updated; if there is no value, a new "key-value" pair will be stored, and the key can be any data type.
// 1.1 key为string
map.set('test', 1)
// 1.2 key 为number
map.set(999, '数字')
// 1.3 key 为function
const temp = function() {}
map.set(temp, '这是函数')
// 1.4 key 为undefined
map.set(undefined, '这是undefined')
// 1.5 key 为null
map.set(null, '这是null')
// 1.6 key 为boolean
map.set(false, '假')
// 1.7 链式写法
map.set('测试', '测试value').set(2, 22222222).set(true, '真')2.2 Get data get()
The format is get(key), but chain writing cannot be used, and an error will be reported.
// 打印出来看结果--->与上面存储的数据一一对应
console.log(map.get('test'));
console.log(map.get(999));
console.log(map.get(temp));
console.log(map.get(undefined));
console.log(map.get(null));
console.log(map.get(false));
console.log(map.get('测试'));
console.log(map.get(2));
console.log(map.get(true));
2.3 View the total number of members in the map size attribute
The return value is number
console.log(map.size); // 92.4 Determine whether a key is in the Map has()
The return value is number
console.log(map.has('test'), '是否存在test');
console.log(map.has('test1'), '是否存在test1');
2.5 Delete a key delete()
The return value is bollean, true if the deletion is successful, false if the deletion fails.
console.log(map.delete('test'), '是否删除成功'); // true2.6 Clear all members clear()
no return value
map.clear()
console.log(map, '所有map');
2.7 Traversal methods: keys(), values(), entries(), forEach()
// 7.1 返回键名的遍历器->keys()
for (let key of map.keys()) {
console.log(key, 'key');
}
// 7.2 返回键值的遍历器->values()
for (let value of map.values()) {
console.log(value, 'value');
}
// 7.3 返回所有成员的遍历器->entries()
for (let item of map.entries()) {
console.log(item, 'item为数组');
}
// 7.4 遍历Map的所有成员->forEach()
map.forEach(function(value, key, map) {
console.log(value, key, 'value + key');
console.log(map, 'map中的所有成员');
})2. Set
1.Definition
Set is a new data structure provided by Es6. It is similar to an array, but different from an array because the values of its members are unique.
Taking advantage of the unique characteristics of Set values, Set can be used to deduplicate arrays, and the values in Set will be automatically sorted.
2. Code examples
Set itself is also a constructor. Let's first generate a Set data structure. As can be seen from the printed results, the Set instance has the following attributes and methods:
size、add()、has()、delete()、clear()、keys()、values()、entries()、forEach()
const set = new Set()
2.1Storing data add()
The format is add(value); the return value is the Set itself, and you can use chain writing; but since the value in the set is unique, repeated additions will be filtered directly.
set.add(0).add(1).add(1).add(2).add(2)
console.log(set.add(0).add(1).add(1).add(2).add(2).add(3));
2.2 Determine whether a certain value is in Set has()
The return value is bollean
console.log(set.has(0)); // true
console.log(set.has(99)); // false2.3 Delete data delete()
The return value is bollean, true if the deletion is successful, false if the deletion fails.
console.log(set.delete(0), '是否删除成功');
console.log(set, '删除后数据');
2.4 Clear all members clear()
no return value
set.clear()
console.log(set, '清除后的set');
2.5 Traversal methods: keys(), values(), entries(), forEach()
// 5.1 返回键名的遍历器->keys()
for (let key of set.keys()) {
console.log(key, 'key');
}
// 5.2 返回值的遍历器->values()
for (let value of set.values()) {
console.log(value, 'value');
}
// 5.3 返回遍历器->entries()
for (let item of set.entries()) {
console.log(item, 'item为数组');
}
// 5.4 遍历Map的所有成员->forEach()
set.forEach(function(value, key, set) {
console.log(value, key, 'forEach');
console.log(set, 'set中的所有成员');
})3. Comparison between Set and Map
1. Similarities:
All can be traversed through for... of
2. Differences:
1.Definition:
Set is a new data structure provided by Es6. It is similar to an array, but different from an array because the values of its members are all unique.
Map is also a new data structure provided by Es6. It is a collection of key-value pairs, similar to an object, but the range of keys is not limited to strings. Various types of values can be used as key. In other words, the Object structure is the correspondence of "string-value", and the Map structure is the correspondence of "value-value".2.Map can obtain values through the get method, but Set cannot, because Set only has values.
3. Taking advantage of the unique characteristics of Set values, Set can be used to deduplicate arrays, and the values in Set will be automatically sorted; Map has no format restrictions and can be used for data storage.
4. Implement array deduplication through new set()
const arr = [1, 2, 3, 4, 1, 3, 6, 7, 2];
const set = new Set(arr);
console.log(set); // [1,2,3,4,6,7]