찾다
웹 프론트엔드JS 튜토리얼ES6 Set, WeakSet, Map 및 WeakMap을 이해하도록 안내합니다.
ES6 Set, WeakSet, Map 및 WeakMap을 이해하도록 안내합니다.Jun 20, 2020 am 09:43 AM
es6javascript프런트 엔드

이전에 ES6를 배울 때 SetMap을 보고 그 응용 시나리오가 무엇인지 몰랐는데, 단지 배열 중복 제거와 용도로 자주 사용되는 줄만 알았습니다. 나중에 Set는 집합이라는 데이터 구조이고, Map은 사전이라는 데이터 구조라는 것을 천천히 깨달았습니다. SetMap,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构。

本文在gitthub做了收录:github.com/Michael-lzg…

Set

Set 本身是一个构造函数,用来生成 Set 数据结构。Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。Set 对象允许你存储任何类型的值,无论是原始值或者是对象引用。它类似于数组,但是成员的值都是唯一的,没有重复的值。

const s = new Set()
[2, 3, 5, 4, 5, 2, 2].forEach((x) => s.add(x))
for (let i of s) {
  console.log(i)
}
// 2 3 5 4

Set 中的特殊值

Set 对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:

  • +0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复
  • undefinedundefined 是恒等的,所以不重复
  • NaNNaN 是不恒等的,但是在 Set 中认为 NaNNaN 相等,所有只能存在一个,不重复。

Set 的属性:

  • size:返回集合所包含元素的数量
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5])
items.size // 5

Set 实例对象的方法

  • add(value):添加某个值,返回 Set 结构本身(可以链式调用)。
  • delete(value):删除某个值,删除成功返回 true,否则返回 false
  • has(value):返回一个布尔值,表示该值是否为 Set 的成员。
  • clear():清除所有成员,没有返回值。
s.add(1).add(2).add(2)
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2)
s.has(2) // false

遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员。

由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以 keys 方法和 values 方法的行为完全一致。

let set = new Set(['red', 'green', 'blue'])

for (let item of set.keys()) {
  console.log(item)
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item)
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item)
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Array 和 Set 对比

  • ArrayindexOf 方法比 Sethas 方法效率低下
  • Set 不含有重复值(可以利用这个特性实现对一个数组的去重)
  • Set 通过 delete 方法删除某个值,而 Array 只能通过 splice。两者的使用方便程度前者更优
  • Array 的很多新方法 mapfiltersomeevery 等是 Set 没有的(但是通过两者可以互相转换来使用)

Set 的应用

1、Array.from 方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5])
const array = Array.from(items)

2、数组去重

// 去除数组的重复成员
;[...new Set(array)]

Array.from(new Set(array))

3、数组的 mapfilter 方法也可以间接用于 Set

let set = new Set([1, 2, 3])
set = new Set([...set].map((x) => x * 2))
// 返回Set结构:{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5])
set = new Set([...set].filter((x) => x % 2 == 0))
// 返回Set结构:{2, 4}

4、实现并集 (Union)、交集 (Intersect) 和差集

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

// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2, 3}

// 差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1}

weakSet

WeakSet 结构与 Set 类似,也是不重复的值的集合。

  • 成员都是数组和类似数组的对象,若调用 add() 方法时传入了非数组和类似数组的对象的参数,就会抛出错误。
const b = [1, 2, [1, 2]]
new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
  • 成员都是弱引用,可以被垃圾回收机制回收,可以用来保存 DOM 节点,不容易造成内存泄漏。
  • WeakSet 不可迭代,因此不能被用在 for-of 等循环中。
  • WeakSet 没有 size 属性。

Map

Map 中存储的是 key-value 形式的键值对, 其中的 keyvalue 可以是任何类型的, 即对象也可以作为 keyMap 的出现,就是让各种类型的值都可以当作键。Map

이 기사는 github.com/Michael-lzg에 포함되어 있습니다. github.com/Michael-lzg…🎜

Set

🎜Set 자체는 생성자이며 Set 코드를 생성하는 데 사용됩니다. > 데이터 구조. <code>Set 함수는 초기화를 위한 매개변수로 배열(또는 반복 가능한 인터페이스가 있는 다른 데이터 구조)을 허용할 수 있습니다. Set 개체를 사용하면 기본 값이든 개체 참조이든 관계없이 모든 유형의 값을 저장할 수 있습니다. 배열과 유사하지만 멤버의 값이 고유하고 중복되는 값이 없습니다. 🎜
const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2

Set의 특수 값

🎜Set 객체에 저장된 값은 항상 고유하므로 두 값이 같은지 여부를 확인해야 합니다. . 특별한 처리가 필요한 몇 가지 특별한 값이 있습니다: 🎜
  • +0과 -0은 고유성을 결정하기 위해 저장할 때 동일하므로 반복되지 않습니다.
  • 정의되지 않음
  • code >는 undefine과 동일하므로 반복이 없습니다.
  • NaNNaN과 동일하지 않지만 Set
NaNNaN과 동일한 것으로 간주하며, 그 중 하나만 중복 없이 존재할 수 있습니다.

집합의 속성:

  • size: 집합에 포함된 요소의 수를 반환합니다.
const m = new Map()
const o = { p: 'Hello World' }

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

인스턴스 객체 설정 방법

  • add(value): 값을 추가하고 Set 구조 자체를 반환합니다( 연쇄 통화가 가능합니다).
  • delete(value): 특정 값을 삭제합니다. 삭제에 성공하면 true가 반환되고, 그렇지 않으면 false가 반환됩니다. >반품해드립니다.
  • has(value): 값이 Set의 멤버인지 여부를 나타내는 부울 값을 반환합니다.
  • clear(): 모든 멤버를 지우고 반환 값은 없습니다.
const map = new Map([
  ['a', 1],
  ['b', 2],
])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2

// for...of...遍历map等同于使用map.entries()

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

순회 메서드

  • keys(): 키 이름의 순회자를 반환합니다.
  • values(): 키 값의 순회자를 반환합니다.
  • entries(): 키-값 쌍의 순회자를 반환합니다.
  • forEach(): 콜백 함수를 사용하여 각 멤버를 반복합니다.
🎜Set 구조에는 키 이름이 없고 키 값만 있으므로(또는 키 이름과 키 값이 동일한 값임) 메소드는 values 메소드와 동일하게 작동합니다. 🎜
let map = new Map()
let arr = [...map]

배열 및 집합 비교

  • 배열indexOf 메서드가 Set'보다 낫습니다. s has 방법은 비효율적입니다.
  • Set에는 중복 값이 ​​포함되어 있지 않습니다. (이 기능을 사용하여 배열의 중복 제거를 달성할 수 있습니다)
  • Setdelete 메소드를 통해 값을 삭제하는 반면, Arraysplice를 통해서만 전달할 수 있습니다. 두 가지의 사용 편의성은 이전
  • Array의 많은 새로운 메소드인 map, filter, 일부, 모든 등은 Set에서 사용할 수 없습니다(그러나 서로 변환하여 사용할 수 있음)
  • ul>

    Set의 애플리케이션

    🎜1 Array.from 메서드는 Set 구조를 배열로 변환할 수 있습니다. 🎜
Map: map = new Map(arr)
🎜2. 배열 중복 제거🎜
let obj = {}
for (let [k, v] of map) {
  obj[k] = v
}
🎜3. 배열의 mapfilter 메서드는 Set🎜
for( let k of Object.keys(obj)){
  map.set(k,obj[k])
}
에 간접적으로 사용될 수도 있습니다. 🎜4 , 공용체 (Union), 교차점 (Intersect) 및 차이 set🎜
<p>
  <span>姓名</span>
  <span>{{info.name}}</span>
</p>
<p>
  <span>年龄</span>
  <span>{{info.age}}</span>
</p>
<p>
  <span>性别</span>
  <span>{{info.sex}}</span>
</p>
<p>
  <span>手机号</span>
  <span>{{info.phone}}</span>
</p>
<p>
  <span>家庭住址</span>
  <span>{{info.address}}</span>
</p>
<p>
  <span>家庭住址</span>
  <span>{{info.duty}}</span>
</p>

weakSet

🎜WeakSet 구조를 구현합니다. Set도 유사하며 고유한 값의 모음이기도 합니다. 🎜
  • 구성원은 모두 배열 및 배열 유사 객체입니다. 배열이 아닌 매개 변수 및 배열 유사 객체로 add() 메서드를 호출하면 오류가 발생합니다. .
mounted() {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
}
  • 멤버는 약한 참조이며 가비지 수집 메커니즘에 의해 재활용될 수 있으며 DOM 노드를 저장하는 데 사용될 수 있으며 메모리 누수가 발생하지 않습니다.
  • WeakSet는 반복 가능하지 않으므로 for-of와 같은 루프에서 사용할 수 없습니다.
  • WeakSet에는 size 속성이 없습니다.

Map

🎜Map키-값 형식으로 키-값 쌍을 저장합니다. 여기서 키는 value는 모든 유형이 될 수 있습니다. 즉, 객체를 key로 사용할 수도 있습니다. Map의 등장으로 다양한 형태의 값을 키로 사용할 수 있게 되었습니다. Map은 '값-값' 대응을 제공합니다. 🎜

Map 和 Object 的区别

  1. Object 对象有原型, 也就是说他有默认的 key 值在对象上面, 除非我们使用 Object.create(null)创建一个没有原型的对象;
  2. Object 对象中, 只能把 StringSymbol 作为 key 值, 但是在 Map 中,key 值可以是任何基本类型(String, Number, Boolean, undefined, NaN….),或者对象(Map, Set, Object, Function , Symbol , null….);
  3. 通过 Map 中的 size 属性, 可以很方便地获取到 Map 长度, 要获取 Object 的长度, 你只能手动计算

Map 的属性

  • size: 返回集合所包含元素的数量
const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2

Map 对象的方法

  • set(key, val): 向 Map 中添加新元素
  • get(key): 通过键值查找特定的数值并返回
  • has(key): 判断 Map 对象中是否有 Key 所对应的值,有返回 true,否则返回 false
  • delete(key): 通过键值从 Map 中移除对应的数据
  • clear(): 将这个 Map 中的所有元素删除
const m = new Map()
const o = { p: 'Hello World' }

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

遍历方法

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员
const map = new Map([
  ['a', 1],
  ['b', 2],
])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2

// for...of...遍历map等同于使用map.entries()

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

数据类型转化

Map 转为数组

let map = new Map()
let arr = [...map]

数组转为 Map

Map: map = new Map(arr)

Map 转为对象

let obj = {}
for (let [k, v] of map) {
  obj[k] = v
}

对象转为 Map

for( let k of Object.keys(obj)){
  map.set(k,obj[k])
}

Map的应用

在一些 Admin 项目中我们通常都对个人信息进行展示,比如将如下信息展示到页面上。传统方法如下。

<p>
  <span>姓名</span>
  <span>{{info.name}}</span>
</p>
<p>
  <span>年龄</span>
  <span>{{info.age}}</span>
</p>
<p>
  <span>性别</span>
  <span>{{info.sex}}</span>
</p>
<p>
  <span>手机号</span>
  <span>{{info.phone}}</span>
</p>
<p>
  <span>家庭住址</span>
  <span>{{info.address}}</span>
</p>
<p>
  <span>家庭住址</span>
  <span>{{info.duty}}</span>
</p>

js 代码

mounted() {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
}

我们通过 Map 来改造,将我们需要显示的 label 和 value 存到我们的 Map 后渲染到页面,这样减少了大量的html代码

<template>
  <p>
    </p>
<p>
      <span>{{label}}</span>
      <span>{{value}}</span>
    </p>
  
</template>

js 代码

data: () => ({
  info: {},
  infoMap: {}
}),
mounted () {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
  const mapKeys = ['姓名', '性别', '年龄', '电话', '家庭地址', '身份']
  const result = new Map()
  let i = 0
  for (const key in this.info) {
    result.set(mapKeys[i], this.info[key])
    i++
  }
  this.infoMap = result
}

WeakMap

WeakMap 结构与 Map 结构类似,也是用于生成键值对的集合。

  • 只接受对象作为键名(null 除外),不接受其他类型的值作为键名
  • 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
  • 不能遍历,方法有 getsethasdelete

总结

Set

  • 是一种叫做集合的数据结构(ES6新增的)
  • 成员唯一、无序且不重复
  • [value, value],键值与键名是一致的(或者说只有键值,没有键名)
  • 允许储存任何类型的唯一值,无论是原始值或者是对象引用
  • 可以遍历,方法有:adddeletehasclear

WeakSet

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

Map

  • 是一种类似于字典的数据结构,本质上是键值对的集合
  • 可以遍历,可以跟各种数据格式转换
  • 操作方法有:setgethasdeleteclear

WeakMap

  • 只接受对象作为键名(null 除外),不接受其他类型的值作为键名
  • 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
  • 不能遍历,方法有 getsethasdelete

推荐教程:《JS教程

위 내용은 ES6 Set, WeakSet, Map 및 WeakMap을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.