ES6新数据结构Map功能与用法示例

本文实例讲述了ES6新数据结构Map功能与用法。分享给大家供大家参考，具体如下：

新数据结构Map

JavaScript中对象的本质是键值对的集合，但是键只能是字符串。为了弥补这种缺憾，ES6带来了一种新的数据结构Map。Map也是键值对的集合，只是键不仅可以是字符串还可以是其他数据类型，比如：对象（是不是很神奇）。请看下面例子。

var m = new Map();
var ul = document.getElementsByTagName('ul');
m.set(ul,'hi');
console.log(m.get(ul)); //hi

对于Map的操作有以下几个：

m.set(ul,'content'); //为Map增加成员
m.get(ul);//获取键 ul对应的值
m.has(ul);//返回布尔值，判断是否含有键 ul
m.delete(ul);//删除键 ul，成功返回true，失败返回false
m.size //返回m长度
m.clear(); //清除m所有成员

直接为Map赋初值的方法：

var m = new Map([[li_1,'hello'],[li_2,'world']]);

接受的参数为一个数组，数组内的成员是表示一个一个键值对的数组。如果你蒙了，请看上行代码的实际执行情况：

var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
console.log(m.get(li_1)); //hello

如果对一个键多次赋值，后面的值会覆盖前面的值。值得注意的是，当键是对象时，必须是引用相同，才认为键是相同的。下面介绍Map的遍历方法。

var ul = document.getElementsByTagName('ul');
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
for ( let key of m.keys() ){
  console.log(key);
}
for ( let val of m.values() ){
  console.log(val);
}
for ( let item of m.entries() ){
  console.log(item[0],item[1]);
}
for ( let [key,val] of m.entries() ){
  console.log(key,val);
}
m.forEach( function( val , key , ul ){
  console.log( this ); //ul
  console.log( val , key);
} , ul ); // forEach的第二个参数用于改变匿名函数中this指向

Map与其他数据类型的转换

Map转数据的最简单方式是使用 ... 扩展运算符。例如：

console.log( ...m ); //[li, "hello"] [li, "world"]

Map转对象时，必须所有键都是字符串，使用Object.create()函数。Map转JSON时，要求也要求所有键都是字符串，使用JSON.Stringify()函数。

希望本文所述对大家ECMAScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6新数据结构Set与WeakSet用法分析

    本文实例讲述了ES6新数据结构Set与WeakSet用法.分享给大家供大家参考,具体如下: 新数据结构Set与WeakSet 1. Set Set类似于数据,但是成员值都是唯一的.生成Set的方式如下. var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5} 没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了.或者你可以这样写. var set = new Set(

  • 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和WeakSet

    ES6中提供了两新数据结构-Set和WeakSet.Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值.WeakSet也是不重复的值的集合,但是只能用来存放对象. 一.Set使用 (1)Set本身提供了一个构造函数,用来生成Set数据结构. var s = new Set(); [2,2,2,5,8,16,2,1].map(x => s.add(x)) for(i of s){console.log(i)} //2,5,8,16,1 (2)Set()函数可以接受一个数组,作为构造参数,

  • ES6新特性五：Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

  • ES6新数据结构Map功能与用法示例

    本文实例讲述了ES6新数据结构Map功能与用法.分享给大家供大家参考,具体如下: 新数据结构Map JavaScript中对象的本质是键值对的集合,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map.Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子. var m = new Map(); var ul = document.getElementsByTagName('ul'); m.set(ul,'hi'); co

  • es6新特性之 class 基本用法解析

    javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. es6 class 与es5的面向对象的区别: 1. 写法不同,使用关键字class 2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象 3.类的所有方法都在prototype属性上,但是不

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • es6函数name属性功能与用法实例分析

    本文实例讲述了es6函数name属性功能与用法.分享给大家供大家参考,具体如下: 函数的name属性,返回该函数的函数名. function foo () {} foo.name // foo 这个属性早就被浏览器广泛支持,但是直到es6,才将其写入了标准. 需要注意的是,es6对这个属性的行为做出了一些修改.如果将一个匿名函数赋值给一个变量,es5的name属性,会返回空字符串,而es6的name属性会返回实际的函数名. var f = function() {} // es5 f.name

  • ES6新特性之Symbol类型用法分析

    本文实例讲述了ES6新特性之Symbol类型用法.分享给大家供大家参考,具体如下: Symbol类型 1. 为了避免属性名的冲突,ES6新增了Symbol类型.Symbol可以产生一个独一无二的值. let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2); //false 2.Symbol用于属性名

  • ES6字符串模板，剩余参数，默认参数功能与用法示例

    ES6字符串模板，剩余参数，默认参数功能与用法示例

    本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法.分享给大家供大家参考,具体如下: 这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}.如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生. //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.l

  • Fleaphp常见函数功能与用法示例

    本文实例讲述了Fleaphp常见函数功能与用法.分享给大家供大家参考,具体如下: 1. FLEA_Db_TableDataGateway::update()用法: 例如:修改一条 uid=22 的记录, name字段改成"11", pass字段改成"22",就要这样写: $data = array('uid'=>22,'name'=>11,'pass'=>22); $table->update($data); 2. FLEA_Db_Table

  • SQL Server实现split函数分割字符串功能及用法示例

    SQL Server实现split函数分割字符串功能及用法示例

    本文实例讲述了SQL Server实现split函数分割字符串功能及用法.分享给大家供大家参考,具体如下: /* 函数名称:f_SplitToNvarchar 作用:实现split功能的函数 更新记录: 设计思路:将nvarchar类型字符结合的一个串,分隔到一张只有一列nvarchar类型的表里 */ CREATE FUNCTION [dbo].[f_SplitToNvarchar] ( @SourceSql NVARCHAR(MAX),--源分隔字符串 @StrSeprate VARCHAR

  • C#实现的MD5加密功能与用法示例

    本文实例讲述了C#实现的MD5加密功能与用法.分享给大家供大家参考,具体如下: 1.创建MD5Str.cs加密处理类 public class MD5Str { /// <summary> /// 字符串MD5加密 /// </summary> /// <param name="Text">要加密的字符串</param> /// <returns>密文</returns> public static string

随机推荐