<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map</title>
</head>
<body>
<script>
/*Map 结构提供了“值—值”的对应*/
// let m = new Map();
// let obj = {'abc':123};
// m.set(obj,'content');//设置
// console.log(m.get(obj));//content /*Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组*/
// const map = new Map([
// ['name', '张三'],
// ['title', 'Author']
// ]); // console.log(map.size) // 2
// console.log(map.has('name')) // true
// console.log(map.get('name')) // "张三" /*任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构(详见《Iterator》一章)都可以当作Map构造函数的参数*/
// const s = new Set([
// ['abc',111],
// ['cba',222]
// ]);
// const m1 = new Map(s);
// console.log(m1);//Map(2) {"abc" => 111, "cba" => 222} // const arr = [{'name':123},{'age':321}];//必须是双元素的数组结构,这样写会显示undefined
// const m2 = new Map(arr);
// console.log(m2);//Map(1) {undefined => undefined} /*只有对同一个对象的引用,Map 结构才将其视为同一个键*/
// const map = new Map();
// map.set(['a'], 555);
// console.log(map.get(['a'])); // undefined set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的 // let obj = ['abc'];
// map.set(obj,111);
// console.log(map.get(obj));//111 Map 的键实际上是跟内存地址绑定的 /*delete方法删除某个键*/
// const m = new Map();
// m.set(undefined, 'nah');
// m.delete(undefined); /*clear方法清除所有成员*/
// let map = new Map();
// map.set('foo', true);
// map.set('bar', false);
// map.clear(); /*Map 转为数组,Map 转为数组最方便的方法,就是使用扩展运算符(...)*/
// const myMap = new Map()
// .set(true, 7)
// .set({foo: 3}, ['abc']);
// console.log([...myMap])// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] /*数组 转为 Map*/
// new Map([
// [true, 7],
// [{foo: 3}, ['abc']]
// ]) /*Map 转为对象,如果所有 Map 的键都是字符串,它可以无损地转为对象,如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名*/
// function strMapToObj(strMap) {
// let obj = {};
// for (let [k,v] of strMap) {
// obj[k] = v;
// }
// return obj;
// } // const myMap = new Map()
// .set('yes', true)
// .set('no', false);
// console.log(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;
// } // console.log(objToStrMap({yes: true, no: false}))// Map {"yes" => true, "no" => false} /*Map 转为 JSON*/
// function strMapToJson(strMap) {//Map 的键名都是字符串,这时可以选择转为对象 JSON
// return JSON.stringify(strMapToObj(strMap));
// } // function mapToArrayJson(map) {//Map 的键名有非字符串,这时可以选择转为数组 JSON
// return JSON.stringify([...map]);
// } // /*JSON 转为 Map*/
// function jsonToStrMap(jsonStr) {//所有键名都是字符串
// return objToStrMap(JSON.parse(jsonStr));
// } // function jsonToMap(jsonStr) {//整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map
// return new Map(JSON.parse(jsonStr));
// } </script>
</body>
</html>

备注:文中多数内容摘自阮一峰老师文章,仅供自我学习查阅。

https://edu.51cto.com/lecturer/11857712.html 星星课堂web前端系列课程
https://edu.51cto.com/course/23133.html js进阶与组件化实战课程
https://edu.51cto.com/course/26063.html vue零基础入门课程
https://edu.51cto.com/course/22393.html xhtml与css基础入门课程

ES6基础知识(Map用法)的更多相关文章

  1. ES6 基础知识

    let:用来定义变量特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明; 比如: var a = 12; var a = 5; alert(a); //5; let a = 1 ...

  2. es6基础知识

    1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] ar ...

  3. ES6基础知识(Reflect)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. es6基础知识总结(附加)

    附加: 字符串扩展: 1. includes(str) : 判断是否包含指定的字符串2. startsWith(str) : 判断是否以指定字符串开头3. endsWith(str) : 判断是否以指 ...

  5. ES6 基础知识-----简记 let const

    ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const let 声明块级作用域变量, let 不存在变量提升 var命令会发生”变量提升“现象,即变量可以在 ...

  6. ES6基础知识(async 函数)

    1.async 函数是什么?一句话,它就是 Generator 函数的语法糖. const fs = require('fs'); const readFile = function (fileNam ...

  7. ES6基础知识(Promise 对象)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  9. ES6基础知识汇总

    1.如何理解ECMAScript6? ECMAScript是什么,ECMASCript的作用 2.新增let关键字 let的用途 3.关键字const const作用,传址赋值 4.解构赋值 解构赋值 ...

随机推荐

  1. 从0到1告诉你搭建完整Python+requests接口自动化测试框架!

    前言 很多小伙伴不知道什么是框架?框架有哪些东西? 一步步从需求分析到报告生成告诉你如何搭自动化建框架. 学完unittest后这里基本上可以搭建一个简易的项目框架了,我们可以用一条run_main. ...

  2. WPF进阶技巧和实战01-小技巧

    Svg在WPF中的使用 方法1:拷贝svg中的部分代码转换成Geometry(作为Path的Data使用) 在vs或者直接打开svg,看到如下代码: <?xml version="1. ...

  3. disruptor笔记之八:知识点补充(终篇)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  4. 订单峰值激增 230%,Serverless 如何为世纪联华降本超 40%?|双11 云原生实践

    作者 | 朱鹏 导读:2020 年 双11,世纪联华基于阿里云函数计算 (FC) 弹性扩容,应用于大促会场 SSR.线上商品秒杀.优惠券定点发放.行业导购.数据中台计算等多个场景,业务峰值 QPS 较 ...

  5. Java爬虫系列四:使用selenium-java爬取js异步请求的数据

    在之前的系列文章中介绍了如何使用httpclient抓取页面html以及如何用jsoup分析html源文件内容得到我们想要的数据,但是有时候通过这两种方式不能正常抓取到我们想要的数据,比如看如下例子. ...

  6. Mybatis 一对多延迟加载,并且子查询中与主表字段不对应 (19)

    Mybatis  一对多延迟加载,并且子查询中与主表字段不对应应用说明. 实现一对多关联(懒加载),一个教研组对应多个教师,既:教师的教研编号与教研组的教研编号关联,并且教师关联教研组外键与教研组编号 ...

  7. 【转-Andrew_qian】stm32中断嵌套全攻略

    断断续续学习STM32一学期了,时间过的好快,现在对STM32F103系列单片机的中断嵌套及外部中断做一个总结,全当学习笔记.废话不多说,ARM公司的Cortex-m3 内核,支持256个中断,其中包 ...

  8. [对对子队]会议记录4.17(Scrum Meeting8)

    今天已完成的工作 何瑞 ​ 工作内容:修复了一些bug,优化了UI ​ 相关issue:搭建关卡1 ​ 相关签入:4.17签入1 吴昭邦 ​ 工作内容:做了一些流水线系统的错误处理,添加了合成失败了之 ...

  9. STM32定时器学习---基本定时器

    STM32F1系列的产品,除了互联网产品外,工作8个,3种定时器,其中一种就是基本定时器.那么STM32单片机的基本定时器如何操作以及编程呢? 下面我们就来详细的了解一下 STM32F1系列的产品,除 ...

  10. 【Azure 应用服务】App Service For Linux 部署Java Spring Boot应用后,查看日志文件时的疑惑

    编写Java Spring Boot应用,通过配置logging.path路径把日志输出在指定的文件夹中. 第一步:通过VS Code创建一个空的Spring Boot项目 第二步:在applicat ...