一、Set对象数据结构

1.Set数据结构类似数组,但是其每个成员都是唯一值,没有重复,且Set本身是一个构造函数,用来生成Set数据结构,用法如下:

const setData = new Set([1, 2, 1, 3, 5]);
console.log(setData); // 打印 1,2,3,5

***Set结构的数据中,5和"5"是不同的值,NaN与NaN是相同的值,但是对象却总是不同的两个数据(即使完全一致的对象)***

Set实例拥有的属性
Set.prototype.constructor: 构造函数,默认就是Set
Set.prototype.size: 返回Set实例成员总数

2.Set实例的操作方法和遍历方法:
let set = new Set([1, 2, 5, 6]);
set.add(value): 添加某个值,返回Set实例
set.delate(value): 删除某个值,返回一个boolean值,表示删除是否成功
set.has(value): 返回一个boolean值,表示该值是否为实例的成员
set.clear(): 清除所有成员,没有返回值

3.Array.from方法可以将Set实例结构转化成数组,如:Array.from(set); // [1 ,2, 5, 6]
数组去重的另一种实现方法:
function dedupe(array) {
// 先将需要去重的数组作为参数传递给Set构造函数,去重处理后通过Array.from转化成数组
return Array.from(new Set(array));
}
var result = dedupe([1, 2, 5, 1,8]); // result = [1, 2, 5, 8]

4.Set遍历:
keys(): 返回键名的遍历器
values(): 返回键值的遍历器
entries(): 返回键值对的遍历器(每次遍历出来的都是一个数组[key,value])
forEach(): 使用回调函数遍历每个成员

**因为Set实例没有键名,只有键值,所有键名和键值都是同一个值,故keys方法与values方法结果完全一致
for(let item of set.keys()) {
console.log(item); //打印结果为1、2、5、8
}
// forEach()遍历
set.forEach((value, key)=>{console.log("key:"+key+" value:"+value)})

二、Map数据结构
1.Map是新型的对象数据解构,ES5、ES3的对象的键只能是字符串,而ES6中的Map数据结构键名可以是任意类型的数据
const map = new Map();
const obj = {name: "bob"};

map.set(obj, "hello world"); // 以对象obj作为键名
map.get(obj); // "hello world" // 获取键名对应的键值

map.has(obj); // true 检查Map实例是否含有键名obj
map.delate(obj); // true 删除Map实例的obj键值对,如果存在这个键值对,则返回true,反之返回false
map.has(obj); // false

const m = new Map([
["a", 1],
["b", 2]
])
m.size // 2
m.has("a") // true
m.get("a") // 1

// Map数据结构如果对同一个键名多次赋值,那么最后一次的覆盖前面的
// 如果读取一个未知的键,则返回undefined
// Map的键实际是跟内存地址绑定的,只要内存地址不同,就视为两个键,但是如果键是一个简单的值(数字、字符串、布

尔值),Map将其视为同一个键,如0和-0或者+0是同一个键,布尔值true跟字符串true不是同一个键,undefined和null也不

是同一个键。而NaN虽然不等于NaN,但是Map将其视为同一个键

2.Map实例的属性和操作方法
(1)size属性 --- 返回Map结构的成员数量
(2)set(key, value) --- 设置键值,键名为key,键值是value,如果键名key已经存在,则覆盖之前的value值,否则生成

一个新的键值对
(3)get(key) --- 读取键名key对应的键值,如果找不到key对应的键名,则返回undefined
(4)has(key) --- 检查Map实例是否含有键key,没有则返回false,反之返回true
(5)delate(key) --- 删除键名key对应的键值对
(6)clear() --- 清空Map实例的所有键值对

3.Map遍历方法:
与Set实例一样,都存在四个遍历方法,keys()、values()、entries()、forEach()
keys() // 遍历Map实例的所有键
values() // 遍历出Map实例的键所对应的value值
entries() // 遍历Map实例的所有键值对

ES6 学习 -- Set和Map数据结构的更多相关文章

  1. ES6学习笔记之map、set与数组、对象的对比

    ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...

  2. ES6系列_12之map数据结构

    1.map数据结构出现的原因? JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制.为了能实现将对象作为键 ...

  3. es6的Set和Map数据结构

    Set 和 Map 数据结构 Set WeakSet Map WeakMap Set § ⇧ 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set ...

  4. ES6笔记03-Set和Map数据结构

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

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

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

  6. ES6学习总结之Set和Map数据结构的理解

    前言 当我们需要存储一些数据的时候,首先想到的是定义一个变量用来存储,之后我们可能学了数组,发现数组比变量可以存储更多的数据,接着可能有其它的存储数据的方法等等,然而我今天需要介绍的是在ES6中比较常 ...

  7. ES6中map数据结构学习

    在项目中遇到一个很恶心的需求,然后发现ES6中的map可以解决,所以简单学习了一下map. Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是“字符串-值”对,属性只 ...

  8. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

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

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

随机推荐

  1. 11、testng.xml文件解析

    我们可以从以下几种方式调用testng 用testng.xml ant 命令行 我们本次重点介绍testng.xml,testng.xml 文件来配置测试用例的执行 ,testng.xml 文件可以很 ...

  2. Ethenet: MAC PHY MII RMII

    https://www.cnblogs.com/liangxiaofeng/p/3874866.html 1. general 下图是网口结构简图.网口由CPU.MAC和PHY三部分组成.DMA控制器 ...

  3. 用EditText控件的属性inputType

    android:inputType参数类型说明 android:inputType="none"--输入普通字符 android:inputType="text" ...

  4. 【转】HTML5标签使用的常见误区

    最近组内进行 HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶 段,有些新的标签元素的解释也是经常有变化 ...

  5. 这是<一起找打的约定>的改良版本

    -- CREATE TABLE class ( -- cid INT(25)auto_increment PRIMARY KEY, -- caption VARCHAR(50) not NULL -- ...

  6. React 生命周期 16.0以下

    虽然有人画过了  但是自己画一下也能加深记忆吧

  7. what codes does sudo command do in Linux?

    sometime, to make your change of configuration file be effective to web application, we have to rest ...

  8. ARM 汇编 内存访问指令

    一. 单个寄存器操作读写内存 内存访问指令格式:<opcode><cond> Rd, [Rn] Rn 中保存的是一个内存的地址值 1. 内存写指令  [ str,strb,st ...

  9. OneDrive一直后台占用CPU的一种解决办法

    系统版本:Windows 7 ultimate x64 Onedrive版本:17.3.6998.0830 最近发现Onedrive一直在后台占用15%左右的CPU,很是觉得奇怪,网上的解决方案是删除 ...

  10. 在Linux下如果要使用接口标志要加什么头文件吗?因为我在使用IFF_UP时会出错,说是未定义

    头文件一般放在/usr/include目录下,用grep 'IFF_UP' /usr/include/*.* |less这个命令查找一下在哪个头文件里面有定义.   追问 嗯~这个方法确实可以查找到一 ...