导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

• 概念
  • Set 是有序列表，类似于数组，但是没有重复值
  • Map 是存储许多键值对的有序列表，key 和 value 支持所有数据类型
• 相同点
  • 都是有序列表
  • set 值不重复；map 键不重复
• Set 与 Array 的区别
  • set 不可重复；array 可重复
  • set 可用来做数组去重
• Map 与 Object 区别
  • Object 的键只能是 字符串 or Symbol；Map 可以是任意类型
  • Map 可以通过 size 获取元素个数，Object 得遍历
  • Map 是有序的；Object 是无序的
  • Map 可迭代；Object 只能遍历，或通过 Object.entries/values/keys 迭代

对比

Map 和 数组 对比

var map = new Map();
var arr = new Array();

// 增
map.set('t', 1);
arr.push({t: 1});

// 查
map.has('t');
arr.find(v => v.t);

// 改
map.set('t', 2);
arr.forEach(item => item.t ? item.t = 2 : '');

// 删
map.delete('t');
let index = arr.findIndex(item => item.t);
arr.splice(index, 1);

Set 和 数组 对比

var map = new Set();
var arr = new Array();
var value = {t: 1}
// 增
set.add(value);
arr.push({t: 1});

// 查
set.has(value);
arr.find(v => v.t);

// 改
set.forEach(item => item.t ? item.t = 2 : '');
arr.forEach(item => item.t ? item.t = 2 : '');

// 删
set.delete(value);
let index = arr.findIndex(item => item.t);
arr.splice(index, 1);

Map、Set、数组 对比

var item = {t: 1}
var map = new Map();
var set = new Set();
var obj = {};

// add
map.set('t', 1);
set.add(item);
obj['t'] = 1;

// search
console.log({
	map_exist: map.has('t'),
  set_exist: set.has(item),
  obj_exist1: 't' in obj,
  obj_exist2: obj.hasOwnProperty('t')
})

// modify
map.set('t', 2);
item.t = 2;
obj['t'] = 2;

// delete
map.delete('t');
set.delete(item);
delete obj['t'];