有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

JavaScript Map和Set对象区别(使用方法)

javascript 炮渣日记 1个月前 (11-10) 19次浏览 已收录 0个评论 扫描二维码

前置知识:

Map和Set对象是在ES6中被引入的,作为一种由key值标记的数据容器。

Map和Set对象承载的数据元素可以按照插入时的顺序,被迭代遍历。

1.Set对象

介绍:

Set数据结构类似数组,但所有成员的值唯一。

Set本身为一个构造函数,用来生成Set数据结构,使用add方法来添加新成员。

JavaScript Map和Set对象区别(使用方法)

基础使用:

JavaScript Map和Set对象区别(使用方法)

注意:

  • 向Set中添加值的时候,不会类型转换,即5和’5’是不同的。
[...new Set([5,'5'])]; // [5, "5"]

属性和方法:

  • 属性:
  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。
  • 操作方法:
  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。
JavaScript Map和Set对象区别(使用方法)

数组去重:

let a = new Set([1,2,3,3,3,3]);

2.Set的应用

数组去重:

JavaScript Map和Set对象区别(使用方法)

遍历和过滤:

JavaScript Map和Set对象区别(使用方法)

获取并集、交集和差集:

JavaScript Map和Set对象区别(使用方法)
  • 遍历方法:
  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员。

Set遍历顺序是插入顺序,当保存多个回调函数,只需按照顺序调用。但由于Set结构没有键名只有键值,所以keys()和values()是返回结果相同。

JavaScript Map和Set对象区别(使用方法)

并且 还可以使用for…of直接遍历Set。

JavaScript Map和Set对象区别(使用方法)

forEach与数组相同,对每个成员执行操作,且无返回值。

JavaScript Map和Set对象区别(使用方法)

3.Map对象

由于传统的JavaScript对象只能用字符串当做键,给开发带来很大限制,ES6增加Map数据结构,使得各种类型的值(包括对象)都可以作为键。

Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。 基础使用:

JavaScript Map和Set对象区别(使用方法)

注意:

  • 传入数组作为参数,指定键值对的数组。
JavaScript Map和Set对象区别(使用方法)
  • 如果对同一个键多次赋值,后面的值将覆盖前面的值。
JavaScript Map和Set对象区别(使用方法)
  • 如果读取一个未知的键,则返回undefined。
new Map().get('abcdef'); // undefined
  • 同样的值的两个实例,在 Map 结构中被视为两个键。
JavaScript Map和Set对象区别(使用方法)

遍历方法: Map 的遍历顺序就是插入顺序。

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历 Map 的所有成员。
JavaScript Map和Set对象区别(使用方法)

将Map结构转成数组结构:

JavaScript Map和Set对象区别(使用方法)

4.Map与其他数据结构互相转换

  • Map 转 数组
JavaScript Map和Set对象区别(使用方法)
  • 数组 转 Map
JavaScript Map和Set对象区别(使用方法)
  • Map 转 对象 如果所有 Map 的键都是字符串,它可以无损地转为对象。
  • 如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
JavaScript Map和Set对象区别(使用方法)
  • 对象 转 Map
JavaScript Map和Set对象区别(使用方法)
  • Map 转 JSON

(1)Map键名都是字符串,转为对象JSON:

JavaScript Map和Set对象区别(使用方法)

(2)Map键名有非字符串,转为数组JSON:

JavaScript Map和Set对象区别(使用方法)
  • JSON 转 Map

(1)所有键名都是字符串:

JavaScript Map和Set对象区别(使用方法)

(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组:

JavaScript Map和Set对象区别(使用方法)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址