首页 > WEB开发 > JavaScript开发 > 关于ES6中的Maps你需要知道的那些事
2017
02-22

关于ES6中的Maps你需要知道的那些事

  JavaScript ES6 引入了一个新的数据结构,叫做 maps。 Maps 是设计用来代替使用Object Literal进行键值对存储的数据结构,它需要键值唯一,并且为循环提供了很多可用的方法。

 

 使用Object literals 作为 “Maps”

  Object literals是JavaScript中最基础的功能了,没有之一。创建一个Map只需要以下这样简单的代码:

var map = {
  "key1":"value1",
  "key2":"value2"
}
map.key1; // == "value1"

  很多情况下,Object literals都可以当作Maps正常使用,但有一些情况不能。比如可能会有和Object 原型方法重名的自变量,比如:

var map = {
  "key1":"value1",
  "key2":"value2"
}
map.toString() == "[object Object]"  // Correct
map.toString = "value3"
map.toString(); // Uncaught TypeError: a.toString is not a function

  使用object literals的另一个缺点是所有的键必须是字符串string类型的变量。多数情况下这样做没问题,但如果想使用原始类型的值作为Key值,系统会默认将这个原始类型转换为string类型。这种情况在黑盒内发生时,用户就可能遇到意外的结果。比如下例,使用一个数组作为键值,

map[[1,2,3]] = "value4" // the provided key is an array
map['1,2,3'] = "value4" // the system has made the key a string

  使用object literals还有一个问题:即无法保证键值的顺序。添加键值的顺序并不是可能被循环取出值的时候的键值的顺序。例如

var o = {}
o.a = 1
o.b = 2
o.c = 3
for(key in o) console.log(key); 
// expected a,b,c - but not guaranteed to be in that order

  Object 对象也缺乏forEach的方法,不能对object使用通常的迭代方法

o.forEach // undefined

 ES6的Maps

  ES6就解决以上问题提供了一个这个Map对象类型。你可以使用new Map([iterable])来创建一个可迭代的对象。Iterable对象可以是一个数组或者任意可遍历的并且具有键值对的对象。他们的键值对会被自动添加到新创建的Map对象中去。

var m = new Map()
m.set('a', 1)
m.set('b', 2)
// {"a" => 1, "b" => 2}

 Map的属性和方法

  Map提供了一个非常方便的.size属性,来返回对象的键值数量。Chrome控制台也可以直接显示这个Map对象及.size的属性大小。

var m = new Map()
m.set('a', 1)
m.set('b', 2)
m.size; // 2
m; // Map(2) {"a" => 1, "b" => 2}

  map.clear()

  清空map对象中所有项。

  map.delete(key)

  删除键值为key的项,返回值为是否成功删除。

var m = new Map()
m.set('a', 1)
m.set('b', 2)
m.delete('a'); // true
m.delete('c'); // false (key was not there to delete)

  map.get(key), map.has(key)

  取值,以及判断给定key值是否存在。

m.get('a'); // 1
m.has('a'); // true
m.has('z'); // false

  map.forEach(fn)

  方便的对当前map进行迭代,取得map的键值对。

var m = new Map()
m.set('a', 1)
m.set('b', 2)
m.forEach((k, v, m) => console.log(key:${k} value:${v} map:${m}))
// key:1 value:a map:[object Map]
// key:2 value:b map:[object Map]

  for..of

  另一种遍历map的方法是使用 for..of语法,也可以方便获得map的键值对。

for([key,value] of m) 
  console.log(key + '=' + value)
// a=1
// b=2

  m.keys()

  返回一个功能完善的迭代器,这样就可以根据需求使用.next()方法依次获得map所有的key值。

var m = new Map()
m.set('a', 1)
m.set('b', 2)
var iter = m.keys()
iter.next(); // Object {value: "a", done: false}
iter.next(); // Object {value: "b", done: false}
iter.next(); // Object {value: _undefined_, done: true}

  m.values(), m.entries()

  map的value和所有项可以通过这两个方法迭代得到。.entries()方法会把key/value值作为数组给出。

var iter = m.values()
iter.next(); // Object {value: 1, done: false}
iter.next(); // Object {value: 2, done: false}
iter.next(); // Object {value: _undefined_, done: true}
var iter = m.entries()
iter.next(); // Object {value: ["a", 1], done: false}
iter.next(); // Object {value: ["b", 2], done: false}
iter.next(); // Object {value: _undefined_, done: true}

  Maps give you alot of control over operations that need to be performed on the keys, values, or entries. Map提供了各种对map中的key/value以及键值对进行操作的方法。

  二维数组和Maps的转换

  Maps的构造器也可以接受二维数组的输入。每个数组都会被格式化为一个键值对。

var arr = [['a', 1], ['b', 2]]
var m = new Map(arr)
m; // Map(2) {"a" => 1, "b" => 2}

  非String类型的Keys

  任何类型的对象都可以作为map的键值,并且系统不会使用toString方法对对象进行自动转换。例如,下面这个使用document作为key值的例子。

var m = new Map()
m.set(document, true) // uses the document object as a key
// Map(1) {#document {} => true}
m.get(document) 
// true

  在ES6中,Map是一个重要的新功能,在键值对存储的情况下有这广泛的应用。

编程技巧