20190727-前端笔记-Map结构

everfly 发布于2019-08-26 10:22 / 773人阅读

摘要：将对象当做的一个键获取键为的值删除键为的键值对判断是否包含键值对但是我在看阮一峰的的时候，看到一些针对自己的问题，不太好理解。

在JS的对象（Object）中，本质是就是键值对的集合（HASH）

{
"name":"Kisn",
Brith:941018
}

但是在实际情况使用中，我们不能很好地使用它，它也会导致很多意外。特别是，我想要一个动态的键时.

const data = {};
const element = document.getElementById("myDiv");

data[element] = "metadata";
data["[object HTMLDivElement]"] // "metadata"

所以我们现在有一个数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

Map

let m = new Map(),
    o = {a:1};
    
m.set(o,"this is a json")
m.got(0) // "this is a json"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

将对象o当做m的一个键

new Map().get(x) 获取键为x的值

new Map().delete(x) 删除键为x的键值对

new Map().has(x) 判断是否包含x键值对

但是我在看阮一峰的md的时候，看到一些针对自己的问题，不太好理解。我在下面梳理下：

如何new Map()

我看过阮一峰的文章以后，我自己尝试new一个Map数据的，但是老是报错：

正确的写法

var m5 = new Map([
    ["asd","name"],
    [{no:1,name:"Kisn",age:25},"intro"]
])

我的理解是new Map()里面是类数组[],类数组[]里面才是对象（参数）=> [[object,value],[object1,value2]]。

注意事项

在Map数据结构中，我们需要注意的是，Map的键指向的是一个对象，而不是一个具体的值

const map = new Map();

map.set(["a"], 555);
map.get(["a"]) // undefined

为什么会报undefined?

因为很可能两个["a"]没有指向同一个对象，内存地址是不一样的。所以在Map数据结构中被视为2个键.

const m = new Map();

const key1 = ["a"];
const key2 = ["a"];

m.set(key1,"1")
 .set(key2,2);

m.get(key1) // "1"
m.get(key2) // 2

遍历方法

let m = new Map([
["name","Kisn"],
["age","25"],
["job","F2E"]
])

// 遍历Map的键（key）
for(let key of m.keys()){
    console.log(key)
}
// name
// age
// job

// 遍历Map的值（value）
for(let val of m.values()){
    console.log(val);
}
// Kisn
// 25 
// F2E

// 遍历Map的建和值
for(let item of map.entries()){
    console.log(item[0],item[1])
}
// or
for(let [key,val] of map.entries()){
    console.log(key,val);
}
// or 忽悠.entries相同
for(let [key, val] of map){
    console.log(key,val);
}

// "name" ,"kisn"
// "age","25"
// "job","F2E"

拓展运算符(...)

let m = new Map([
["name","Kisn"],
["age","25"],
["job","F2E"]
])

[...m]
// ["name","Kisn"],["age","25"],["job","F2E"]`

[...m.entries()]
// ["name","Kisn"],["age","25"],["job","F2E"]`

[...m.keys()]
// ["name","age","job"]

[...m.values()]
//["Kisn","25","F2E"]

我们可以利用Map数据结构的map方法和filter做了什么？

let m = new Map([
    ["name","Kisn"],
    ["age","25"],
    ["job","F2E"]
])

// 筛选出`key!=="age"`的键值对生成一个新的Map数组
let m2 = new Map(
    [...m].filter([(key,val])=> key !=="age")
)

// 循环`m`,形成一个的数据
let m3 = new Map(
    [...m].map(([k,v]) => [`${k}:`,v] )
)

参考

ES6-Set&Map

GPU云服务器云服务器 java的map结构 map的数据结构js实现 js前端数据结构 map()

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

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

RAINBOND源码构建JAVA项目配置MAVEN仓库

摘要：清除构建缓存为每一个服务的构建环境提供缓存，项目会对的安装目录，配置目录，和本地仓库目录提供了缓存，用户通过以下设置清理缓存。本文档详细介绍了源码构建项目时的各种详细设置与操作。概述根据大量的Rainbond用户反馈，我们发现在Rainbond源码构建java-maven项目的过程中，最容易出现问题的一环就是获取构件失败。比如： [ERROR] Failed to execute...

MockingBird 2019-08-19 10:28 评论0 收藏0
前端笔记(四) ES6常用语法

摘要：函数更好的尾递归优化实现传入类数组对象且每次的值在改变。尾递归实现改写一般的递归函数确保最后一步只调用自身。返回一个遍历器对象用循环遍历。和循环它是一种遍历器接口为各种不同的数据结构提供统一的访问机制。解构赋值 //数组的解构赋值 let [a, b, c] = [1, 2, 3]; a // 1 b // 2 c // 3 let [a, [[b], c]] = [1, [[2]...

church 2019-08-22 15:46 评论0 收藏0
玩转 React【第02期】：恋上 React 模板 JSX

摘要：今天我们来看一种优雅的编写的代码的一种方式。有了之后，可以帮助我们在编写模板的时候结构更加简单清晰。以上是笔者归纳总结，如有误之处，欢迎指出。 showImg(https://segmentfault.com/img/bVbiT3u?w=900&h=383);往期回顾前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻...

ivydom 2019-08-23 12:37 评论0 收藏0
golang学习笔记（一）——golang基础和相关数据结构

摘要：小白前端一枚，最近在研究，记录自己学习过程中的一些笔记，以及自己的理解。此外，结构体也支持嵌套。在函数声明时，在函数名前放上一个变量，这个变量称为方法的接收器，一般是结构体类型的。小白前端一枚，最近在研究golang，记录自己学习过程中的一些笔记，以及自己的理解。 go中包的依赖管理 go中的切片 byte 和 string go中的Map go中的struct结构体 go中的方...

lyning 2019-08-26 13:27 评论0 收藏0
《廖雪峰JavaScript-快速入门》笔记

摘要：文章内容来源廖雪峰快速入门赋值注释数据类型不区分整数和浮点数，统一用表示。条件判断使用来进行条件判断。最新的规范引入了新的数据类型，是一组键值对的结构，具有极快的查找速度。一个数组实际上也是一个对象，它的每个元素的索引被视为一个属性。文章内容来源：廖雪峰JavaScript-快速入门赋值 var x = 1; 注释 // comment /* comment */ 数据类型 Num...

caozhijian 2019-08-23 16:54 评论0 收藏0