讲一讲Set与Map
Set 是一种集合的数据结构,Map是一种字典的数据结构
Set
ES6的新语法,类似数组。区别唯一且无序的,没有重复值
:成员是
-
Set本身是构造函数,用来生成Set的数据结构
new Set([iterable])
const set = new Set(); [1,2,3,3,2,2].forEach(num => set.add(num)); console.log(set); // {1,2,3} // 去重 let arr = [1,2,3,3,4,3,2,2,1]; console.log([...new Set(arr)]); [1,2,3,4]
- Set允许添加唯一值,使用的方法类似于精确相等
===
,主要区别是NaN可以等于NaN - Set的实例属性,因为是构造函数,所以有constructor,同时有size属性,没有lenght属性
-
Set的实例方法
-
操作方法
- add(val) 新增,相当于数组push
- delete(val) 删除 存在删除返回true,不存在返回false
- has(val) 判断是否存在val
- clear() 清空
- Array.from 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。也可通过[...]来
-
转换。
```javascript
let set = new Set([1,3,4,5])
let arr = Array.from(set)
console.log(arr) //[1,3,4,5]
// 或者通过解构赋值
let set = new Set([1,3,4,5])
let arr = [...set]
console.log(arr) //[1,3,4,5]
```
- 遍历方法(遍历顺序和插入顺序一致)
- keys() 返回包含所有键的迭代器
- values() 返回包含所有值的迭代器
- entries() 返回包含所有键值对的迭代器
- forEach(callback, thisArg) 对所有的成员进行callback操作,如果提供了thisArg回调中的this回事thisArg,无返回值
```javascript
let set = new Set([1,3,4,5,6,5,4,4])
console.log(set.keys()) // [Set Iterator] { 1, 3, 4, 5, 6 }
console.log(set.values()) // [Set Iterator] { 1, 3, 4, 5, 6 }
console.log(set.entries()) // [Set Entries] { [ 1, 1 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ], [ 6, 6 ] }
set.forEach((key, value) => {
console.log(`=======${key}:${value}=======`)
})
```
- thisArg参数的用法,也可以用箭头函数,原因是箭头函数没有自身的this,指向的是父级的this
```javascript
// 传入this值
function Counter() {
this.sum = 0;
this.count = 0;
}
Counter.prototype.add = function(array) {
array.forEach(function(currentValue, index) {
this.sum += currentValue;
this.count++;
}, this)
}
let obj = new Counter()
obj.add([1,2,3,4,5])
console.log(obj.count, obj.sum) // 5 15
// 或者用箭头函数
Counter.prototype.add = function(array) {
array.forEach((currentValue, index) => {
this.sum += currentValue;
this.count++;
})
}
```
Map
字典和集合的区别
- 共同点: 可以存储不重复的值
- 不同点: 集合是[value,value]形式,字典是[key,value]形式储存
Map 和 Object 的区别
Map | Object | |
---|---|---|
意外的键 | 只能显式的插入键 | 原型上可能会有其他键 |
键的类型 | 可以是任意类型,包括函数、对象等 | 只能是string或者Symbol |
键的顺序 | 当迭代的时候,是按照插入的顺序迭代 | 无序的 |
Size | 直接通过size属性获取 | 只能计算 |
迭代 | 直接迭代 | 通过方法获取key值后迭代 |
性能 | 增删改的表现更好 | 无优化 |
任何具有iterator接口,且每个成员都是双元素的数据的数据结构,都可以当作Map构造函数的参数。
let map = new Map([['w','d'],['s','v']])
console.log(map) // Map(2) { 'w' => 'd', 's' => 'v' }
-
Map的实例属性
- constructor 构造函数
- size 数量
-
Map的实例方法
-
操作方法
- set(key,valu) 新增
- get(key) 获取
- delete(key) 删除 存在删除返回true,不存在返回false
- has(key) 判断是否存在key
- clear() 清空
-
遍历方法(遍历顺序和插入顺序一致)
- keys() 返回包含所有键的迭代器
- values() 返回包含所有值的迭代器
- entries() 返回包含所有键值对的迭代器
- forEach(callback, thisArg) 对所有的成员进行callback操作,如果提供了thisArg回调中的this回事thisArg,无返回值
let map = new Map([['w','d'],['s','v']]) map.forEach((value,key) => { console.log(`${key}=>${value}`) // w=>d // s=>v })
-
与其他数据结构的相互转换
-
Map => Array
let map = new Map([[1,2],[3,4]]) let arr = [...map] console.log(arr) // [ [ 1, 2 ], [ 3, 4 ] ]
-
Array => Map
let arr = [[1,2],[3,4]] let map = new Map(arr) console.log(map) // Map(2) { 1 => 2, 3 => 4 }
-
Map => Object
注意,因为Map的键可以存任意类型,所以要将键转为字符串然后添加到obj中,否则存入的就是'[object,object]'
let map = new Map() map.set({a:1}, 1) map.set({b:2}, 2) function mapToObject(map){ let obj = {} for (let [key, value] of map) { obj[JSON.stringify(key)] = value } return obj } console.log(mapToObject(map)) //{ '{"a":1}': 1, '{"b":2}': 2 }
-
Object => Map
let obj = {a: 1,b: 2} function objToMap(obj){ let map = new Map() for (let key of Object.keys(obj)) { map.set(key, obj[key]) } return map } console.log(objToMap(obj)) // Map(2) { 'a' => 1, 'b' => 2 }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。