이전에 ES6를 배울 때 Set
과 Map
을 보고 그 응용 시나리오가 무엇인지 몰랐는데, 단지 배열 중복 제거와 용도로 자주 사용되는 줄만 알았습니다. 나중에 Set
는 집합이라는 데이터 구조이고, Map
은 사전이라는 데이터 구조라는 것을 천천히 깨달았습니다. Set
和 Map
,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set
是一种叫做集合的数据结构,Map
是一种叫做字典的数据结构。
本文在gitthub做了收录:github.com/Michael-lzg…
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
对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:
undefined
与 undefined
是恒等的,所以不重复NaN
与 NaN
是不恒等的,但是在 Set
中认为 NaN
与 NaN
相等,所有只能存在一个,不重复。size
:返回集合所包含元素的数量const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]) items.size // 5
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
的 indexOf
方法比 Set
的 has
方法效率低下Set
不含有重复值(可以利用这个特性实现对一个数组的去重)Set
通过 delete
方法删除某个值,而 Array
只能通过 splice
。两者的使用方便程度前者更优Array
的很多新方法 map
、filter
、some
、every
等是 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
结构与 Set
类似,也是不重复的值的集合。
add()
方法时传入了非数组和类似数组的对象的参数,就会抛出错误。const b = [1, 2, [1, 2]] new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
WeakSet
不可迭代,因此不能被用在 for-of
等循环中。WeakSet
没有 size
属性。Map
中存储的是 key-value
形式的键值对, 其中的 key
和 value
可以是任何类型的, 即对象也可以作为 key
。 Map
的出现,就是让各种类型的值都可以当作键。Map
Set
자체는 생성자이며 Set 코드를 생성하는 데 사용됩니다. > 데이터 구조. <code>Set
함수는 초기화를 위한 매개변수로 배열(또는 반복 가능한 인터페이스가 있는 다른 데이터 구조)을 허용할 수 있습니다. Set
개체를 사용하면 기본 값이든 개체 참조이든 관계없이 모든 유형의 값을 저장할 수 있습니다. 배열과 유사하지만 멤버의 값이 고유하고 중복되는 값이 없습니다. 🎜const map = new Map() map.set('foo', ture) map.set('bar', false) map.size // 2
Set
객체에 저장된 값은 항상 고유하므로 두 값이 같은지 여부를 확인해야 합니다. . 특별한 처리가 필요한 몇 가지 특별한 값이 있습니다: 🎜정의되지 않음
undefine
과 동일하므로 반복이 없습니다.NaN
은 NaN
과 동일하지 않지만 SetNaN
이 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
'보다 낫습니다. s has
방법은 비효율적입니다.Set
에는 중복 값이 포함되어 있지 않습니다. (이 기능을 사용하여 배열의 중복 제거를 달성할 수 있습니다) Set
은 delete
메소드를 통해 값을 삭제하는 반면, Array
는 splice
를 통해서만 전달할 수 있습니다. 두 가지의 사용 편의성은 이전Array
의 많은 새로운 메소드인 map
, filter
, 일부
, 모든
등은 Set
에서 사용할 수 없습니다(그러나 서로 변환하여 사용할 수 있음) Array.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 class="info-item"> <span>姓名</span> <span>{{info.name}}</span> </p> <p class="info-item"> <span>年龄</span> <span>{{info.age}}</span> </p> <p class="info-item"> <span>性别</span> <span>{{info.sex}}</span> </p> <p class="info-item"> <span>手机号</span> <span>{{info.phone}}</span> </p> <p class="info-item"> <span>家庭住址</span> <span>{{info.address}}</span> </p> <p class="info-item"> <span>家庭住址</span> <span>{{info.duty}}</span> </p>
WeakSet
구조를 구현합니다. Set
도 유사하며 고유한 값의 모음이기도 합니다. 🎜add()
메서드를 호출하면 오류가 발생합니다. . mounted() { this.info = { name: 'jack', sex: '男', age: '28', phone: '13888888888', address: '广东省广州市', duty: '总经理' } }
WeakSet
는 반복 가능하지 않으므로 for-of
와 같은 루프에서 사용할 수 없습니다. WeakSet
에는 size
속성이 없습니다. Map
은 키-값
형식으로 키-값 쌍을 저장합니다. 여기서 키는
및 value
는 모든 유형이 될 수 있습니다. 즉, 객체를 key
로 사용할 수도 있습니다. Map
의 등장으로 다양한 형태의 값을 키로 사용할 수 있게 되었습니다. Map
은 '값-값' 대응을 제공합니다. 🎜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
的长度, 你只能手动计算const map = new Map() map.set('foo', ture) map.set('bar', false) map.size // 2
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]) }
在一些 Admin 项目中我们通常都对个人信息进行展示,比如将如下信息展示到页面上。传统方法如下。
<p class="info-item"> <span>姓名</span> <span>{{info.name}}</span> </p> <p class="info-item"> <span>年龄</span> <span>{{info.age}}</span> </p> <p class="info-item"> <span>性别</span> <span>{{info.sex}}</span> </p> <p class="info-item"> <span>手机号</span> <span>{{info.phone}}</span> </p> <p class="info-item"> <span>家庭住址</span> <span>{{info.address}}</span> </p> <p class="info-item"> <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 id="app"> <p class="info-item" v-for="[label, value] in infoMap" :key="value"> <span>{{label}}</span> <span>{{value}}</span> </p> </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
结构与 Map
结构类似,也是用于生成键值对的集合。
null
除外),不接受其他类型的值作为键名get
、set
、has
、delete
Set
[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!