【重温基本】11.Map和Set对象

2023年2月25日 123次阅读 来源: pingan8787

本文是 重温基本 系列文章的第十一篇。
本日感觉：注重身材，抱病费钱又难熬痛苦。

系列目次：

本章节温习的是JS中的Map和Set对象，是个鸠合。

前置学问：
Map和Set对象是在ES6中被引入的，作为一种由key值标记的数据容器。
Map和Set对象承载的数据元素能够根据插进去时的递次，被迭代遍历。

1 Set对象

引见:
Set数据构造相似数组，但一切成员的值唯一。
Set自身为一个组织函数，用来天生Set数据构造，运用add要领来增添新成员。

let a = new Set();
[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));
for(let k of a){
    console.log(k)
};
// 1 2 3 4 5

基本运用：

let a = new Set([1,2,3,3,4]);
[...a]; // [1,2,3,4]
a.size; // 4

// 数组去重
[...new Set([1,2,3,4,4,4])];// [1,2,3,4]

注重：

  • 向Set中增添值的时刻，不会范例转换，即5和'5'是差别的。
[...new Set([5,'5'])]; // [5, "5"]

属性和要领：

  • 属性：

    • Set.prototype.constructor：组织函数，默许就是Set函数。
    • Set.prototype.size：返回Set实例的成员总数。

  • 操纵要领：

    • add(value)：增添某个值，返回 Set 构造自身。
    • delete(value)：删除某个值，返回一个布尔值，示意删除是不是胜利。
    • has(value)：返回一个布尔值，示意该值是不是为Set的成员。
    • clear()：消灭一切成员，没有返回值。
let a = new Set();
a.add(1).add(2); // a => Set(2) {1, 2}
a.has(2);        // true
a.has(3);        // false
a.delete(2);     // true  a => Set(1) {1}
a.clear();       // a => Set(0) {}

数组去重：

let a = new Set([1,2,3,3,3,3]);

2 Set的运用

数组去重：

// 要领1
[...new Set([1,2,3,4,4,4])]; // [1,2,3,4]
// 要领2
Array.from(new Set([1,2,3,4,4,4]));    // [1,2,3,4]

遍历和过滤：

let a = new Set([1,2,3,4]);

// map 遍历操纵
let b = new Set([...a].map(x =>x*2));// b => Set(4) {2,4,6,8}

// filter 过滤操纵
let c = new Set([...a].filter(x =>(x%2) == 0)); // b => Set(2) {2,4}

猎取并集、交集和差集：

let a = new Set([1,2,3]);
let b = new Set([4,3,2]);

// 并集
let c1 = new Set([...a, ...b]);  // Set {1,2,3,4}

// 交集
let c2 = new Set([...a].filter(x => b.has(x))); // set {2,3}

// 差集
let c3 = new Set([...a].filter(x => !b.has(x))); // set {1}

  • 遍历要领：

    • keys()：返回键名的遍历器。
    • values()：返回键值的遍历器。
    • entries()：返回键值对的遍历器。
    • forEach()：运用回调函数遍历每一个成员。

Set遍历递次是插进去递次，当保留多个回调函数，只需根据递次调用。但因为Set构造没有键名只要键值，所以keys()和values()是返回效果雷同。

let a = new Set(['a','b','c']);
for(let i of a.keys()){console.log(i)};   // 'a' 'b' 'c'
for(let i of a.values()){console.log(i)}; // 'a' 'b' 'c'
for(let i of a.entries()){console.log(i)}; 
// ['a','a'] ['b','b'] ['c','c']

而且 还能够运用for...of直接遍历Set。

let a = new Set(['a','b','c']);
for(let k of a){console.log(k)};   // 'a' 'b' 'c'

forEach与数组雷同，对每一个成员实行操纵，且无返回值。

let a = new Set(['a','b','c']);
a.forEach((v,k) => console.log(k + ' : ' + v));

3 Map对象

因为传统的JavaScript对象只能用字符串当作键，给开辟带来很大限定，ES6增添Map数据构造，使得各种范例的值(包含对象)都能够作为键。
Map构造供应了“值—值”的对应，是一种更完美的 Hash 构造完成。
基本运用：

let a = new Map();
let b = {name: 'leo' };
a.set(b,'my name'); // 增添值
a.get(b);           // 猎取值
a.size;      // 猎取总数
a.has(b);    // 查询是不是存在
a.delete(b); // 删除一个值
a.clear();   // 清空一切成员 无返回

注重：

  • 传入数组作为参数，指定键值对的数组。
let a = new Map([
    ['name','leo'],
    ['age',18]
])
  • 假如对同一个键屡次赋值，背面的值将掩盖前面的值。
let a = new Map();
a.set(1,'aaa').set(1,'bbb');
a.get(1); // 'bbb'
  • 假如读取一个未知的键，则返回undefined。
new Map().get('abcdef'); // undefined
  • 一样的值的两个实例，在 Map 构造中被视为两个键。
let a = new Map();
let a1 = ['aaa'];
let a2 = ['aaa'];
a.set(a1,111).set(a2,222);
a.get(a1); // 111
a.get(a2); // 222

遍历要领：
Map 的遍历递次就是插进去递次。

  • keys()：返回键名的遍历器。
  • values()：返回键值的遍历器。
  • entries()：返回一切成员的遍历器。
  • forEach()：遍历 Map 的一切成员。
let a = new Map([
    ['name','leo'],
    ['age',18]
])

for (let i of a.keys()){...};
for (let i of a.values()){...};
for (let i of a.entries()){...};
a.forEach((v,k,m)=>{
    console.log(`key:${k},value:${v},map:${m}`)
})

将Map构造转成数组构造：

let a = new Map([
    ['name','leo'],
    ['age',18]
])

let a1 = [...a.keys()];   // a1 => ["name", "age"]
let a2 = [...a.values()]; // a2 =>  ["leo", 18]
let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]

4 Map与其他数据构造相互转换

  • Map 转 数组
let a = new Map().set(true,1).set({f:2},['abc']);
[...a]; // [[true:1], [ {f:2},['abc'] ]]
  • 数组 转 Map
let a = [ ['name','leo'], [1, 'hi' ]]
let b = new Map(a);
  • Map 转 对象

假如一切 Map 的键都是字符串，它能够无损地转为对象。
假如有非字符串的键名，那末这个键名会被转成字符串，再作为对象的键名。

function fun(s) {
  let obj = Object.create(null);
  for (let [k,v] of s) {
    obj[k] = v;
  }
  return obj;
}

const a = new Map().set('yes', true).set('no', false);
fun(a)
// { yes: true, no: false }
  • 对象 转 Map
function fun(obj) {
  let a = new Map();
  for (let k of Object.keys(obj)) {
    a.set(k, obj[k]);
  }
  return a;
}

fun({yes: true, no: false})
// Map {"yes" => true, "no" => false}
  • Map 转 JSON

(1)Map键名都是字符串，转为对象JSON：

function fun (s) {
    let obj = Object.create(null);
    for (let [k,v] of s) {
        obj[k] = v;
    }
    return JSON.stringify(obj)
}
let a = new Map().set('yes', true).set('no', false);
fun(a);
// '{"yes":true,"no":false}'

(2)Map键名有非字符串，转为数组JSON：

function fun (map) {
  return JSON.stringify([...map]);
}

let a = new Map().set(true, 7).set({foo: 3}, ['abc']);
fun(a)
// '[[true,7],[{"foo":3},["abc"]]]'
  • JSON 转 Map

(1)一切键名都是字符串：

function fun (s) {
  let strMap = new Map();
  for (let k of Object.keys(s)) {
    strMap.set(k, s[k]);
  }
  return strMap;
  return JSON.parse(strMap);
}
fun('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

(2)全部 JSON 就是一个数组，且每一个数组成员自身，又是一个有两个成员的数组:

function fun2(s) {
  return new Map(JSON.parse(s));
}
fun2('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

参考材料

1.阮一峰ES6入门

本部分内容到这完毕

Author王安然
E-mailpingan8787@qq.com
博 客www.pingan8787.com
微 信pingan8787
逐日文章引荐https://github.com/pingan8787…
JS小册js.pingan8787.com

迎接关注微信民众号【前端自习课】天天清晨，与您一同进修一篇优异的前端手艺博文 .

    原文作者：pingan8787
    原文地址: https://segmentfault.com/a/1190000017531789
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞