深入理解ES6之—set与map

寻找石头鱼

发布于 2019-09-11 16:25:38

5670

发布于 2019-09-11 16:25:38

文章被收录于专栏：寻找石头鱼寻找石头鱼寻找石头鱼

Set是无重复值的有序列表。Set会自动移除重复的值，因此你可以使用它来过滤数组中重复的值并返回结果。

Map是有序的键值对，其中的键允许是任何类型。

Set和Map是es6新增的两个数据集合。

Set集合

es6新增了set类型，这是一种无重复值的有序列表。Set允许对它包含的数据进行快速访问。

创建Set并添加项目

Set通过new Set()来创建，调用add()方法就可以向Set中添加项目。检查size属性还能查看其中包含多少项。

let set = new Set();
set.add(5);
set.add("5");
console.log(set.size);//2

Set不会使用强制类型转换来判断值是否重复。还可以向Set添加多个对象，他们不会被合并为同一项。

let set = new Set();

let key1 = {};
let key2 = {};

set.add(key1);
set.add(key2);

console.log(set.size);//2

如果add()方法用相同的值进行了多次调用，那么在第一次之后的调用实际上会被忽略。

let set = new Set();

set.add(5);
set.add("5");
set.add(5);//被忽略

console.log(set.size);//2

你可以使用数组来初始化一个Set，并且Set构造器确保不会重复使用这些值。

let set = new Set([1,2,3,4,5,2,6,5,5,5]);
console.log(set.size);//6

虽然数值5在数组中出现了四次，但是Set中只有一个5

你可以使用has()方法来测试某个值是否存在于set中

let set = new Set();

let key1 = {};
let key2 = {};
let key3 = {};

set.add(key1);
set.add(key2);

console.log(set.has(key1));//true
console.log(set.has(key3));//false

移除值

使用delete()方法来移除单个值或者调用clear()方法将所有值从Set中移除。

  let set = new Set([1, 2, 3, 4, 5, 2, 6, 5, 5, "5"]);

console.log(set);

set.delete(5);

console.log(set.has(5));//false

set.clear();

console.log(set.size);//0

Set 上的forEach()方法

forEach()方法还会被传递一个回调函数，该回调函数接收三个参数：

Set中下个位置的值
与第一个参数相同的值
目标Set本身

由于Set没有键，为了使forEach方法与数组和map的forEach方法一致：将Set中的每一项同时认定为键与值。

let set = new Set([1, 2]);

set.forEach(function(value, key, ownerSet) {
    console.log(`${key} ${value}`)
    console.log(ownerSet === set);
})

将Set转换为数组

let arr = [1,2,4,3,2,5,5];
let set = new Set(arr);

let arr1 = [...set];
console.log(arr1);

Map集合

ES6的Map类型是键值对的有序列表，而键和值都可以是任意类型。键的比较使用的是Object.is()，因此你可以将5与“5”同时作为键，因为他们类型不同。

可以调用set方法并传递一个键与一个关联的值，来给Map添加项；此后使用键名来调用get()方法便能提取对应的值。

let map = new Map();
map.set("name", "cc");
map.set("age", 23);

console.log(map.get("name"));//cc
console.log(map.get("age"));//23

也可以使用对象作为键

let map = new Map();
let key1 = {};
let key2 = {};

map.set(key1, 5);
map.set(key2, 8);

console.log(map.get(key1));//5
console.log(map.get(key2));//8

Map的方法和属性

has(key)
delete(key)
clear()
size

Map的初始化

你能将数组传递给Map构造器，以便使用数据来初始化一个Map。该数组中的每一项也必须是数组，内部数组的首个项会作为键，第二项则为对应值。因此整个Map就被这些双项数组填充。

let map = new Map([
    ["name", "cc"],
    ["age", 26]
]);

console.log(map.has("name"));//true
console.log(map.get("name"));//cc
console.log(map.has("age"));//true
console.log(map.get("age"));//26
console.log(map.size);//2

Map上的forEach()方法

let map = new Map([
    ["name", "cc"],
    ["age", 26]
]);

map.forEach(function(value, key, source) {
    console.log(`${key}的值是${value}`);
    console.log(source === map);
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-11-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript