banner
banner
banner
NEWS LETTER

ES6-Set/Map构造函数

Scroll down

Set

去重小能手

set去重

  1. 去重数组成员: […set]

    1
    2
    const set =  new Set([1,2,3,4,5,5,5]) 
    console.log([...set]) // [1,2,3,4,5]
  2. 去重字符串里面重复的字符:

    1
    [...new Set('ababbc')].join('')	// "abc"
  3. Array.from的去重数组成员

    1
    2
    const dedupe = (array) => Array.from(new Set(array))
    dedupe([1,1,2,3]) // [1,2,3]

创建Set构造函数:new Set()

set操作方法:

  • Set.add(value):添加某个值,返回set结构本身
  • Set.delete(value): 删除某个值,返回一个布尔值表删除是否成功
  • Set.has(value): 返回一个布尔值,表该值是否为set成员
  • Set.clear(): 清除所有成员,无返回值
  • 注意: NAN相等,两个{}不相等

Set结构转数组:Array.from()

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

Map

创建一个Map构造函数:new Map()

Map操作方法

  • .set(key,value):添加某个值,如果key已经有值就更新
  • .get(key):读取值,找不到key,返回undefined
  • .has(key):返回一个布尔值,表示某个键是否在当前 Map 对象中
  • .delete(key):删除某个键,返回一个布尔值表删除是否成功
  • .clear():无返回值,清除所有成员

Set / Map 共同方法

遍历方法

Map默认entries, Set默认keys,Set中没有values,因为Set结构没有键名只有键值

  • .keys():返回键名的遍历器
  • .values():返回键值的遍历器
  • .entries():返回键值对的遍历器([键名,键值])
  • .forEach():使用回调函数遍历每个成员

实例属性:

  • .size:返回Set/Map实例的成员总数

reduce 累加器

  • reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)
  • previousValue:数组第0位及后面相加返回的值,可指定初始值initial
  • currentValue:数值的第二位起
  • currentIndex:当前值位置

.map():遍历

1
2
3
4
5
6
7
8
let set =new Set([1,3,5,69,74,45])
set = new Set([...set].map(x => (x * 2)));

const map= new Map()
.set(1,"a")
.set(2,"f")
.set(3,"g");
const map1 = new Map([...map].map(([k,v]) => [k * 2, '_'+v]))

.filter():过滤

1
2
3
4
let set =new Set([1,3,5,69,74,45])
set = new Set([...set].filter(x => (x * 2) > 100));

const map2 = new Map([...map].filter(([k,v]) => k == 2))

互转结构

map 转数组: […map]

数组转map:new Map([array])

map转对象

  • 方案一:
    1
    Object.fromEntries(map.entries())
  • 方案二: 键名为字符串,无损
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const 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: Object.entries()

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

Map转JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 情况一: 键名都是字符串(对象JSON)
const strMapToJson = (strMap) => {
return JSON.stringify(strMapToObj(strMap));
}

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

// 情况二: 键名有非字符串(数组 JSON)
const mapToArrayJson = (map) => {
return JSON.stringify([...map]);
}

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

JSON转Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 正常情况,所有键名都是字符串

const jsonToStrMap = (jsonStr) => {
return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

// 特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。

const jsonToMap = (jsonStr) => {
return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

Map构造函数求value最大值

  • 只取value的最大值: Math.max(…m.values())
  • 取最大值的key,value: […m.entries()].reduce((a, e) => e[1] > a[1] ? e : a) 缺点: 有多个相等的最大值获取不到
  • 取最大值的key,value:(相等也可)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const maxList = () => {
    let MaxEle = []
    let max = 0
    for (let [key, value] of map) {
    max = max > value ? max : value
    }
    MaxEle = [...map.entries()].filter(item => item[1] === max)
    return MaxEle
    }
其他文章
cover
ES6-编程风格
  • 24/10/31
  • 15:54
  • ES6
目录导航 置顶
  1. 1. Set
    1. 1.1. set去重
    2. 1.2. 创建Set构造函数:new Set()
    3. 1.3. set操作方法:
    4. 1.4. Set结构转数组:Array.from()
  2. 2. Map
    1. 2.1. 创建一个Map构造函数:new Map()
    2. 2.2. Map操作方法
  3. 3. Set / Map 共同方法
    1. 3.1. 遍历方法
    2. 3.2. 实例属性:
  4. 4. reduce 累加器
    1. 4.1. .map():遍历
    2. 4.2. .filter():过滤
  5. 5. 互转结构
    1. 5.1. map 转数组: […map]
    2. 5.2. 数组转map:new Map([array])
    3. 5.3. map转对象
    4. 5.4. 对象转Map: Object.entries()
    5. 5.5. Map转JSON
    6. 5.6. JSON转Map
  6. 6. Map构造函数求value最大值
请输入关键词进行搜索