이전에 ES6를 배울 때 Set
과 Map
을 보고 그 응용 시나리오가 무엇인지 몰랐는데, 단지 배열 중복 제거와 용도로 자주 사용되는 줄만 알았습니다. 나중에 Set
는 집합이라는 데이터 구조이고, Map
은 사전이라는 데이터 구조라는 것을 천천히 깨달았습니다. Set
和 Map
,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 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 在存储判断唯一性的时候是恒等的,所以不重复
-
undefined
与undefined
是恒等的,所以不重复 -
NaN
与NaN
是不恒等的,但是在Set
中认为NaN
与NaN
相等,所有只能存在一个,不重复。
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 对比
-
Array
的indexOf
方法比Set
的has
方法效率低下 -
Set
不含有重复值(可以利用这个特性实现对一个数组的去重) -
Set
通过delete
方法删除某个值,而Array
只能通过splice
。两者的使用方便程度前者更优 -
Array
的很多新方法map
、filter
、some
、every
等是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、数组的 map
和 filter
方法也可以间接用于 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
形式的键值对, 其中的 key
和 value
可以是任何类型的, 即对象也可以作为 key
。 Map
的出现,就是让各种类型的值都可以当作键。Map
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 >는 -
NaN
은NaN
과 동일하지 않지만 Set
undefine
과 동일하므로 반복이 없습니다.NaN
이 NaN
과 동일한 것으로 간주하며, 그 중 하나만 중복 없이 존재할 수 있습니다. 집합의 속성:
-
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
'보다 낫습니다. shas
방법은 비효율적입니다. -
Set
에는 중복 값이 포함되어 있지 않습니다. (이 기능을 사용하여 배열의 중복 제거를 달성할 수 있습니다) -
Set
은delete
메소드를 통해 값을 삭제하는 반면,Array
는splice
를 통해서만 전달할 수 있습니다. 두 가지의 사용 편의성은 이전 -
Array
의 많은 새로운 메소드인map
,filter
,일부
,모든
등은Set
에서 사용할 수 없습니다(그러나 서로 변환하여 사용할 수 있음) ul>
Set의 애플리케이션
🎜1Array.from
메서드는 Set
구조를 배열로 변환할 수 있습니다. 🎜Map: map = new Map(arr)🎜2. 배열 중복 제거🎜
let obj = {} for (let [k, v] of map) { obj[k] = v }🎜3. 배열의
map
및 filter
메서드는 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 的区别
-
Object
对象有原型, 也就是说他有默认的key
值在对象上面, 除非我们使用Object.create(null)
创建一个没有原型的对象; - 在
Object
对象中, 只能把String
和Symbol
作为key
值, 但是在Map
中,key
值可以是任何基本类型(String
,Number
,Boolean
,undefined
,NaN
….),或者对象(Map
,Set
,Object
,Function
,Symbol
,null
….); - 通过
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
除外),不接受其他类型的值作为键名 - 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
- 不能遍历,方法有
get
、set
、has
、delete
总结
Set
- 是一种叫做集合的数据结构(ES6新增的)
- 成员唯一、无序且不重复
-
[value, value]
,键值与键名是一致的(或者说只有键值,没有键名) - 允许储存任何类型的唯一值,无论是原始值或者是对象引用
- 可以遍历,方法有:
add
、delete
、has
、clear
WeakSet
- 成员都是对象
- 成员都是弱引用,可以被垃圾回收机制回收,可以用来保存
DOM
节点,不容易造成内存泄漏 - 不能遍历,方法有
add
、delete
、has
Map
- 是一种类似于字典的数据结构,本质上是键值对的集合
- 可以遍历,可以跟各种数据格式转换
- 操作方法有:
set
、get
、has
、delete
、clear
WeakMap
- 只接受对象作为键名(
null
除外),不接受其他类型的值作为键名 - 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
不能遍历,方法有
get
、set
、has
、delete
推荐教程:《JS教程》
위 내용은 ES6 Set, WeakSet, Map 및 WeakMap을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

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

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

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

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

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 애플리케이션 서버와 통합합니다.

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

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

뜨거운 주제



