【前端】js中Map的用法

女爷i 2022-12-03 13:27 270阅读 0赞

### Map ###

Map是一组键值对结构，具有极快的查找速度。

#### 1. 创建 ####

*  方法一：创建的时候初始化
    
        let mapObj = new Map([
        	['x', 1],
        	['y', 2],
        	['z', 3],
        ])
        
        console.log(mapObj.size) // 3
 *  方法二：创建空Map，之后添加元素
    
        let mapObj = new Map();
        mapObj.set('x', 1);
        mapObj.set('y', 2);
        mapObj.set('z', 3);
        
        // 注：Map对象的长度不是length，而是size。
        console.log(mapObj.size) // 3

#### 2. 基础操作 ####

Map对象的创建、添加元素、删除元素…

let mapObj = new Map();
    mapObj.set('x', 1); // 添加元素
    mapObj.delete('y'); // 删除指定元素
    mapObj.has('x'); // true 是否存在x
    mapObj.get('x'); // 1 取值

#### 3. 遍历 ####

*  forEach  
    同数组的forEach遍历，三个参数分别代表：value、key、map本身。
    
        let mapObj = new Map();
        mapObj.set('x', 1);
        mapObj.set('y', 2);
        mapObj.set('z', 3);
        
        mapObj.forEach((value, key, self) => {
              
        	console.log(key,'=>', value)
        });
        /*
         输出结果：
         x => 1
         y => 2
         z => 3
        */
 *  for-of
    
        let mapObj = new Map();
        mapObj.set('x', 1);
        mapObj.set('y', 2);
        mapObj.set('z', 3);
        
        // 注意：for-of遍历出来的是一个数组，其中item[0]为key，item[1]为value。
        for (const item of mapObj) {
              
        	console.log(item);
        }
        /*
         输出结果：
         ["x", 1]
         ["y", 2]
         ["z", 3]
        */

#### 4. 应用 ####

*  去重
    
        let map = new Map();
        
        for (let i = 0; i <= 9; i++) {
              
        	map.set(i, i);
        }
        
        for (let j = 6; j <= 12; i++) {
              
        	map.set(j, j);
        }
        
        console.log(map.size);// 13