ES6学习笔记之Set和Map

发表于 更新于 分类于 阅读次数： Disqus：

Learning Card

Set和Map是ES6新添加的两个数据结构。

  • Set
    • 类似数组，没有重复值
    • 与数组相关方法
      • new Set(array) 利用数组元素生成Set，[...set]实现数组去重
      • Array.from(set) 转换成数组
    • 属性
      • constructor 构造函数
      • size 成员个数
    • 方法
      • add(value) 添加值
      • delete(value) 删除值
      • has(value) 判断是否包含某值
      • clear() 清除所有成员
  • Map
    • 类似对象，键可以是任意数据类型
    • 属性
      • size 成员个数
    • 方法
      • set(key, value) 设置某个键的值
      • get(key) 读取某个键的值
      • has(key) 判断是否有某个键
      • delete(key) 删除某个键，返回布尔值，表明是否删除成功
      • clear() 清空所有成员
    • 与其他数据结构互转
      • Map => 数组 使用扩展运算符...
      • 数组 => Map 将数组传入Map构造函数
      • Map => 对象 函数将键值对传入对象
      • 对象 => Map 函数设置Map对象的每个键

Set

  • 类似数组
  • 成员的值都是唯一的，没有重复值
1
2
3
4
5
6
const a = new Set();
[2, 3, 4, 5, 5, 2, 3].forEach(x => a.add(x));
for(let i of a) {
  console.log(i)
} 
//2, 3, 4, 5

Set可以接受一个数组作为参数来初始化，这个方法可以用来为数组去重。

1
2
const set = new Set([1, 2, 3, 4, 4])
[...set]  //[1, 2, 3, 4]

Array.from方法也可以将Set结构转为数组

1
2
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

Set的属性

  • Set.prototype.constructor ：构造函数，默认就是Set函数
  • Set.prototype.size： 返回Set实例的成员总数，类似数组的length属性

Set的方法

  • add(value) 添加值
  • delete(value) 删除值
  • has(value) 判断是否有某个值，返回布尔值
  • clear() 清除所有成员，没有返回值

Map

  • 类似于对象，是键值对的集合
  • “键”的范围不限于字符串，可以是各种类型的值
1
2
3
const map = new Map();
map.set(1, 'aaa').set(2, 'bbb');
map.get(1)  //'aaa'

Map的属性

  • size 成员个数

Map的方法

  • set(key, value) 设置key对应的值，返回整个Map结构，可以采用链式写法
  • get(key) 读取key对应的值，如果找不到，返回undefined
  • has(key) 判断是否包含某个键
  • delete(key) 删除某个键，返回一个布尔值，表明是否删除成功
  • clear() 清除所有成员，没有返回值

与其他数据结构互相转换

1. Map => 数组

最方便的方法是使用扩展运算符...

1
2
const myMap = new Map().set(true, 7).set({foo:3}, ['abc']);
[...myMap]  //[[true, 7], [[foo:3], ['abc']]]

2. 数组 => Map

1
new Map(array)

3. Map => 对象

1
2
3
4
5
6
7
8
9
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for(let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
const myMap = new Map().set('yes', true).set('no', false);
strMapToObj(myMap)  //{yes: true, no: false}

4. 对象 => Map

1
2
3
4
5
6
7
8
function objToStrMap(obj) {
  let strMap = new Map();
  for(let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToStrMap({yes: true, no: false}) //Map {"yes" => true, "no" => false}

ES6学习笔记的内容主要基于阮一峰老师的《ECMAScript 6入门》，原文请见链接