初识Map,Set

最新推荐文章于 2023-03-21 08:30:00 发布

原创最新推荐文章于 2023-03-21 08:30:00 发布 · 549 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

这篇博客探讨了JavaScript中的Map, Set与Object的区别，包括它们的创建与使用。此外，还涉及到了CSS的居中技巧、盒模型、垃圾回收机制以及JS执行机制、异步编程和浏览器性能优化等主题。" 138159384,8734938,普元EOS Platform eos.jmx 远程代码执行漏洞分析与复现,"['安全', 'web安全', '企业级应用开发平台', '漏洞分析', '修复方案']

记录了一些有关Set Map Object的学习，以及一些最近学习的css和Promise

Map Object Set

Map

set(key, val): 向Map中添加新元素

get(key): 通过键值查找特定的数值并返回

has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false

delete(key): 通过键值从Map中移除对应的数据

clear(): 将这个Map中的所有元素删除

const m1 = new Map([['a', 111], ['b', 222]]) console.log(m1) // {"a" => 111, "b" => 222} m1.get('a') // 111
const m2 = new Map([['c', 3]]) const m3 = new Map(m2) m3.get('c') // 3 m3.has('c') // true m3.set('d', 555) m3.get('d') // 555

Set

Set对象允许存储任何类型的值，无论是原始值或是对象引用，它类似于数组，但成员的值是唯一的，没有重复的值

add(value)：添加某个值，返回 Set 结构本身(可以链式调用)。

delete(value)：删除某个值，删除成功返回true，否则返回false。

has(value)：返回一个布尔值，表示该值是否为Set的成员。

clear()：清除所有成员，没有返回值。

const mySet = new Set(['a', 'a', 'b', 1, 2, 1]) 
console.log(mySet) // {'a', 'b', 1, 2} 
myset.add('c').add({'a': 1}) 
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}} 
console.log(mySet.size) // 6
mySet.has(2) // true

Object 和 Map 的区别

Object和Map 的本质上都是以键值对的方式存储数据

区别

键：Object的键只能是整数，字符串或是symbol类型。 Map的key值可以为任意数据类型
元素顺序：Map会保留所有元素的顺序，Object并不会保证属性顺序
继承：Map是Object的实例对象
Map的键值对个数可以从size属性获取，而Object的键值对个数只能手动计算
Object都有自己的原型，原型链上的键名有可能和你自己再对象上设置的键名冲突

创建

Object与数组的创建方式相似 Map只能通过new创建

对象的key值是唯一的

Map 和 Set 都是对象（存值的方式都为键值对）

Map 键名（key）为任意数据类型

Object 键名为字符串

Set 和 Map 的区别

存取值不一样add set

Set 和 Map 主要的应用场景在于数据重组和数据储存。
Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。

集合与字典的区别：

共同点：集合、字典可以储存不重复的值
不同点：集合是以 [value, value]的形式储存元素，字典是以 [key, value] 的形式储存

Map 和 weakMap

垃圾回收机制会回收Map 但weakMap不会被回收，weakMap是弱引用，它自动会消失

在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

Set 和 weakSet

weakSet只接收对象，只存储引用类型

弱引用，垃圾回收机制不考虑WeakSet对该对象的引用

weakSet没有size取值

Set：

成员唯一、无序且不重复。
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）。
可以遍历，方法有：add、delete、has。

WeakSet：

成员都是对象。
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏。
不能遍历，方法有add、delete、has。

Map：

本质上是键值对的集合，类似集合。
可以遍历，方法很多可以跟各种数据格式转换。

WeakMap：

只接受对象作为键名（null除外），不接受其他类型的值作为键名。
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的。
不能遍历，方法有get、set、has、delete。

块级元素水平居中

父容器 flex justify-content:center align-items:center
父容器 positon:relative 子容器：position:absolute left:50% top:50% transform:translate(-50%,-50%)
父容器 display:table-cell text-align:center vertical-align:middle
父容器 display:grid 子容器：align-self:center(垂直居中) justify-self:center

行内元素水平居中

父容器 flex justify-content:center align-items:center
父容器 positon:relative 子容器：position:absolute left:50% top:50% transform:translate(-50%,-50%)
父容器 display:table-cell text-align:center vertical-align:middle
父容器 text-align:cneter line-height:xxxpx