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


Posted in Javascript onApril 21, 2017

本文实例讲述了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:构造函数,默认就是Set函数。
Set.prototype.size:返回Set的成员总数。

Set数据结构有以下方法

add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。

var s = new Set();
s.add(1).add(2).add(2);
// 注意2被加入了两次
console.log(s.size) // 2
console.log(s.has(1)) // true
console.log(s.has(2)) // true
console.log(s.has(3)) // false
console.log(s.delete(2));
console.log(s.has(2)) // false

Array.from方法可以将Set结构转为数组

var items = new Set([1, 2, 3, 4, 5]);
var arr = Array.from(items);
//运用: 去除数组中重复元素的方法
var array = [1,2,3,2,3,4];
function fun(array) {
  return Array.from(new Set(array));
}
console.log(fun(array));//[ 1, 2, 3, 4 ]

④ Set结构有一个values方法,返回一个遍历器

var s = new Set([1, 2, 3, 4, 5]);
console.log(s.values());//SetIterator { 1, 2, 3, 4, 5 }
//Set结构的默认遍历器就是它的values方法
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)//true
//所以遍历可以直接使用 for...of
for (let x of s) {
  console.log(x);
}
//由于扩展运算符(...)内部使用for...of循环,将Set转化为数组。
var arr = [...s];
console.log(arr);//[ 1, 2, 3, 4, 5 ]

⑤ Set结构的foreach方法

var set = new Set([1, 2, 3]);
set.forEach(function(value,key){
  console.log(value);
});

⑥ Set结构也有keys和entries方法,这时每个值的键名就是键值。

let set = new Set(['red', 'green', 'blue']);
for ( let item of set.keys() ){
  console.log(item);
}
// red
// green
// blue
for ( let [key, value] of set.entries() ){
  console.log(key, value);
}
// red, red
// green, green
// blue, blue

⑦ 数组的map和filter方法的运用

map(x){}: 遍历数组,对每一元素进行处理,返回处理后的数组
filter(x){}: 遍历数组,对每一个元素进行校验,返回含有通过校验元素的数组

var set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
console.log(set);//返回Set结构:{2, 4, 6}
var set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
console.log(set);// 返回Set结构:{2, 4}

2. Map

① 原因:JavaScript的对象,本质上是键值对的集合,但是只能用字符串当作键。

② 定义:它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

③ 属性和方法

size:返回成员总数。
set(key, value):设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key):读取key对应的键值,如果找不到key,返回undefined。
has(key):返回一个布尔值,表示某个键是否在Map数据结构中。
delete(key):删除某个键,返回true。如果删除失败,返回false。
clear():清除所有成员,没有返回值。

④ 与set 相同 可以接受数组参数创建map,但数组的元素是一个个代表键值对的数组构成

var map = new Map();
var map1 = new Map([["name", "张三"], ["title", "Author"]]);
console.log(map1.size)//2

⑤ 只有对同一个对象的引用,Map结构才将其视为同一个键,只要内存地址不一样,就视为两个键。

var map = new Map();
map.set(['a'], 555);
console.log(map.get(['a'])) // undefined
var k1 = ['a'];
//虽然值相同,但这是一个新的值,内存地址不一样,new 的
var k2 = ['a'];
map.set(k1, 111);
map.set(k2, 222);

⑥ 遍历

Map结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。

keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。

console.log(Map[Symbol.iterator] === Map.entries)//true
let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
console.log([...map.keys()]);//[ 1, 2, 3 ]
console.log([...map.values()]);//[ 'one', 'two', 'three' ]
console.log([...map.entries()]);//[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]
console.log([...map]);[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

⑦Map还有一个forEach方法,进行遍历。

⑧与set相同,map可以结合数组的map方法、filter方法,可以实现Map的遍历和过滤。

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

Javascript 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
mui框架移动开发初体验详解
Oct 11 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
webpack配置的最佳实践分享
Apr 21 #Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 #Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 #Javascript
jQuery+pjax简单示例汇总
Apr 21 #jQuery
利用n工具轻松管理Node.js的版本
Apr 21 #Javascript
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
ES6新特性三: Generator(生成器)函数详解
Apr 21 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
py中的目录与文件判别代码
2008/07/16 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python函数局部变量用法实例分析
2015/08/04 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
什么是View State?
2013/01/27 面试题
培训主管的岗位职责
2013/11/23 职场文书
新闻编辑求职信
2014/04/09 职场文书
股东合作协议书范本
2014/04/14 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL