一:Set用法:

  ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

  (1).打印:console.log
    var data = new Set([1,2,3]);
    //Set {1, 2, 3}
    console.log(data);

  (2).添加: add
    data.add(4);
    //Set {1, 2, 3, 4}
    console.log(data);
    //Set不会重复添加成员
    data.add(4);
    //Set {1, 2, 3, 4}
    console.log(data);

  (3).成员个数:size
    //4
    console.log(data.size);

  (4).删除:delete
    data.delete(1);
    //Set {2, 3, 4}
    console.log(data);

  (5).查找:has
    //true
    console.log(data.has(2));

  (6).遍历: forEach
    //2
    //3
    //4
    data.forEach(d=>{
      console.log(d);
    });

二.Map用法:

  ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

  也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。

  如果你需要“键值对”的数据结构,Map比Object更合适。

  (1).打印:console.log

    var data = new Map();
    //Map {}
    console.log(data);

  (2).添加 set(key,value)
    data.set('a',1);
    data.set('b',2);
    data.set('c',3);
    //Map {"a" => 1, "b" => 2, "c" => 3
    console.log(data);

  (3).获得: get(key)
    //1
    console.log(data.get('a'));

  (4).成员个数: size
    //3
    console.log(data.size);

  (5).删除:delete
    data.delete('a');
    //Map {"b" => 2, "c" => 3}
    console.log(data);

  (6).查找:has
    //true
    console.log(data.has('b'));

  (7).遍历:forEach
    //b=2
    //c=3
    data.forEach((value,key)=>{
      console.log(key+'='+value);
    });

三.综合使用:

  var s = new Set();

  [2,3,5,4,5,2,2].map(x => s.add(x));

  for(let i of s){

    console.log(i); 

  }

  //2 3 5 4

用vue.js学习es6(五):set和map的使用的更多相关文章

  1. 用vue.js学习es6(一):基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  2. 用vue.js学习es6(二):let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  3. 用vue.js学习es6(六):Iterator和for...of循环

    一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...

  4. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  5. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

  6. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  9. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. ICSharpCode.SharpZipLib 压缩、解压文件 附源码

    http://www.icsharpcode.net/opensource/sharpziplib/ 有SharpZiplib的最新版本,本文使用的版本为0.86.0.518,支持Zip, GZip, ...

  2. Java传值和传址

    调用函数时,传的参数过去可能是传值,也可能是传址.如果是传值,函数内部的操作对参数的值没有影响:如果是传址,函数内部的操作是对参数指向的内存进行操作,会影响参数的值. Java到底是传值还是传址?用下 ...

  3. 【Java每日一题】20161230

    // 20161229问题解析请点击今日问题下方的"[Java每日一题]20161230"查看(问题解析在公众号首发,公众号ID:weknow619)package Dec2016 ...

  4. ASP.NET MVC企业级实战目录

    电子书样稿 (关注最新进度,请加QQ群:161436236) ASP.NET MVC企业实战第1章 MVC开发前奏.pdf ASP.NET MVC企业实战第10章 站内搜索.pdf 已经好长一段时间没 ...

  5. atom配置web开发环境

    1. 安装包 1.1 apm命令 自带apm ,没有菜单栏找install shell commands apm全称:atom package management apm installl [包的名 ...

  6. win10家庭版查看已连接wifi密码

    点击屏幕右下角无线网路图标. 点击网络设置. 完成.

  7. AEAI ESB培训大纲

    1. 概述 本文档的目的是为了让使用者能更好的操作.维护.服务于整个ESB系统平台,该信息系统平台不仅需要成熟稳定的产品,更需要技术熟练的运行维护人员,以便能更好地进行科学有效的运行维护工作. AEA ...

  8. java 执行 jar 包中的 main 方法

    java 执行 jar 包中的 main 方法 通过 OneJar 或 Maven 打包后 jar 文件,用命令: java -jar ****.jar执行后总是运行指定的主方法,如果 jar 中有多 ...

  9. 如何用Github版本控制非Github库

    Git的图形化客户端有很多,不同的人可能习惯用不同的客户端.本人更习惯于Github的客户端,因为上Github比较多,同步代码到Github用官方的客户端是最方便的,所以也就更习惯于使用Github ...

  10. iOS系列 基础篇 07 Action动作和输出口

    iOS系列 基础篇 07 Action动作和输出口 目录:  1. 前言及案例说明 2. 什么是动作? 3. 什么是输出口? 4. 实战 5. 结尾 1. 前言及案例说明 上篇内容我们学习了标签和按钮 ...