资讯专栏INFORMATION COLUMN

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

meteor199 / 1726人阅读

摘要:本文是重温基础系列文章的第十一篇。返回一个布尔值,表示该值是否为的成员。使用回调函数遍历每个成员。与数组相同,对每个成员执行操作,且无返回值。

本文是 重温基础 系列文章的第十一篇。
今日感受:注意身体,生病花钱又难受。

系列目录:

【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)

【重温基础】1.语法和数据类型

【重温基础】2.流程控制和错误处理

【重温基础】3.循环和迭代

【重温基础】4.函数

【重温基础】5.表达式和运算符

【重温基础】6.数字

【重温基础】7.时间对象

【重温基础】8.字符串

【重温基础】9.正则表达式

【重温基础】10.数组

本章节复习的是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-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册 js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨,与您一起学习一篇优秀的前端技术博文 .

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100432.html

相关文章

  • 重温基础】12.使用对象

    摘要:本文是重温基础系列文章的第十二篇。注意对象的名称,对大小写敏感。基础用法第一个参数是目标对象,后面参数都是源对象。用途遍历对象属性。用途将对象转为真正的结构。使用场景取出参数对象所有可遍历属性,拷贝到当前对象中。类似方法合并两个对象。 本文是 重温基础 系列文章的第十二篇。 今日感受:需要总结下2018。 这几天,重重的感冒发烧,在家休息好几天,伤···。 系列目录: 【复习资料...

    garfileo 评论0 收藏0
  • 重温基础】13.迭代器生成器

    摘要:迭代器和生成器将迭代的概念直接带入核心语言,并提供一种机制来自定义循环的行为。本文主要会介绍中新增的迭代器和生成器。属性本身是函数,是当前数据结构默认的迭代器生成函数。 本文是 重温基础 系列文章的第十三篇。今日感受:每次自我年终总结,都会有各种情绪和收获。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流...

    ymyang 评论0 收藏0
  • 重温基础】14.元编程

    摘要:本文是重温基础系列文章的第十四篇。元,是指程序本身。有理解不到位,还请指点,具体详细的介绍,可以查看维基百科元编程。拦截,返回一个布尔值。 本文是 重温基础 系列文章的第十四篇。 这是第一个基础系列的最后一篇,后面会开始复习一些中级的知识了,欢迎持续关注呀! 接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。 今日感受:独乐乐不如众乐乐...

    cc17 评论0 收藏0
  • 重温基础】15.JS对象介绍

    摘要:构造函数通常首字母大写,用于区分普通函数。这种关系常被称为原型链,它解释了为何一个对象会拥有定义在其他对象中的属性和方法。中所有的对象,都有一个属性,指向实例对象的构造函数原型由于是个非标准属性,因此只有和两个浏览器支持,标准方法是。 从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 【Cute-JavaScript】系...

    booster 评论0 收藏0
  • 重温基础】7.时间对象

    摘要:本文是重温基础系列文章的第七篇。系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数重温基础表达式和运算符重温基础数字本章节复习的是中的时间对象,一些处理的方法。 本文是 重温基础 系列文章的第七篇。今日感受:做好自律。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型...

    YuboonaZhang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<