Map:一行代码处理对象数组去重

一、代码实践

    const data = [
        { id: 1, category: 'A' },
        { id: 2, category: 'B' },
        { id: 3, category: 'A' },
        { id: 4, category: 'C' },
    ];
    
    let result =  Array.from(new Map(data.map(ele => [ele.category, ele])).values())
    console.log("%c result", "color:red;", result)

二、细节分析

第一步：规定map()函数返回的格式

第二步：new Map()去除重复key属性

第三步：Map的value()方法返回属性值

第四步：Array.from()转数组

Map介绍

1.概述

在 JavaScript 中，Map是一种数据结构，用于存储键值对。它类似于普通的对象（Object)

2.创建Map

//方式一：直接创建
let myMap = new Map();

//方法二：赋初始值
let anotherMap = new Map(
 ['key1', 'value1'],
  [1, 'one'], 
  [true, false] ]
);

3.Map的基本操作

set设置键值对

let myMap = new Map();
myMap.set('name', 'John'); 
myMap.set(1, 'one');

get获取键值对

 let myMap = new Map();
 myMap.set('name', 'John');
 console.log(myMap.get('name')); // 输出 'John'
 console.log(myMap.get('age')); // 输出 undefined

has检查键是否存在

 let myMap = new Map();
 myMap.set('name', 'John');
 console.log(myMap.has('name')); // 输出 true
 console.log(myMap.has('age')); // 输出 false

delete删除键值对

let myMap = new Map();
myMap.set('name', 'John');
console.log(myMap.delete('name')); // 输出 true
console.log(myMap.delete('age')); // 输出 false

size获取Map大小(键值对数量)

 let myMap = new Map();
 myMap.set('name', 'John');
 myMap.set(1, 'one');
 console.log(myMap.size); // 输出 2

for...of遍历

 let myMap = new Map([
     ['name', 'John'],
     [1, 'one']
 ]);
 for (let [key, value] of myMap) {
     console.log(key, value);
 }