放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 前端

    • 前端 概览
    • 前端汇总

    • front 博文

    • front 项目总结

    • front 高级

    • front tools

  • vue

    • vue 概览
    • vue 汇总

    • vue 博文

    • vue 项目总结

    • vue 高级

  • html

    • html 概览
    • html 汇总

    • html 博文

  • css

    • css 概览
    • css 汇总

    • css 博文

    • sass

    • less

  • js

    • javascript 概览
    • JS 汇总

    • ES6

      • let 和 const 命令
      • promise
      • async
      • class
      • set
      • map
        • map
        • WeakMap
        • map 与其他数据结构的相互转换
        • 总结
          • Set
          • WeakSet
          • Map
          • WeakMap
      • 迭代器iterator
      • Proxy
    • JS 博文

    • JS 工具

  • node

    • node 概览
    • node 汇总

    • node 框架

    • node 博文

  • react

    • react 概览
    • react 汇总

    • react 博文

    • react 高级

  • 微信小程序

    • 微信小程序 概览
    • 微信小程序总结
    • 微信小程序文章
    • 微信小程序 博文

    • 微信小程序 高级

  • 微信公众号

    • 微信公众号 概览
    • 微信公众号总结
    • 微信公众号文章
  • 多端开发

    • 多端开发
    • dsbridge 概览
    • jsbridge 概览
    • webview
    • uniapp

      • uniapp 概览
    • taro

      • taro 概览
    • flutter

      • flutter 概览
      • flutter 环境搭建
    • electron

      • electron 概览
  • front
放肆青春
2021-09-07

map

# map

# WeakMap

WeakMap 对象是一组键值对的集合,其中的键是弱引用对象,而值可以是任意。

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

WeakMap 中,每个键对自己所引用对象的引用都是弱引用,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收(相应的 key 则变成无效的),所以,WeakMap 的 key 是不可枚举的。

属性:constructor:构造函数

方法:

  1. has(key):判断是否有 key 关联对象

  2. get(key):返回 key 关联对象(没有则则返回 undefined)

  3. set(key):设置一组 key 关联对象

  4. delete(key):移除 key 的关联对象

# map 与其他数据结构的相互转换

  1. Map 转 Array
const map = new Map([
  [1, 1],
  [2, 2],
  [3, 3],
]);
console.log([...map]); // [[1, 1], [2, 2], [3, 3]]
1
2
3
4
5
6
  1. Array 转 Map
const map = new Map([
  [1, 1],
  [2, 2],
  [3, 3],
]);
console.log(map); // Map {1 => 1, 2 => 2, 3 => 3}
1
2
3
4
5
6
  1. Map 转 Object

因为 Object 的键名都为字符串,而 Map 的键名为对象,所以转换的时候会把非字符串键名转换为字符串键名。

function mapToObj(map) {
  let obj = Object.create(null);
  for (let [key, value] of map) {
    obj[key] = value;
  }
  return obj;
}
const map = new Map().set("name", "An").set("des", "JS");
mapToObj(map); // {name: "An", des: "JS"}
1
2
3
4
5
6
7
8
9
  1. Object 转 Map
function objToMap(obj) {
  let map = new Map();
  for (let key of Object.keys(obj)) {
    map.set(key, obj[key]);
  }
  return map;
}

objToMap({ name: "An", des: "JS" }); // Map {"name" => "An", "des" => "JS"}
1
2
3
4
5
6
7
8
9
  1. Map 转 JSON
function mapToJson(map) {
  return JSON.stringify([...map]);
}

let map = new Map().set("name", "An").set("des", "JS");
mapToJson(map); // [["name","An"],["des","JS"]]
1
2
3
4
5
6
  1. JSON 转 Map
function jsonToStrMap(jsonStr) {
  return objToMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"name": "An", "des": "JS"}'); // Map {"name" => "An", "des" => "JS"}
1
2
3
4
5

# 总结

# Set

成员唯一、无序且不重复

[value, value],键值与键名是一致的(或者说只有键值,没有键名)

可以遍历,方法有:add、delete、has

# WeakSet

成员都是对象

成员都是弱引用,可以被垃圾回收机制回收,可以用来保存 DOM 节点,不容易造成内存泄漏

不能遍历,方法有 add、delete、has

# Map

本质上是键值对的集合,类似集合

可以遍历,方法很多可以跟各种数据格式转换

# WeakMap

只接受对象作为键名(null 除外),不接受其他类型的值作为键名

键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的

不能遍历,方法有 get、set、has、delete

更新时间: 10/27/2021, 2:00:56 PM
set
迭代器iterator

← set 迭代器iterator→

最近更新
01
前端权限管理
02-24
02
vue2指令
02-24
03
vue2 hook
02-24
更多文章>
Theme by Vdoing | Copyright © 2019-2022 放肆青春
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式