一、Set

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

Set 本身是一个构造函数,用来生成 Set 数据结构。

var s = new Set([, , , , '']);
s; // Set {1, 2, 3, "3"}
//重复元素在Set中自动被过滤:

2、Set 函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

//要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

3、Set.size:返回Set实例的成员总数

 var s2 = new Set([1, 2, 3,'56666']);
console.log(s2.size) //

4、四个操作方法。

  • add(value):添加某个值,返回Set结构本身。

        //通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:
    var s = new Set([1, 2, 3]); // 含1, 2, 3
    s.add(4);
    s; // Set {1, 2, 3, 4}
    s.add(4);
    s; // 仍然是 Set {1, 2, 3, 4}
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    //通过delete(key)方法可以删除元素:
    
    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.has(3) //true
  • clear():清除所有成员,没有返回值。

    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.clear(); //undefined
    s;//Set{}

5、Set结构的实例有四个遍历方法,可以用于遍历成员。

 var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3
  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器

    由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

    entries方法返回的遍历器,同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等。

  • forEach():使用回调函数遍历每个成员
 var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3
s2.forEach(function (element, sameElement, set) {
console.log(element);
});
//1,2,3,55555
//Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身
  • for...of 循环遍历Set
  var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3
for (var x of s2) {
console.log(x); // 1、2、3、55555
}

6、扩展运算符(...)内部使用for...of循环,所以也可以用于Set结构

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

7、使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]); // 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4} // 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3} // 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

二、Map      Map是一组键值对的结构,具有极快的查找速度

ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。

1、初始化Map需要一个二维数组,或者直接初始化一个空Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

var m1 = new Map(); // 空Map

2、Map 的方法

set()、has()、get()、delete()

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); //
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

3、结合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身没有mapfilter方法)。

let map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c'); let map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 产生Map结构 {1 => 'a', 2 => 'b'} let map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}

JavaScript(ES6)学习笔记-Set和Map数据结构(一)的更多相关文章

  1. es6学习笔记-set和map数据结构

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...

  2. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  3. es6 学习7 Set 和 Map 数据结构

     Set 和 Map 数据结构 一.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. const set = new Set([1, 2, 3, 4, ...

  4. ES6学习笔记(10)----Set和Map数据结构

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set  基本用法    Set是一种新的数据结构,它的成员都是唯一 ...

  5. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

  6. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  7. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  8. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  9. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

随机推荐

  1. sql 身份证计算年龄和性别

    IdentityNumber 是身份证号 年龄: ,), GETDATE()) / 365.25) as '推荐人年龄', 15位的身份证计算年龄: case when b.IdentityNumbe ...

  2. CentOS 7 搭建CA认证中心实现https取证

    CA认证中心简述 CA :CertificateAuthority的缩写,通常翻译成认证权威或者认证中心,主要用途是为用户发放数字证书 功能:证书发放.证书更新.证书撤销和证书验证. 作用:身份认证, ...

  3. 用Java画简单验证码

    以下是具体代码: package com.jinzhi.tes2; import java.awt.Color;import java.awt.Font;import java.awt.Graphic ...

  4. C#调用endtask

    原文最早发表于百度空间2009-03-23 写这个小工具主要是因为自动化测试那边反馈了一个问题和endtask有关,结果写完之后发现这个问题从程序外部测试不了……c#调endtask主要也是用DllI ...

  5. Weighted Quick Union

    Weighted Quick Union即: 在Quick Union的基础上对结点加权(weighted),在parent[i]基础上增加一个size[i]. 用来存储该结点(site)的所有子结点 ...

  6. [c/c++] programming之路(14)、数组+冒泡和选择排序

    一.数组的基本知识 #include<stdio.h> #include<stdlib.h> void main0(){ ]={,,,,};//数组在内存里是连续排列的 int ...

  7. #map+LCA# Codeforces Round #362 (Div. 2)-C. Lorenzo Von Matterhorn

    2018-03-16 http://codeforces.com/problemset/problem/697/C C. Lorenzo Von Matterhorn time limit per t ...

  8. Bootstrap3基础 page-header 标题下加分割线

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  9. Linux常用命令——文件搜索命令

    Linux常用命令——文件搜索命令 Linux  以#号开头的内容都是内容描述或配置项 find 描述:文件搜索 语法:find [搜索范围] [范围条件] . 当前目录 示例:[root@local ...

  10. css技巧小计

    今天又学到两招,一招是把大框写相对定位,然后小框写绝对定位,运用top和left,想去哪里去哪里 另一招是边框渐变色,微信小程序,边框写渐变我没成功,然后大佬支招写一个大框,相对定位,然后设背景渐变色 ...