标签：Map Set const map list xd set Array

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);

标签：Map,Set,const,map,list,xd,set,Array
来源： https://blog.csdn.net/ITzhongzi/article/details/122424613

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。