Set是无重复值的有序列表。Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果。

Map是有序的键值对,其中的键允许是任何类型。

Set和Map是es6新增的两个数据集合。

Set集合

es6新增了set类型,这是一种无重复值的有序列表。Set允许对它包含的数据进行快速访问。

创建Set并添加项目

Set通过new Set()来创建,调用add()方法就可以向Set中添加项目。检查size属性还能查看其中包含多少项。

let set = new Set();
set.add(5);
set.add("5");
console.log(set.size);//2

Set不会使用强制类型转换来判断值是否重复。还可以向Set添加多个对象,他们不会被合并为同一项。

let set = new Set();

let key1 = {};
let key2 = {}; set.add(key1);
set.add(key2); console.log(set.size);//2

如果add()方法用相同的值进行了多次调用,那么在第一次之后的调用实际上会被忽略。

let set = new Set();

set.add(5);
set.add("5");
set.add(5);//被忽略 console.log(set.size);//2

你可以使用数组来初始化一个Set,并且Set构造器确保不会重复使用这些值。

let set = new Set([1,2,3,4,5,2,6,5,5,5]);
console.log(set.size);//6

虽然数值5在数组中出现了四次,但是Set中只有一个5

你可以使用has()方法来测试某个值是否存在于set中

let set = new Set();

let key1 = {};
let key2 = {};
let key3 = {}; set.add(key1);
set.add(key2); console.log(set.has(key1));//true
console.log(set.has(key3));//false

移除值

使用delete()方法来移除单个值或者调用clear()方法将所有值从Set中移除。

  let set = new Set([1, 2, 3, 4, 5, 2, 6, 5, 5, "5"]);

console.log(set);

set.delete(5);

console.log(set.has(5));//false

set.clear();

console.log(set.size);//0

Set 上的forEach()方法

forEach()方法还会被传递一个回调函数,该回调函数接收三个参数:

  1. Set中下个位置的值
  2. 与第一个参数相同的值
  3. 目标Set本身

由于Set没有键,为了使forEach方法与数组和map的forEach方法一致:将Set中的每一项同时认定为键与值。

let set = new Set([1, 2]);

set.forEach(function(value, key, ownerSet) {
console.log(`${key} ${value}`)
console.log(ownerSet === set);
})

将Set转换为数组

let arr = [1,2,4,3,2,5,5];
let set = new Set(arr); let arr1 = [...set];
console.log(arr1);

Map集合

ES6的Map类型是键值对的有序列表,而键和值都可以是任意类型。键的比较使用的是Object.is(),因此你可以将5与“5”同时作为键,因为他们类型不同。

可以调用set方法并传递一个键与一个关联的值,来给Map添加项;此后使用键名来调用get()方法便能提取对应的值。

let map = new Map();
map.set("name", "cc");
map.set("age", 23); console.log(map.get("name"));//cc
console.log(map.get("age"));//23

也可以使用对象作为键

let map = new Map();
let key1 = {};
let key2 = {}; map.set(key1, 5);
map.set(key2, 8); console.log(map.get(key1));//5
console.log(map.get(key2));//8

Map的方法和属性

  1. has(key)
  2. delete(key)
  3. clear()
  4. size

Map的初始化

你能将数组传递给Map构造器,以便使用数据来初始化一个Map。该数组中的每一项也必须是数组,内部数组的首个项会作为键,第二项则为对应值。因此整个Map就被这些双项数组填充。

let map = new Map([
["name", "cc"],
["age", 26]
]); console.log(map.has("name"));//true
console.log(map.get("name"));//cc
console.log(map.has("age"));//true
console.log(map.get("age"));//26
console.log(map.size);//2

Map上的forEach()方法

let map = new Map([
["name", "cc"],
["age", 26]
]); map.forEach(function(value, key, source) {
console.log(`${key}的值是${value}`);
console.log(source === map);
})

深入理解ES6之—set与map的更多相关文章

  1. 理解Golang哈希表Map的元素

    目录 概述 哈希函数 冲突解决 初始化 结构体 字面量 运行时 操作 访问 写入 扩容 删除 总结 在上一节中我们介绍了 数组和切片的实现原理,这一节会介绍 Golang 中的另一个集合元素 - 哈希 ...

  2. 理解 ES6 Generator-next()方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk

    一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...

  4. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  5. 【读书笔记】【深入理解ES6】#7-Set集合和Map集合

    ES6新标准中将Set集合和Map集合添加到JS中. ES5中Set集合和Map集合 在ES5中,开发者们用对象属性来模拟这两种集合. var set = Object.create(null); s ...

  6. ES6之Set与Map加深理解

    Set 类似于数组,但是成员的值都是唯一的,没有重复的值,有序. Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化. 用途 数组去重: [...new ...

  7. 深入理解es6(下)

    一.symbol javascript基本数据类型: null.undefined.number.boolean.string.symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无 ...

  8. 深入理解ES6(二)(解构赋值)

    变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...

  9. es6之set和map

    1.set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值,set本身就是构造函数,所以可以通过new的方式来创建对象 // 例一 可以做数组去重用 var set ...

随机推荐

  1. java核心卷轴之泛型程序设计

    本文根据<Java核心卷轴>第十二章总结而来,更加详细的内容请查看<Java核心卷轴> 1. 泛型类型只能是引用类型,不可以使用基本数据类型. 2. 类型变量含义 E : 集合 ...

  2. Training little cats poj3735

    Training little cats Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9299   Accepted: 2 ...

  3. 点聚合功能---基于ARCGIS RUNTIME SDK FOR ANDROID

    一直不更新博客的原因,如果一定要找一个,那就是忙,或者说懒癌犯了. 基于ArcGIS RunTime SDK for Android的点聚合功能,本来是我之前做过的一个系统里面的一个小部分,今天抽出一 ...

  4. Fiddler屏蔽某些url的抓取方法

    在用Fiddler调试网页的时候,可能某些频繁的ajax轮询请求会干扰我们,可以通过以下方法屏蔽某些url的抓取. 在需要屏蔽的url行上右键---->“Filter Now”-----> ...

  5. oracle排序的几种方法

    1.创建数据库表 CREATE TABLE USER_INFO(  USERID      VARCHAR2(10 BYTE)                 NOT NULL,  USERNAME  ...

  6. Jquery几行代码解决跟随屏幕滚动DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 用SqlCommandBuilder 实现批量更新

    一般是这样的,如果用设计器将SqlDataAdapter拖到页面中使用时,不会出现SqlDataAdapter.Update(ds)更新时出错情况,因为系统会自动生成SqlDataAdapter的属性 ...

  8. Spring MVC 页面跳转时传递参数

    页面仍然使用 JSP,在跳转时如果想传递参数则需要用到类 RedirectAttributes. 首先看看如何打开一个普通页面: // 登录页面(每个页面都要独立的 Action 来支持其呈现) @R ...

  9. btsync 分享资源

    Btsync是一款跨平台软件,可以在不同的设备之间共享文件. Btsync类似于BT下载,用户对用户(多用户)之间的传送. 文档的分享者可以将资源放到文件夹下,生成共享Key,分享给接受者,接受者只需 ...

  10. 手机1520 win8.1升级win10

    昨天买了手机1520,卖家不错:https://item.taobao.com/item.htm?id=525484481986 于是我想把win8.1升级为win10 首先去http://www.i ...