Map

一. 概要

JavaScript中的Map是一种键值对集合，其中每个键都有唯一且是可以任何类型。map（）方法是一个用于数组操作的高阶函数，它接受一个函数作为参数，并返回一个新的数组，其中包含原始数组中的每个元素经过该函数处理后的结果。

二. 以下是Map的主要特点和用法：

1. 创建Map：可以使用字面量或者构造函数来创建一个新的Map。

//使用字面量创建Map
const map=new Map();

//使用构造函数创建Map
const map=new Map([
    ['key1','value1'],
    ['key2','value2'],
    ...
])

2. 添加键值对：可以使用set()方法添加新的键值对。

map.set('key1','value1');
map.set('key2','value2');

3. 获取值：可以使用get()方法获取指定键的值。

const value1=map.get('key1');//value1
const value2=map.get('key2');//value2

4. 删除键值对：可以使用delete()方法删除指定键的键值对。

map.delete('key1');

5. 迭代Map：可以使用for...of循环迭代Map中的所有键值。

for(const [key,value] of map){
    console.log(`${key}:${value}`);
}

6. 获取Map中键值对的数量：可以使用size属性获取Map中的键值对的数量。

const size=map.size;//1
//存入key1,key2,删除key1,剩key2

7. 检查Map中是否存在指定键：可以使用has()方法检查Map中是否存在指定键。

const hasKey=map.has('key1');//false,key1已被删除

8. 示例

//创建map
const map=new Map();

//添加键值对
map.set('apple',1);
map.set('peach',2);
map.set('banana',3);

console.log(map.get('banana'));//3

//删除键值对
map.delete('apple')；//删除key为apple

//迭代map
for (const [key,value] of map){
    console.log('${key}:${value}';
    //输出：
    //"peach:2"
    //"banana:3"
}

//检查map是否存在指定键
const hasBanana=map.has('banana');//true

三. 以下是一些常见的用例

注：JS的map()方法返回的是一个新的数组

1. 将数组中的每个元素扩大两倍：

const arr=[1,2,3,4,5];
const newArr=arr.map(num=>num*2);
console.log(newArr);//[2,4,6,8,10]

2. 使用对象生成新的数组：

//创建user对象数组
const users=[
    {name:'张三',age:18},
    {name:'李四',age:19},
    {name:'王五',age:20},
]
const names=users.map(user=>user.name);
console.log(names);//['张三','李四','王五']

3. 将字符串数组转化为对象数组：

//创建字符串数组
const strs=['1','2','3','4','5'];
//将字符串数组转化为数字数组
const nums=strs.map(str=>parseInt(str));
console.log(nums);//[1,2,3,4,5]

4. 对象数组和html标签结合运用

//创建user对象数组
const users=[
    {name:'张三',age:18},
    {name:'李四',age:19},
    {name:'王五',age:20},
]
const newArr=users.map(user=>`<li>${user.name}:${user.age}</li>`);
console.log(newArr);//['<li>张三:18</li>','<li>李四:19</li>','<li>王五:20</li>']

//将数组转为字符串
const str=newArr.join('');
console.log(str);//'<li>张三:18</li><li>李四:19</li><li>王五:20</li>'

5.假设有一个字符串数组，需要找出其中第一个非重复的字符，并返回其索引。如果不存在这样的字符，则返回-1。

• 输入：['a','b','c','a','d','b']
• 输出：2

function findFirstUnique(arr) {
    //创建map存储每个字符出现的次数
    const map = new Map();

    //遍历arr
    arr.forEach(item => {
        if (map.has(item)) { //如果存在该键，则在原有的基础上将值加一
            map.set(item, map.get(item) + 1);
        } else { //如果不存在键则添加
            map.set(item, 1);
        }
    })

    //返回第一个满足条件的元素
    return arr.findIndex(item => map.get(item) === 1);
}
console.log(findFirstUnique(['a', 'b', 'c', 'a', 'd', 'b'])); //2