There are three types of collection types: 1. Map type. The Map collection stores key-value pairs. The keys cannot be repeated, but the values can be repeated. 2. Set type. The objects stored in the Set are unordered and cannot be Repeated, the objects in the collection are not sorted in a specific way; 3. List type, the objects stored in the List are ordered and repeatable, and the query speed is high.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
There are three collection types in JavaScript: set, list and map.
Map is a set of key-value pair structures, which is extremely fast search speed. Created by passing in an array of arrays. Add new elements by calling .set(key,value).
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('Adam', 67); // 添加新的key-value
Copy after login
For example, suppose you want to find the corresponding grades based on the names of classmates. If you use Array to implement it, you need two Arrays:
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
Copy after login
Given a name, you want to find the corresponding grades. You need to first find the corresponding position in names, and then retrieve the corresponding results from scores. The longer the Array, the longer it takes.
If implemented using Map, only a "name"-"score" comparison table is needed, and the results can be searched directly based on the name. No matter how big the table is, the search speed will not slow down.
Write a Map in JavaScript as follows:
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
Copy after login
Initializing the Map requires a two-dimensional array, or directly initialize an empty Map.
Map has the following methods:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
Copy after login
Since one key can only correspond to one value, if you put value into a key multiple times, the subsequent value will flush out the previous value:
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
Copy after login
1) Properties and methods
Definition: A collection of key/value pairs.
Syntax: mapObj = new Map()
Note: The keys and values in the collection can be of any type. If you add a value to the collection using an existing key, the new value replaces the old value.
Map Object Properties
Description
Constructor
Specify the function that creates the mapping
Prototype — Prototype
Returns a reference to the prototype for the mapping
Constructor
Return the number of elements in the map
##Map object method
Description
clear
Remove all elements from the map
delete
Remove from the map The specified element
forEach
Performs the specified operation on each element in the map
get
Return the specified element in the map
has
If the map contains the specified element, return true
toString
Return the string representation of the map
set
Add a new element to the map
valueOf
Returns the primitive value of the specified object
// 如何将成员添加到 Map，然后检索它们
var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
m.set({x:1}, 3);
m.forEach(function (item, key, mapObj) {
document.write(item.toString() + "<br />");
});
document.write("<br />");
document.write(m.get(2));
// Output:
// black
// red
// 2
// 3
//
// red
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
Copy after login
Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来进行数据初始化。
let i = new Set([1, 2, 3, 4, 4]); //会得到 set{1, 2, 3, 4,}
Copy after login
注：如果初始化时给的值有重复的，会自动去除。集合并没有字面量声明方式。
2）Set的属性
常用的属性就一个：size 返回 Set 实例的成员总数。
let s = new Set([1, 2, 3]);
console.log( s.size ); // 3
Copy after login
3）Set的方法
Set 实例的方法分为两大类：操作方法（用于数据操作）和遍历方法（用于遍历数据）。
操作方法:
add(value) 添加数据，并返回新的 Set 结构
delete(value) 删除数据，返回一个布尔值，表示是否删除成功
has(value) 查看是否存在某个数据，返回一个布尔值
clear() 清除所有数据，没有返回值
let set = new Set([1, 2, 3, 4, 4]);
// 添加数据 5
let addSet = set.add(5);
console.log(addSet); // Set(5) {1, 2, 3, 4, 5}
// 删除数据 4s
let delSet = set.delete(4);
console.log(delSet); // true
// 查看是否存在数据 4
let hasSet = set.has(4);
console.log(hasSet); // false
// 清除所有数据
set.clear();
console.log(set); // Set(0) {}
Copy after login
遍历方法:
Set 提供了三个遍历器生成函数和一个遍历方法。
keys() 返回一个键名的遍历器
values() 返回一个键值的遍历器
entries() 返回一个键值对的遍历器
forEach() 使用回调函数遍历每个成员
let color = new Set(["red", "green", "blue"]);
for(let item of color.keys()){
console.log(item);
}
// red
// green
// blue
for(let item of color.values()){
console.log(item);
}
// red
// green
// blue
for(let item of color.entries()){
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
color.forEach((item) => {
console.log(item)
})
// red
// green
// blue
The above is the detailed content of What are the collection types of JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![JavaScript core tutorial [DOM BOM operations that JS must know]](https://img.php.cn/upload/course/000/000/041/61c56ae28d02a390.jpg)
![JavaScript in-depth analysis [Web front-end must know basic skills]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![TypeScript introductory video [can be understood even without learning JavaScript]](https://img.php.cn/upload/course/000/000/068/6242c0fc4be39373.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
