Set和Map对象

南山隐士 2022年06月25日 21 0

什么是Set

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

Set作用

Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数

例如数组去重或者字符串去重

[...new Set(array)]
[...new Set('ababbc')].join('')

向 Set 加入值时认为NaN等于自身, 并且两个对象也是不相等的

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
let set = new Set();

set.add({});
set.size // 1

set.add({});
set.size // 2

Set实例属性和方法

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():清除所有成员,没有返回值。

遍历相关
Set.prototype.keys():返回键名的遍历器
Set.prototype.values():返回键值的遍历器
Set.prototype.entries():返回键值对的遍历器
Set.prototype.forEach():使用回调函数遍历每个成员

Set的遍历顺序就是插入顺序(这个功能有时候非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用)

数组的map和filter方法也可以间接用于 Set

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}

Map的作用

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

Map实例属性和方法

size属性返回 Map 结构的成员总数。

Map.prototype.set(key, value)
set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

Map.prototype.get(key)
get方法读取key对应的键值,如果找不到key,返回undefined。

Map.prototype.has(key)
has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

Map.prototype.delete(key)
delete方法删除某个键,返回true。如果删除失败,返回false。

Map.prototype.clear()
clear方法清除所有成员,没有返回值。

遍历方法
Map.prototype.keys():返回键名的遍历器。
Map.prototype.values():返回键值的遍历器。
Map.prototype.entries():返回所有成员的遍历器。
Map.prototype.forEach():遍历 Map 的所有成员。

Map 的遍历顺序就是插入顺序。

Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。

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

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

数组 转为 Map

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])

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 }

对象转为 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}

Map 转为 JSON

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

JSON 转为 Map

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
Last Updated: 2022/06/25 18:59:15
[转载]JavaScript代码片段 如何优雅的写多层if判断