唯品秀前端博客
当前位置: 前端开发 > JavaScript >

JavaScript-ES6中你不能不知道的map对象的基本使用

作者：管理员 2022-06-23 14:02:19 分类：JavaScript 阅读（1401） 0

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对象的基本使用"

表情

最新评论

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

支付宝扫一扫打赏

微信扫一扫打赏