Map、Set与Array及Object间的区别和

Map与WeakMap对象的特点

简介：详细介绍Map与WeakMap结构的特点

背景

JavaScript中的对象，实质就是键值对的集合，但是在对象里却只能用字符串作为键名。在一些特殊的场景里就满足不了我们的需求了，正因为此，Map这一数据提出了，它是JavaScript中的一种更完善Hash结构。

• Map对象

  用于保存键值对，任何值(对象或者原始值)都可以作为一个键名或一个值。

  • 使用介绍

// 通过构造函数创建一个Map
let m = new Map();

m.set([1,2],'张三')
内置API

属性/方法	作用	例子
size	返回键值对的数量	m.size
clear()	清除所有键值对	m.clear()
has(key)	判断键值对中是否有指定的键名，返回值是布尔值	m.has(key)
get(key)	获取指定键名的键值，如不存在则返回undefined	m.get(key)
set(key, value)	添加键值对，如键名已存在，则更新键值对	m.set(key, value)
delete(key)	删除指定键名的键值对	m.delete(key)
遍历器生成函数

keys()
values()
entries()
WeakMap

只接受对象作为键名

const weakMap = new WeakMap([[{ name: 1 }, '张三']]);
console.log(weakMap);
无法遍历

Set与WeakSet结构的特点

• 介绍

Set是ES6给开发者提供的一种类似数组的数据结构，可以理解为值的集合。它和数组的最大的区别就在于: 它的值不会有重复项。

- 基本使用

// 创建
let set = new Set();
let set2 = new Set([1,2,3])

// 添加元素
set.add(1)

特点

成员值唯一
属性及方法

属性/方法	作用	例子
size	返回成员个数	s.size
clear()	清除所有成员	s.clear()
has(value)	判断键值对中是否有指定的值，返回值是布尔值	s.has(key)
delete(value)	删除指定值	s.delete(key)
// 注意
const a = { aa: 1 };
const list = new Set([a]);
console.log(list.has(a));


key和value相等
const list = new Set([1, 2, 3, 4]);
console.log(list.keys());
console.log(list.values());
用途

// 去重
let arr = [1,2,2,3,4,4,4];
let s = new Set(arr);
//结果：Set {1,2,3,4}

let newArr = Array.from(s);
//结果：[1,2,3,4],完成去重

• WeakSet

数组成员必须是对象
WeakSet结构也提供了add( ) 方法，delete( ) 方法，has( )方法给开发者使用，作用与用法跟Set结构完全一致。
WeakSet 结构不可遍历。因为它的成员都是对象的弱引用，随时被回收机制回收，成员消失。所以WeakSet 结构不会有keys( )，values( )，entries( )，forEach( )等方法和size属性。

Map、Set与Array及Object间的区别

简介：详细介绍Map、Set与Array及Object间的区别

增删改查

const a = { xd: '小滴课堂' };
const list = [];
const obj = {};
const set = new Set();
const map = new Map();

//增加
list.push(a);
obj['xd'] = '小滴课堂';
set.add(a);
map.set('xd', '小滴课堂');
console.log(list, obj, set, map);

// 查询
const resList = list.includes(a);
const resobj = 'xd' in obj;
const resSet = set.has(a);
const resMap = map.has('xd');
console.log(resList, resobj, resSet, resMap);

//修改
list.forEach(function (i) {
  i.xd = i.xd ? 'xdclass.net' : '';
});
obj.xd = 'xdclass.net';
set.forEach(function (i) {
  i.xd = i.xd ? 'xdclass.net' : '';
});
map.set('xd', 'xdclass.net');
console.log(list, obj, set, map);

//删除
const index = list.findIndex(function (i) {
  return i.xd === '小滴课堂';
});
list.splice(index, 1);
delete obj.xd;
set.delete(a);
map.delete('xd');
console.log(list, obj, set, map);
类型转换

// 对象转map
const obj = { xd: '小滴课堂', website: 'xdclass.net' };
const map = new Map(Object.entries(obj));
console.log(map);
// map转对象
const obj1 = Object.fromEntries(map);
console.log(obj1);

// 数组转set
const list = [1, 2, 3];
const set = new Set(list);
console.log(set);

// set转数组
const list1 = Array.from(set);
console.log(list1);