ES6学习笔记之Set和Map

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

• 类似数组
• 成员的值都是唯一的，没有重复值

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可以接受一个数组作为参数来初始化，这个方法可以用来为数组去重。

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

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

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

• 类似于对象，是键值对的集合
• “键”的范围不限于字符串，可以是各种类型的值

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 => 数组

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

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

2. 数组 => Map

new Map(array)

3. Map => 对象

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

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入门》，原文请见链接