码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 map数据结构

时间:2021-01-07 11:50:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:元素   title   def   sse   结果   UNC   map遍历   使用数组   键值对   

1,map数据结构存在的意义

Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成”[object Object]“。ES6提供了”值-值“对的数据结构,键名不仅可以是字符串,也可以是对象--map。它是一个更完善的Hash结构。

2,map的特性

1.键值对,键可以是对象。
const map1 = new Map()
const objkey = {p1: ‘v1‘}

map1.set(objkey, ‘hello‘)
console.log(map1.get(objkey))//hello

2.Map可以接受数组作为参数,数组成员还是一个数组,其中有两个元素,一个表示键一个表示值。

const map2 = new Map([
  [‘name‘, ‘Aissen‘],
  [‘age‘, 12]
])
console.log(map2.get(‘name‘))//Aissen
console.log(map2.get(‘age‘))//12

3,map的方法

1 set +get +size

  let map1=new Map();

 map1.set(‘name‘,‘lili‘)

 map1.get(‘name‘)//lili

 map1.size()//1

map1.set(‘k1‘, 6)        // 键是字符串
map1.set(222, ‘哈哈哈‘)     // 键是数值
map1.set(undefined, ‘gagaga‘)    // 键是 undefined

const fun = function() {console.log(‘hello‘);}
map1.set(fun, ‘fun‘) // 键是 function
map1.get(undefined)//gagaga
map1.get(fun)//fun
map1.set(‘k2‘, 2).set(‘k3‘, 4).set(‘k4‘, 5)

2.has

判断指定的键是否存在。

const map6 = new Map();
map6.set(undefined, 4)
console.log(‘map6 undefined: %s‘, map6.has(undefined))
console.log(‘map6 k1: %s‘, map6.has(‘k1‘))

结果:

map6 undefined: true
map6 k1: false

 

3.delete

删除键值对。

const map7 = new Map();
map7.set(undefined, 4)
map7.delete(undefined)
console.log(‘map7 undefined: %s‘, map7.has(undefined))

结果:

map7 undefined: false

 

4.clear

删除map中的所有键值对。

技术图片
const map8 = new Map();
map8.set(‘k1‘, 1);
map8.set(‘k2‘, 2);
map8.set(‘k3‘, 3);
console.log(‘map8, pre-clear size: %s‘, map8.size)
map8.clear()
console.log(‘map8, post-clear size: %s‘, map8.size)
技术图片

结果:

map8, pre-clear size: 3
map8, post-clear size: 0

4,map遍历: for of + forEach  

const map9 = new Map();
map9.set(‘k1‘, 1);
map9.set(‘k2‘, 2);
map9.set(‘k3‘, 3);
for (let key of map9.keys()) { console.log(key);//k1,k2,k3 }
for (let value of map9.values()) {
  console.log(value);//1,2,3
}
for (let item of map9.entries()) {
  console.log(item[0]+‘:‘, item[1]);//k1:1,k2:2,k3:3
}
for (let [key, value] of map9.entries()) {
  console.log(key+‘:‘,value);//k1:1,k2:2,k3:3
}
map9.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});
Key: k1, Value: 1
Key: k2, Value: 2
Key: k3, Value: 3
注意:对象+数组的新方法 obj.keys() obj.values() obj.entries()

5,map的扩展(用处不大)

1.Map To Array

使用扩展运算符三个点(...)可将map内的元素都展开的数组。

const map10 = new Map();
map10.set(‘k1‘, 1);
map10.set(‘k2‘, 2);
map10.set(‘k3‘, 3);
console.log([...map10]);

结果:

[ [ ‘k1‘, 1 ], [ ‘k2‘, 2 ], [ ‘k3‘, 3 ] ]

 

2.Array To Map

使用数组构造Map。

const map11 = new Map([
  [‘name‘, ‘Aissen‘],
  [‘age‘, 12]
])
console.log(map11)

结果:

Map { ‘name‘ => ‘Aissen‘, ‘age‘ => 12 }

 

3.Map To Object

写一个转换函数,遍历map的所有元素,将元素的键和值作为对象属性名和值写入Object中。

技术图片
function mapToObj(map) {
  let obj = Object.create(null);
  for (let [k,v] of map) {
    obj[k] = v;
  }
  return obj;
}

const map12 = new Map()
  .set(‘k1‘, 1)
  .set({pa:1}, 2);
console.log(mapToObj(map12))
技术图片

 结果:

{ k1: 1, ‘[object Object]‘: 2 }

 

4.Object To Map

同理,再写一个转换函数遍历Object,将属性名和值作为键值对写入Map。

技术图片
function objToMap(obj) {
  let map = new Map();
  for (let k of Object.keys(obj)) {
    map.set(k, obj[k]);
  }
  return map;
}

console.log(objToMap({yes: true, no: false}))
技术图片

结果:

Map { ‘yes‘ => true, ‘no‘ => false }

 

5.Set To Map

const set = new Set([
  [‘foo‘, 1],
  [‘bar‘, 2]
]);
const map13 = new Map(set)
console.log(map13)

结果:

Map { ‘foo‘ => 1, ‘bar‘ => 2 }

 

6.Map To Set

技术图片
function mapToSet(map) {
  let set = new Set()
  for (let [k,v] of map) {
    set.add([k, v])
  }
  return set;
}

const map14 = new Map()
  .set(‘k1‘, 1)
  .set({pa:1}, 2);
console.log(mapToSet(map14))
技术图片

结果:

Set { [ ‘k1‘, 1 ], [ { pa: 1 }, 2 ] }

ES6 map数据结构

标签:元素   title   def   sse   结果   UNC   map遍历   使用数组   键值对   

原文地址:https://www.cnblogs.com/fanjiawen/p/14229861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!