ES6新增数据结构Map的用法

Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成”[object Object]“。

ES6提供了”值-值“对的数据结构,键名不仅可以是字符串,也可以是对象。它是一个更完善的Hash结构。

特性

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‘))
console.log(map2.get(‘age‘))

结果:

Aissen
12

操作

1.size

获取map的大小。

const map3 = new Map();
map3.set(‘k1‘, 1);
map3.set(‘k2‘, 2);
map3.set(‘k3‘, 3);
console.log(‘%s‘, map3.size)

结果:

3

2.set

设置键值对,键可以是各种类型,包括undefined,function。

const map4 = new Map();
map4.set(‘k1‘, 6)        // 键是字符串
map4.set(222, ‘哈哈哈‘)     // 键是数值
map4.set(undefined, ‘gagaga‘)    // 键是 undefined

const fun = function() {console.log(‘hello‘);}
map4.set(fun, ‘fun‘) // 键是 function

console.log(‘map4 size: %s‘, map4.size)
console.log(‘undefined value: %s‘, map4.get(undefined))
console.log(‘fun value: %s‘, map4.get(fun))

结果:

map4 size: 4
undefined value: gagaga
fun value: fun

也可对set进行链式调用。

map4.set(‘k2‘, 2).set(‘k3‘, 4).set(‘k4‘, 5)
console.log(‘map4 size: %s‘, map4.size)

结果:

map4 size: 7

3.get

获取键对应的值。

const map5 = new Map();
map5.set(‘k1‘, 6)
console.log(‘map5 value: %s‘, map5.get(‘k1‘))

结果:

map5 value: 6

4.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

5.delete

删除键值对。

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

结果:

map7 undefined: false

6.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

遍历

1.keys()

遍历map的所有key。

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 

2.values()

遍历map所有的值。

for (let value of map9.values()) {
  console.log(value);
}

结果:

1
2
3 

3.entries()

遍历map的所有键值对。

方法1:

for (let item of map9.entries()) {
  console.log(item[0], item[1]);
}

结果:

k1 1
k2 2
k3 3

方法2:

for (let [key, value] of map9.entries()) {
  console.log(key, value);
}

结果不变。

4.forEach()

遍历map的所有键值对。

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

forEach有第二个参数,可以用来绑定this。

这样有个好处,map的存储的数据和业务处理对象可以分离,业务处理对象可以尽可能的按职责分割的明确符合SRP原则。

const output = {
  log: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map9.forEach(function(value, key, map) {
  this.log(key, value);
}, output);

和其它结构的互转

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 ] }

End

时间: 2024-11-08 01:28:36

ES6新增数据结构Map的用法的相关文章

ES6新增数据结构WeakSet的用法

WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

ES6,新增数据结构Set的用法

ES6 提供了新的数据结构 Set. 特性 似于数组,但它的一大特性就是所有元素都是唯一的,没有重复. 我们可以利用这一唯一特性进行数组的去重工作. 单一数组的去重. let set6 = new Set([1, 2, 2, 3, 4, 3, 5]) console.log('distinct 1:', set6) 结果: distinct 1: Set { 1, 2, 3, 4, 5 } 多数组的合并去重 let arr1 = [1, 2, 3, 4] let arr2 = [2, 3, 4,

Map()--es6新增数据结构

1.实例属性和操作方法 1)size属性 const map = new Map(); map.set('foo', true); map.set('bar', false); console.log(map.size); 2)set(key, value) 3)get(key) 如果找不到key,返回undefined 4)has(key) 5)delete(key) 6)clear() 清除所有成员 2.遍历方法 -keys():返回键名的遍历器. -values():返回键值的遍历器. -

js ES6 Set和Map数据结构详解

这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下 本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来

Js基础知识7-Es6新增对象Map和set数据结构

前言 JavaScript中对象的本质是键值对的集合,ES5中的数据结构,主要是用Array和Object,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map. Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子..下面话不多说了,来一起看看详细的介绍吧. Map 对象 Map结构提供了“值—值”的对应,任何值(对象或者原始值) 都可以作为一个键或一个值,是一种更完善的Hash结构实现.如果你需要“键值对”的数据结构

es6 Set 和Map 数据结构

ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4,5,2,2,2].forEach(x=>s.add(x)); for(let i of s) { console.log(i); } // 2 3 5 4 Set 函数可以接受一个数组作为参数. 可以利用去除数组重复成员的方法. [...new Set(array)] // 去除数组重复变量成员

ES6——数据结构 Map

数据结构 Map 字典: 用来存储不重复key的 Hash结构.不同于集合(Set)的是,字典使用的是 [键,值] 的形式来存储数据的. JavaScript 的对应那个(Object:{}) 只能用字符串当做键.这给他的使用带来了很大的限制. var data1={a:"1"},data2={b:"2"},obj={}; obj[data1]=1; obj[data2]=2; console.log(obj); 1.创建一个 Map const map=new M

ES6新增的 Set 和 WeakSet

什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以理解为值的集合.我们平时见到的数组Array也是一种数据结构,但是Set跟其他数据结构不同的地方就在于:它的值不会有重复项. 基本用法 我们从最基本的学起,Set的用法: 1 var s = new Set(); 2 console.log(s); 3 //打印结果:Set {} Set本身是一个构造函数,你可以理解为一个类,使用的时候需要用new来创建一个实例.以上的案例就是这样创建出一个Set结构,我们打印出来看看,控制台

【ES6新增语法详述】 𳞰

目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 原文: http://blog.gqylpy.com/gqy/275 "@ ES6新增了关于变量的定义,函数扩展,数据结构,类,模块等概念,本文将详细介绍常用的ES6语法. *** 1. 变量的定义 let ES6中新增了let语法,用来声明变量,用法类似var. ==let定义的变量只在当前代码块内有效.== 如下示例: <