Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
本章节复习的是JS中的Map和Set对象,是个集合。
前置知识:
Map和Set对象是在ES6中被引入的,作为一种由key
值标记的数据容器。
Map和Set对象承载的数据元素可以按照插入时的顺序,被迭代遍历。
1 Set对象
介绍:Set
数据结构类似数组,但所有成员的值唯一。Set
本身为一个构造函数,用来生成Set
数据结构,使用add
方法来添加新成员。
1 | let a = new Set(); |
基础使用:
1 | let a = new Set([1,2,3,3,4]); |
注意:
- 向
Set
中添加值的时候,不会类型转换,即5
和'5'
是不同的。1
[...new Set([5,'5'])]; // [5, "5"]
属性和方法:
属性:
Set.prototype.constructor
:构造函数,默认就是Set
函数。Set.prototype.size
:返回Set
实例的成员总数。
操作方法:
add(value)
:添加某个值,返回 Set 结构本身。delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功。has(value)
:返回一个布尔值,表示该值是否为Set的成员。clear()
:清除所有成员,没有返回值。
1 | let a = new Set(); |
数组去重:
1 | let a = new Set([1,2,3,3,3,3]); |
2 Set的应用
数组去重:
1 | // 方法1 |
遍历和过滤:
1 | let a = new Set([1,2,3,4]); |
获取并集、交集和差集:
1 | let a = new Set([1,2,3]); |
- 遍历方法:
keys()
:返回键名的遍历器。values()
:返回键值的遍历器。entries()
:返回键值对的遍历器。forEach()
:使用回调函数遍历每个成员。
Set
遍历顺序是插入顺序,当保存多个回调函数,只需按照顺序调用。但由于Set
结构没有键名只有键值,所以keys()
和values()
是返回结果相同。
1 | let a = new Set(['a','b','c']); |
并且 还可以使用for...of
直接遍历Set
。
1 | let a = new Set(['a','b','c']); |
forEach
与数组相同,对每个成员执行操作,且无返回值。
1 | let a = new Set(['a','b','c']); |
3 Map对象
由于传统的JavaScript
对象只能用字符串当做键,给开发带来很大限制,ES6增加Map
数据结构,使得各种类型的值(包括对象)都可以作为键。Map
结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。
基础使用:
1 | let a = new Map(); |
注意:
- 传入数组作为参数,指定键值对的数组。
1
2
3
4let a = new Map([
['name','leo'],
['age',18]
]) - 如果对同一个键多次赋值,后面的值将覆盖前面的值。
1
2
3let a = new Map();
a.set(1,'aaa').set(1,'bbb');
a.get(1); // 'bbb' - 如果读取一个未知的键,则返回
undefined
。1
new Map().get('abcdef'); // undefined
- 同样的值的两个实例,在 Map 结构中被视为两个键。
1
2
3
4
5
6let a = new Map();
let a1 = ['aaa'];
let a2 = ['aaa'];
a.set(a1,111).set(a2,222);
a.get(a1); // 111
a.get(a2); // 222 - *遍历方法**:
Map 的遍历顺序就是插入顺序。 keys()
:返回键名的遍历器。values()
:返回键值的遍历器。entries()
:返回所有成员的遍历器。forEach()
:遍历 Map 的所有成员。1
2
3
4
5
6
7
8
9
10
11let a = new Map([
['name','leo'],
['age',18]
])
for (let i of a.keys()){...};
for (let i of a.values()){...};
for (let i of a.entries()){...};
a.forEach((v,k,m)=>{
console.log(`key:${k},value:${v},map:${m}`)
})- *将Map结构转成数组结构**:
1
2
3
4
5
6
7
8let a = new Map([
['name','leo'],
['age',18]
])
let a1 = [...a.keys()]; // a1 => ["name", "age"]
let a2 = [...a.values()]; // a2 => ["leo", 18]
let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]
4 Map与其他数据结构互相转换
Map 转 数组
1
2let a = new Map().set(true,1).set({f:2},['abc']);
[...a]; // [[true:1], [ {f:2},['abc'] ]]数组 转 Map
1
2let a = [ ['name','leo'], [1, 'hi' ]]
let b = new Map(a);Map 转 对象
如果所有 Map 的键都是字符串,它可以无损地转为对象。
如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。1
2
3
4
5
6
7
8
9
10
11function fun(s) {
let obj = Object.create(null);
for (let [k,v] of s) {
obj[k] = v;
}
return obj;
}
const a = new Map().set('yes', true).set('no', false);
fun(a)
// { yes: true, no: false }对象 转 Map
1
2
3
4
5
6
7
8
9
10function fun(obj) {
let a = new Map();
for (let k of Object.keys(obj)) {
a.set(k, obj[k]);
}
return a;
}
fun({yes: true, no: false})
// Map {"yes" => true, "no" => false}Map 转 JSON
(1)Map键名都是字符串,转为对象JSON:*
1
2
3
4
5
6
7
8
9
10function fun (s) {
let obj = Object.create(null);
for (let [k,v] of s) {
obj[k] = v;
}
return JSON.stringify(obj)
}
let a = new Map().set('yes', true).set('no', false);
fun(a);
// '{"yes":true,"no":false}'(2)Map键名有非字符串,转为数组JSON:*
1
2
3
4
5
6
7function fun (map) {
return JSON.stringify([...map]);
}
let a = new Map().set(true, 7).set({foo: 3}, ['abc']);
fun(a)
// '[[true,7],[{"foo":3},["abc"]]]'JSON 转 Map
(1)所有键名都是字符串:*
1
2
3
4
5
6
7
8
9
10function fun (s) {
let strMap = new Map();
for (let k of Object.keys(s)) {
strMap.set(k, s[k]);
}
return strMap;
return JSON.parse(strMap);
}
fun('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组*:
1
2
3
4
5function fun2(s) {
return new Map(JSON.parse(s));
}
fun2('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
参考资料
本部分内容到这结束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
JS小册 | js.pingan8787.com |