唯品秀前端博客

Map 对象存有键值对,其中的键可以是任何数据类型;Map 对象记得键的原始插入顺序;Map 对象具有表示映射大小的属性。包括它自身拥有非常健全的操作方法,基于这些特性,我们在很多时候将数据格式定义为map对象不失为一种更好的选择,注意:map对象的key具有唯一性,重复的key后者覆盖前者

基本方法

基本操作都很简单,具体去W3school看就好了,不值一提,关键我们要了解它,并且知道如何用上它

map与array、object的对比

区别 map array object
用字符串做键 ×
用字符串、数字以外做键 × ×
用for of ×

map对象转普通对象

1
2
3
4
5
6
// 默认定义个空map对象,后期手动插入值,再转
let mapData = new Map();
mapData.set('a',1);
mapData.set('b',2);
console.log(Object.fromEntries(mapData))
// {a: 1, b: 2}

map对象下entries方法

这个方法有点意思,它可以将map对象转换成一个二维数组形式

1
2
3
4
5
6
7
8
9
10
11
12
13
const map = new Map();
map.set('one','React');
map.set('two','Vue');
map.set('three','Angular');
[...map.entries()]

// 结果
(3) [Array(2), Array(2), Array(2)]
0: (2) ['one', 'React']
1: (2) ['two', 'Vue']
2: (2) ['three', 'Angular']
length: 3
[[Prototype]]: Array(0)

map对象获取key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let mapData = new Map([
 ['a', 1],
 ['b', 2],
 ['c', 3],
]);
// 获取key方式有很多
1、通过上面方式先转换成普通对象,再通过Object.keys即可得到key值数组['a', 'b', 'c']
2、map自身拥有keys和values方法
console.log( ...mapData.keys());
console.log( ...mapData.values());
3、map下面的forEach方法对应三个参数,第三个参数是指原数据map对象
mapData.forEach((value,key) => {
  console.log(value,key)
});
// 打印结果
1 "a"
2 "b"
3 "c"

4、通过map下的entries方法
for (let [key, value] of mapData.entries()) {
    console.log([key, value]);
}
// 或者
[...mapData.entries()].forEach(([key,value]) => {
  console.log([key,value])
});
// 结果
(2) ['a', 1]
(2) ['b', 2]
(2) ['c', 3]

map对象在vue模板中渲染

既然我们上面提到学习map对象后,我们可以将很多键值对类型的数据定义到map对象中,那在vue中我们该如何渲染页面呢?只学不用那等于学个寂寞,一定要用起来,follow me...

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>map对象</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in mapData" :key="key">{{item}}{{index}}</li>  // 很显然,这里我们拿到的item是数组['a', 10]、['b', 100]
    </ul>
  </div>
</body>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    mapData: new Map([
      ['a', 10],
      ['b', 100]
    ])
  },
})

这么看起来,想渲染item里面的值还有点麻烦,难不成需要我用item[1]数组下标解决?网上还有同学在强行使用map对象进行模板渲染后,只好把item里面再循环一遍,我看着笑懵逼,这不等于自己搬石头砸了自己的脚,如果map在这里用起来那么麻烦,那还用个锤子,实际上我们只需要通过ES6解构出来就好,如下:

1
2
3
4
5
6
7
8
9
// Map遍历两遍
<div id="app">
    <li href="javascript:;"
        v-for="(item,index) in dateMap"
        :key="index"
    >
        <span  v-for="data in item">{{data}}</span>
    </li>
</div>
1
<li v-for="([key,value],index) in mapData" :key="index">{{key}}{{value}}{{index}}</li>
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"JavaScript-ES6中你不能不知道的map对象的基本使用"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏