ES之set和map

190 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第6天,点击查看活动详情

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成 Set 数据结构。

Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

用法

由于 Set 成员的值都是唯一的,他可以用来去重。

let set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set(4) {1, 2, 3, 4}

// Array.from方法可以将 Set 结构转为数组。
Array.from(set)); // [1, 2, 3, 4]

[...new Set('ababbc')].join(''); // 'abc'

set = new Set(document.querySelectorAll('div'));
console.log(set.size); // 88

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

属性和方法

set_01.png

属性:

  • Set.prototype.constructor:构造函数,默认就是 Set 函数。
  • Set.prototype.size:返回 Set 实例的成员总数。

操作方法:

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身。
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为 Set 的成员。
  • Set.prototype.clear():清除所有成员,没有返回值。
let set = new Set();
console.log(set.add(1).add(2)); // Set [ 1, 2 ]

console.log(set.delete(2)); // true
console.log(set.has(2)); // false

console.log(set.clear()); // undefined
console.log(set.has(1)); // false

遍历方法:

  • Set.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员
let set = new Set(['a', 'b', 'c']);
console.log(set.keys()); // SetIterator {"a", "b", "c"}
console.log([...set.keys()]); // ["a", "b", "c"]

console.log(set.values()); // SetIterator {"a", "b", "c"}
console.log([...set.values()]); // ["a", "b", "c"]

console.log(set.entries()); // SetIterator {"a", "b", "c"}
console.log([...set.entries()]); // [["a", "a"], ["b", "b"], ["c", "c"]]

set_02.png

let set = new Set(['a', 'b', 'c']);
set.forEach((value, key) => console.log(key + ': ' + value));
// a: a
// b: b
// c: c

[...set].forEach((value, key) => console.log(key + ': ' + value));
// 0: a
// 1: b
// 2: c

Map

ES6 提供了新的数据结构 Map 。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键,即“值—值”的对应。

用法

const map = new Map([
  ['name', 'wxb'],
  ['title', 'map'],
]);

console.log(map); // Map(2) {'name' => '张三', 'title' => 'Author'}
map.size; // 2
map.has('name'); // true
map.get('name'); // "wxb"
map.has('title'); // true
map.get('title'); // "map"

上面的用法相当于

const items = [
  ['name', 'wxb'],
  ['title', 'map'],
];

const map = new Map();

items.forEach(([key, value]) => map.set(key, value));

属性和方法

map_01.jpg

属性:

  • Map.prototype.constructor:构造函数,默认就是 Map 函数。
  • Map.prototype.size:返回 Map 实例的成员总数。

操作方法:

  • Map.prototype.set(key, value):添加某键值对,返回 Map 结构本身。如果 key 已经有值,则键值会被更新,否则就新生成该键。
  • Map.prototype.get(key):返回获取某个键对应的值。如果找不到 key,返回 undefined。
  • Map.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • Map.prototype.has(value):返回一个布尔值,表示该值是否为 Map 的成员。
  • Map.prototype.clear():清除所有成员,没有返回值。
let map = new Map();
console.log(map.set('a', 'a1').set('a', 'a2')); // map  'a' => 'a2'

console.log(map.has(2)); // false
console.log(map.get(2)); // undefined
console.log(map.get('a')); // a2
console.log(map.delete(2)); // false
console.log(map.delete('a')); // true
console.log(map.clear()); // undefined

上面代码对键 a 连续赋值两次,后一次的值覆盖前一次的值。

遍历方法:

  • Map.prototype.keys():返回键名的遍历器。
  • Map.prototype.values():返回键值的遍历器。
  • Map.prototype.entries():返回所有成员的遍历器。
  • Map.prototype.forEach():遍历 Map 的所有成员。
const map = new Map([
  ['F', 'no'],
  ['T', 'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

Map 结构转为数组结构

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

console.log(map); // Map(3) {1 => 'one', 2 => 'two', 3 => 'three'}
console.log(map.keys); // MapIterator {1, 2, 3}
console.log([...map.keys()]); // [1, 2, 3]